/* =============================================
   ARIRANG MISSION — Design System v3.0
   Visual DNA: Archive × Ocean × Concert × Vinyl
   ============================================= */

/* =============================================
   ARIRANG MISSION — Design System v3.4
   Visual DNA: Spy Archive × Glass UI × Vinyl
   ============================================= */

/* ── PREMIUM ELITE AGENT FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&family=Rajdhani:wght@600;700&display=swap');

:root {
  /* Night / Mission Base */
  --bg-abyss: #050508;
  --bg-card: rgba(10, 10, 20, 0.6);
  /* NEW: ARIRANG Album Colors */
  --ocean-deep: #0a2540;
  /* Deep water for SWIM */
  --wave-foam: #4a90a4;
  /* Gentle wave accent */
  --vinyl-gold: #d4af37;
  /* Vintage record warmth */
  --archive-sepia: #8b7355;
  /* Historical documents */
  --courage-amber: #ff9500;
  /* Warmth, life, courage */

  /* Emotional Spectrum (per member quotes) */
  --hope-green: #34d399;
  /* J-Hope's positivity */
  --jin-warm: #fbbf24;
  /* Jin's balance */
  --suga-discipline: #f87171;
  /* SUGA's resolve */
  --jimin-flow: #60a5fa;
  /* Jimin's current */
  --v-embrace: #c4b5fd;
  /* V's comfort */
  --jk-courage: #fcd34d;
  /* JK's gift */


  /* ARIRANG Red (Spy Vibe) */
  --red-core: #FF145F;
  --gradient-arirang: linear-gradient(135deg, #FF145F 0%, #80002B 100%);
  --glow-soft: rgba(255, 0, 80, 0.15);
  --glow-mid: rgba(255, 0, 80, 0.25);
  --glow-strong: rgba(255, 0, 100, 0.4);

  /* SWIM Warm Current (Archive Vibe) */
  --gold-core: #D7B186;

  /* Typography Contrast */
  --text-heading: #F0F0F5;
  --text-body: #D0D0DA;
  --text-label: #A0A0B0;
  --text-sub: #888899;

  /* UPDATED FONT DNA */
  --font-display: 'Orbitron', sans-serif;
  --font-ui: 'Rajdhani', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* UPDATED SIZE SCALE (Larger for readability) */
  --text-xs: 0.75rem;
  /* 12px */
  --text-sm: 0.8125rem;
  /* 13px */
  --text-base: 0.9375rem;
  /* 15px */
  --text-md: 1rem;
  /* 16px */
  --text-lg: 1.125rem;
  /* 18px */
  --text-xl: 1.375rem;
  /* 22px */
  --text-2xl: 1.75rem;
  /* 28px */
}
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-abyss);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  /* REMOVED: overflow: hidden; */
  /* ADDED for Safari smooth scrolling */
  -webkit-overflow-scrolling: touch;
}

/* Ensure html doesn't trap scroll either */
html {
  height: 100%;
}

/* ==================== LOGIN SCREEN ==================== */

#loginOverlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-abyss);
  background-image: radial-gradient(circle at 50% 45%,
      rgba(255, 0, 80, 0.12) 0%,
      transparent 70%);
  z-index: 10000;
  overflow: hidden;
}

/* Subtle Record Grooves (Vinyl Aesthetic) */
.record-grooves {
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(circle at 50% 50%,
      transparent 0,
      transparent 4px,
      rgba(255, 255, 255, 0.02) 4px,
      rgba(255, 255, 255, 0.02) 5px);
  mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 80%);
  pointer-events: none;
  z-index: 1;
}

/* SWIM Waves */
.swim-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  overflow: hidden;
  opacity: 0.15;
  z-index: 1;
  pointer-events: none;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 120" preserveAspectRatio="none"><path d="M0,60 C150,110 350,10 500,60 C650,110 850,10 1000,60 L1000,120 L0,120 Z" fill="%23D7B186"/></svg>');
  background-repeat: repeat-x;
  background-size: 50% 100%;
  animation: waveMove 20s linear infinite;
}

.wave-2 {
  opacity: 0.5;
  animation-duration: 15s;
  bottom: 10px;
}

@keyframes waveMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ==================== CENTRAL GLASS CARD ==================== */

.login-card.archive-box {
  position: relative;
  z-index: 10;
  width: 90%;
  max-width: 380px;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  border: 1px solid rgba(255, 20, 95, 0.15);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 40px var(--glow-soft);
  transform: translateY(3vh);
  padding: 32px 28px;
  transition: transform 0.3s ease;
}

/* ==================== TOP GLOW STRIP (Refined) ==================== */
/* Changed: narrower, dimmer, more blur, subtle gradient fade-out */

.tape-strip {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 10px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--red-core) 30%,
      var(--red-core) 70%,
      transparent 100%);
  opacity: 0.2;
  filter: blur(10px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 15;
}

/* ==================== LOGO SECTION ==================== */

/* ==================== LOGO SECTION ==================== */

.logo-section {
  text-align: center;
  margin-bottom: 24px;
}

.arirang-logo-container {
  width: 120px;
  height: 100px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 20, 95, 0.15);
}

.arirang-logo-container::after {
  content: '';
  position: absolute;
  inset: -14px;
  background: radial-gradient(circle, rgba(255, 20, 95, 0.2) 0%, transparent 70%);
  z-index: -1;
}

.arirang-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  opacity: 0.85;
  box-shadow: none;
  filter: none;
  mix-blend-mode: normal;
}

/* ==================== HOPETRACKER DIVIDER ==================== */

.hopetracker-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 15px 0 10px 0;
}

.hopetracker-text {
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: #505060;
  letter-spacing: 6px;
  font-weight: 500;
}

.blur-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to left, rgba(80, 80, 96, 0.4), transparent);
}

.line-right {
  background: linear-gradient(to right, rgba(80, 80, 96, 0.4), transparent);
}

/* ==================== TITLES ==================== */

.title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: 4px;
  margin: 10px 0 4px 0;
  text-shadow: 0 0 10px rgba(255, 20, 95, 0.3);
}

.subtitle {
  font-size: 10px;
  color: var(--text-sub);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}

/* ==================== TRANSMISSION LOG ==================== */

.transmission-log {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.log-line {
  width: 25px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 20, 95, 0.3), transparent);
}

.log-text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text-sub);
}

/* ==================== INPUTS & FORMS ==================== */

.input-group {
  margin-bottom: 16px;
}

.input-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--text-label);
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 600;
}

.input-wrapper {
  position: relative;
}

.input-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-sub);
  font-size: 13px;
  opacity: 0.6;
}

.input-group input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  color: var(--text-heading);
  font-family: var(--font-body);
  font-size: 14px;
  transition: all 0.3s ease;
}

.input-group input:focus {
  outline: none;
  border-color: rgba(255, 20, 95, 0.4);
  background: rgba(255, 20, 95, 0.03);
  box-shadow: 0 0 12px var(--glow-soft);
}

/* ==================== BUTTONS ==================== */

.btn-arirang {
  width: 100%;
  padding: 14px;
  background: var(--gradient-arirang);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 0 20px var(--glow-strong), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-arirang:hover {
  transform: scale(1.02);
  box-shadow: 0 0 30px rgba(255, 0, 100, 0.6);
  filter: brightness(1.1);
}

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

.btn-swim {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  background: rgba(215, 177, 134, 0.03);
  border: 1px solid rgba(215, 177, 134, 0.3);
  border-radius: 10px;
  color: var(--gold-core);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-swim:hover {
  background: rgba(215, 177, 134, 0.1);
  border-color: var(--gold-core);
}

/* ==================== DIVIDER & FOOTER ==================== */

.divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  gap: 14px;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
}

.divider-text {
  font-size: 10px;
  color: var(--text-sub);
}

.login-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
}

.connection-status {
  display: flex;
  align-items: center;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--red-core);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--red-core);
  animation: subtlePulse 2s infinite;
  margin-right: 8px;
}

.hope-text {
  font-size: 9px;
  color: var(--text-label);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 2px;
}

@keyframes subtlePulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(1.3);
  }
}

/* ==================== MESSAGES ==================== */

.error-msg {
  color: var(--red-core);
  font-size: 11px;
  margin-top: 10px;
  text-align: center;
}

.result-msg {
  color: var(--gold-core);
  font-size: 11px;
  margin-top: 10px;
  text-align: center;
}

/* ── ROOT VARIABLES ── */
:root {
  /* Night / Mission Base */
  --bg-abyss: #06060A;
  --bg-deep: #08080B;
  --bg-panel: #0E0E14;
  --bg-lifted: #141420;
  --bg-surface: #1A1A28;

  /* ARIRANG Glow Red */
  --red-core: #FF145F;
  --red-mid: #FF2D6F;
  --red-soft: #FF5C8A;
  --red-whisper: rgba(255, 20, 95, 0.06);
  --red-border: rgba(255, 20, 95, 0.18);
  --red-glow: rgba(255, 20, 95, 0.35);

  /* SWIM Warm Current */
  --gold-core: #D7B186;
  --gold-mid: #E5C8A1;
  --gold-soft: #B88A5A;
  --gold-whisper: rgba(215, 177, 134, 0.06);
  --gold-border: rgba(215, 177, 134, 0.15);

  /* BTS Hope Accent */
  --purple-core: #A78BFA;
  --purple-mid: #C4B5FD;
  --purple-soft: #7C3AED;
  --purple-whisper: rgba(167, 139, 250, 0.06);
  --purple-border: rgba(167, 139, 250, 0.15);

  /* Status */
  --green: #00FF66;
  --green-soft: rgba(0, 255, 102, 0.08);
  --green-border: rgba(0, 255, 102, 0.15);
  --fail: #FF3B5C;
  --warn: #FFB020;

  /* Text */
  --text-primary: #F8F7FA;
  --text-secondary: #B9B6C2;
  --text-muted: #6B6880;
  --text-ghost: #3D3A4A;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-light: rgba(255, 255, 255, 0.08);
  --border-mid: rgba(255, 255, 255, 0.12);

  /* Glass */
  --glass-bg: rgba(14, 14, 20, 0.72);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-shine: rgba(255, 255, 255, 0.03);

  /* Dimensions */
  --sidebar-w: 260px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-layers */
  --z-sidebar: 100;
  --z-overlay: 200;
  --z-modal: 500;
  --z-toast: 999;
  --z-loading: 9999;
}


/* ── RESET + BASE ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-abyss);
  color: var(--text-primary);
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Subtle background texture — vinyl groove */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255, 20, 95, 0.03) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(167, 139, 250, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(215, 177, 134, 0.02) 0%, transparent 50%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0px, transparent 40px, rgba(255, 255, 255, 0.008) 40px, rgba(255, 255, 255, 0.008) 41px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

::selection {
  background: rgba(255, 20, 95, 0.3);
  color: #fff;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 20, 95, 0.25);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 20, 95, 0.4);
}


/* ── TYPOGRAPHY ── */
.font-display {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.font-mono {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
}

.text-xs {
  font-size: 0.625rem;
}

/* 10px */
.text-sm {
  font-size: 0.6875rem;
}

/* 11px */
.text-base {
  font-size: 0.75rem;
}

/* 12px */
.text-md {
  font-size: 0.8125rem;
}

/* 13px */
.text-lg {
  font-size: 0.9375rem;
}

/* 15px */
.text-xl {
  font-size: 1.125rem;
}

/* 18px */
.text-2xl {
  font-size: 1.5rem;
}

/* 24px */
.text-3xl {
  font-size: 2rem;
}

/* 32px */

.label-tag {
  font-size: 0.5625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}

.hl {
  color: var(--red-core);
  font-weight: 800;
}


/* ── WAVE DIVIDER ── */
.wave-divider {
  width: 100%;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 12 Q150 0 300 12 T600 12 T900 12 T1200 12 V24 H0Z' fill='rgba(255,20,95,0.04)'/%3E%3C/svg%3E") repeat-x;
  margin: 16px 0;
}

.wave-divider-gold {
  width: 100%;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 12 Q150 0 300 12 T600 12 T900 12 T1200 12 V24 H0Z' fill='rgba(215,177,134,0.04)'/%3E%3C/svg%3E") repeat-x;
  margin: 16px 0;
}


/* ── CIRCLE MOTIFS ── */
.circle-frame {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--red-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--bg-panel);
  flex-shrink: 0;
}

.circle-frame::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed var(--border-subtle);
}

.circle-frame.gold {
  border-color: var(--gold-border);
}

.circle-frame.purple {
  border-color: var(--purple-border);
}

.circle-frame.green {
  border-color: var(--green-border);
}

/* Ring progress */
.ring-progress {
  position: relative;
  width: 64px;
  height: 64px;
}

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

.ring-progress .ring-track {
  fill: none;
  stroke: var(--border-subtle);
  stroke-width: 3;
}

.ring-progress .ring-fill {
  fill: none;
  stroke: var(--red-core);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s var(--ease-out);
}

.ring-progress .ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
}


/* ── GLASSMORPHISM CARDS ── */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-shine), transparent);
}

/* Card with left accent */
.mission-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--red-core);
  border-radius: var(--radius-sm);
  padding: 16px;
  position: relative;
  transition: border-color 0.3s, transform 0.2s;
}

.mission-card:hover {
  border-left-color: var(--red-mid);
  transform: translateX(2px);
}

.mission-card.completed {
  border-left-color: var(--green);
}

.mission-card.completed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 255, 102, 0.02), transparent);
  pointer-events: none;
  border-radius: inherit;
}

/* Archive card — paper texture feel */
.archive-card {
  background:
    linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-lifted) 100%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.archive-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red-core), var(--gold-core), var(--purple-core));
  opacity: 0.6;
}

.archive-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 28px, rgba(255, 255, 255, 0.01) 28px, rgba(255, 255, 255, 0.01) 29px);
  pointer-events: none;
}


#app {
  display: none;
  min-height: 100vh;
  height: 100vh;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-panel);
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.35s var(--ease-out);
}

body,
html {
  overflow-x: hidden !important;
}

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 12px 20px;
}

/* Sidebar brand */
.sb-brand {
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}

.sb-brand-title {
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-core);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sb-brand-title::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--red-core);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--red-glow);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(0.85);
  }
}

.sb-brand-sub {
  font-size: 0.5625rem;
  color: var(--text-ghost);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: 4px;
}

/* Sidebar Agent Card Container */
.sb-agent-card {
  display: flex;
  align-items: center;
  /* Vertically centers name with PFP */
  gap: 16px;
  padding: 14px;
  margin: 8px 0 12px;
  background: var(--bg-lifted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}

/* Container holds the image AND the dot. It does NOT hide overflow. */
.sb-agent-pfp {
  width: 44px;
  height: 44px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* This is the wrapper specifically for the image */
.sb-agent-pfp .pfp-img-wrapper {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--red-border);
  background: #000;
  overflow: hidden;
  /* Only clips the image, NOT the dot! */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.sb-agent-pfp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15) translateX(-2px);
  /* Zooms in and shifts left to hide the speech bubble tail */
  display: block;
}

/* The online dot is positioned relative to the main container, so it won't be clipped */
.sb-agent-pfp .online-dot {
  position: absolute;
  bottom: 0px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: var(--green);
  border: 2px solid var(--bg-lifted);
  border-radius: 50%;
  z-index: 10;
}

/* Adjust the info layout to ensure vertical centering */
.sb-agent-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Agent Name — clean and premium */
.sb-agent-name {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: 0px !important;
  text-transform: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  /* Let flex parent control the width */
  display: block;
}

/* Meta row — Team + ID on one clean line */
.sb-agent-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: nowrap;
}

/* Team tag pill */
.sb-agent-team {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700;
  color: var(--team-color, var(--red-core));
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Dot separator */
.sb-agent-meta-sep {
  width: 3px;
  height: 3px;
  background: var(--text-ghost);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Agent ID */
.sb-agent-id {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--text-ghost);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Nav sections */
.nav-section {
  margin-bottom: 4px;
}

.nav-section-title {
  font-size: 0.5625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-ghost);
  padding: 12px 12px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  user-select: none;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--red-whisper);
  color: var(--red-core);
  font-weight: 700;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--red-core);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.nav-item .nav-icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.nav-item .nav-badge {
  margin-left: auto;
  font-size: 0.5625rem;
  font-weight: 800;
  padding: 1px 6px;
  background: var(--red-core);
  color: #fff;
  border-radius: var(--radius-full);
  min-width: 18px;
  text-align: center;
}

.nav-item.sub-item {
  padding-left: 42px;
  font-size: 0.6875rem;
}

/* Nav group collapsible */
.nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  user-select: none;
}

.nav-group-toggle:hover {
  background: rgba(255, 255, 255, 0.02);
}

.nav-group-toggle .nav-chevron {
  margin-left: auto;
  font-size: 0.625rem;
  transition: transform 0.25s var(--ease-out);
  color: var(--text-ghost);
}

.nav-group-toggle.open .nav-chevron {
  transform: rotate(90deg);
}

/* --- FIXED COLLAPSIBLE LOGIC --- */
.nav-group-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  /* Smooth but snaps to height */
}

.nav-group-body.open {
  max-height: 5000px;
  /* Large enough for 100+ members */
  transition: max-height 0.5s ease-in;
}

/* Ensure the parent card doesn't trap the scroll */
.archive-card {
  overflow: visible !important;
}

/* Sidebar footer */
.sb-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sb-online {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.625rem;
  color: var(--text-muted);
}

.sb-online::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}


/* ── MAIN CONTENT AREA ── */
.main-content {
  margin-left: var(--sidebar-w);
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

.pages-wrapper {
  padding: 20px 24px 40px;
  max-width: 860px;
  margin: 0 auto;
  flex: 1;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  /* Crucial for iOS scroll */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Top bar */
.top-bar {
  display: none;
  /* visible on mobile */
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 10px 16px;
  background: rgba(6, 6, 10, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
  justify-content: space-between;
}

.top-bar-burger {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 4px 8px;
}

.top-bar-title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-core);
}


/* ── PAGE SECTIONS ── */
.page {
  display: none;
}

.page.active {
  display: block;
  animation: pageIn 0.35s var(--ease-out);
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-subtitle {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Section labels */
.section-label {
  font-size: 0.5625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-ghost);
  margin: 20px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}


/* ── GRID LAYOUTS ── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
}

/* Layered grid — overlapping panels */
.layered-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.layered-grid .span-full {
  grid-column: 1 / -1;
}


/* ── MINIMALIST DATA STRIPS (STACKED VERTICALLY) ── */
.stat-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 20px 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.stat-box:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--team-color);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px var(--team-color, rgba(255, 20, 95, 0.2));
}

.stat-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  display: none;
}

.stat-box .sv {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  letter-spacing: -1px;
  line-height: 1;
}

.stat-box .sv.red {
  color: var(--red-core);
}

.stat-box .sv.gold {
  color: var(--gold-core);
}

.stat-box .sv.purple {
  color: var(--purple-core);
}

.stat-box .sv.green {
  color: var(--green);
}

.stat-box .sv.white {
  color: var(--text-primary);
}

.stat-box .sl,
.stat-box .h-stat-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-top: 0;
  opacity: 0.8;
  text-align: center;
}


/* ── PROGRESS BARS ── */
.pbar {
  height: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.pfill {
  height: 100%;
  background: linear-gradient(90deg, var(--red-core), var(--red-mid));
  border-radius: var(--radius-full);
  transition: width 0.6s var(--ease-out);
  position: relative;
}

.pfill.green {
  background: linear-gradient(90deg, #00cc55, var(--green));
}

.pfill.gold {
  background: linear-gradient(90deg, var(--gold-soft), var(--gold-core));
}

.pfill.purple {
  background: linear-gradient(90deg, var(--purple-soft), var(--purple-core));
}

/* Shimmer animation on active bars */
.pfill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  animation: shimmer 2.5s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 200%;
  }
}


/* ── MISSION ROWS ── */
.m-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-lifted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  font-size: 0.75rem;
  transition: background 0.15s;
}

.m-row:hover {
  background: var(--bg-surface);
}

.m-pass {
  color: var(--green);
  font-weight: 800;
  font-size: 0.6875rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.m-fail {
  color: var(--fail);
  font-weight: 800;
  font-size: 0.6875rem;
}


/* ── DAILY MISSION TRACKER (Mon-Sun boxes) ── */
.daily-tracker {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 8px;
}

.daily-box {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-lifted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 0.5625rem;
  gap: 2px;
  transition: all 0.2s;
  position: relative;
}

.daily-box .day-label {
  font-weight: 700;
  color: var(--text-ghost);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.daily-box .day-icon {
  font-size: 0.875rem;
}

.daily-box.completed {
  background: var(--green-soft);
  border-color: var(--green-border);
}

.daily-box.completed .day-icon::after {
  content: '✓';
  color: var(--green);
}

.daily-box.failed {
  background: rgba(255, 59, 92, 0.04);
  border-color: rgba(255, 59, 92, 0.12);
}

.daily-box.today {
  border-color: var(--red-core);
  box-shadow: 0 0 8px var(--red-glow);
}

.daily-box.future {
  opacity: 0.35;
}


/* ── RANKING ROWS ── */
.r-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-lifted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: 3px;
  transition: all 0.15s;
}

.r-row:hover {
  background: var(--bg-surface);
  transform: translateX(2px);
}

.r-num {
  width: 28px;
  font-size: 0.75rem;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  text-align: center;
  flex-shrink: 0;
}

.r-num.top {
  font-size: 1rem;
}

.r-name {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.r-name.me {
  color: var(--red-core);
  font-weight: 800;
}

.r-team {
  font-size: 0.5625rem;
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--bg-panel);
  border-radius: var(--radius-full);
}

.r-xp {
  font-size: 0.75rem;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
  color: var(--red-core);
  white-space: nowrap;
}


/* ── TEAM COMPARISON ── */
.tc-row {
  padding: 14px;
  background: var(--bg-lifted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: transform 0.15s;
}

.tc-row:hover {
  transform: translateX(2px);
}

.tc-rank {
  width: 24px;
  font-size: 0.875rem;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  text-align: center;
  flex-shrink: 0;
  padding-top: 2px;
}

.tc-rank.first {
  color: #ffd700;
}

.tc-info {
  flex: 1;
  min-width: 0;
}

.tc-name {
  font-size: 0.8125rem;
  font-weight: 700;
}

.tc-name.mine {
  color: var(--red-core);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tc-xp {
  font-size: 0.75rem;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
  color: var(--red-core);
}

.tc-dots {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.tc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: all 0.2s;
}

.tc-dot.on {
  background: var(--green);
  box-shadow: 0 0 6px rgba(0, 255, 102, 0.4);
}

.tc-dot.off {
  background: rgba(255, 255, 255, 0.08);
}


/* ── UNIT BOXES / TREASURE HUBS ── */
.unit-box {
  background: var(--bg-lifted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.unit-box::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, var(--red-glow), transparent 70%);
  opacity: 0.15;
  pointer-events: none;
}

.ub-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.ub-name {
  font-size: 0.8125rem;
  font-weight: 700;
}

.ub-count {
  font-size: 0.75rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
}

.ub-count.done {
  color: var(--green);
}

.ub-count.wip {
  color: var(--text-muted);
}

/* Treasure hub card variant */
.treasure-hub {
  background: linear-gradient(135deg, var(--bg-panel), var(--bg-lifted));
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--ease-out);
}

.treasure-hub:hover {
  border-color: var(--red-border);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.treasure-hub::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 20, 95, 0.04), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(167, 139, 250, 0.03), transparent 50%);
  pointer-events: none;
}

.treasure-hub .th-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 2px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  position: relative;
}

.treasure-hub.unlocked .th-icon {
  border-color: var(--green);
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.2);
}

.treasure-hub .th-title {
  font-size: 0.75rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.treasure-hub .th-xp {
  font-size: 0.6875rem;
  color: var(--gold-core);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}


/* ── SIDE MISSIONS ── */
.sm-track {
  background: var(--bg-lifted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 8px;
}

.sm-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.sm-n {
  font-size: 0.75rem;
  font-weight: 700;
}

.sm-w {
  font-size: 0.6875rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
}

.sm-w.done {
  color: var(--green);
}

.sm-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.sm-cell {
  text-align: center;
  padding: 6px 2px;
  border-radius: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
}

.sm-cell.pass {
  background: var(--green-soft);
  border-color: var(--green-border);
}

.sm-cell.fail {
  background: rgba(255, 59, 92, 0.04);
  border-color: rgba(255, 59, 92, 0.1);
}

.sm-cell.future {
  opacity: 0.3;
}

.sc-day {
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--text-ghost);
  text-transform: uppercase;
}

.sc-val {
  font-size: 0.6875rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
}


/* ── ALBUM 2X GRID ── */
.a2-grid-wrap {
  overflow-x: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

.a2-grid {
  display: grid;
  grid-template-columns: 120px repeat(7, 1fr);
  gap: 2px;
  min-width: 460px;
}

.a2-hdr {
  font-size: 0.5625rem;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 4px;
  color: var(--text-ghost);
}

.a2-track {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 6px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
}

.a2-cell {
  text-align: center;
  padding: 5px 2px;
  font-size: 0.625rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  border-radius: 3px;
  border: 1px solid transparent;
}

.a2-cell.pass {
  background: var(--green-soft);
  border-color: var(--green-border);
  color: var(--green);
}

.a2-cell.fail {
  background: rgba(255, 59, 92, 0.04);
  border-color: rgba(255, 59, 92, 0.08);
  color: var(--fail);
}

.a2-cell.future {
  color: var(--text-ghost);
  opacity: 0.4;
}


/* ── ANNOUNCEMENTS ── */
.ann {
  padding: 16px;
  background: var(--bg-lifted);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--gold-core);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.ann-t {
  font-size: 0.8125rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.ann-m {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.ann-d {
  font-size: 0.5625rem;
  color: var(--text-ghost);
  margin-top: 6px;
}


/* ── CHAT ── */
#chatBox {
  max-height: 400px;
  overflow-y: auto;
  padding: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}

.chat-msg {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.cm-name {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--red-core);
}

.cm-team {
  font-size: 0.5625rem;
  color: var(--text-ghost);
  margin-left: 4px;
}

.cm-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.5;
}


/* ── BUTTONS ── */
.btn-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--red-core), #cc1050);
  border: none;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  width: 100%;
}

.btn-red:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 20, 95, 0.3);
}

.btn-red:active {
  transform: translateY(0);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.btn-outline:hover {
  border-color: var(--red-core);
  color: var(--red-core);
  background: var(--red-whisper);
}

.btn-ghost {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.6875rem;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}

.btn-ghost:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}


/* ── FORM INPUTS ── */
.input-field {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-deep);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.input-field::placeholder {
  color: var(--text-ghost);
}

.input-field:focus {
  border-color: var(--red-core);
  box-shadow: 0 0 0 3px var(--red-whisper);
}


/* ── FEED ITEMS ── */
.feed-item {
  padding: 14px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s;
}

.feed-item:hover {
  background: rgba(255, 255, 255, 0.01);
}

.feed-type {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.feed-msg {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.feed-time {
  font-size: 0.5625rem;
  color: var(--text-ghost);
  margin-top: 4px;
}


/* ── COUNTDOWN ── */
.countdown-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.cd-label {
  font-size: 0.5625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-ghost);
}

.cd-blocks {
  display: flex;
  gap: 6px;
}

.cd-block {
  text-align: center;
  padding: 6px 10px;
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  min-width: 44px;
}

.cd-num {
  font-size: 1rem;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
  color: var(--red-core);
  display: block;
}

.cd-lbl {
  font-size: 0.5rem;
  color: var(--text-ghost);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cd-live {
  color: var(--green);
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  animation: pulse-dot 2s infinite;
}


/* ── WARNING / LEAVE BANNERS ── */
.warn-banner {
  display: none;
  padding: 12px 16px;
  background: rgba(255, 59, 92, 0.04);
  border: 1px solid rgba(255, 59, 92, 0.15);
  border-left: 4px solid var(--fail);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.leave-banner {
  display: none;
  padding: 12px 16px;
  background: var(--gold-whisper);
  border: 1px solid var(--gold-border);
  border-left: 4px solid var(--gold-core);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  font-size: 0.75rem;
  color: var(--gold-core);
  font-weight: 700;
}


/* ── ATTENDANCE / POLICE GRID ── */
.ap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ap-box {
  background: var(--bg-lifted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: center;
}

.ap-label {
  font-size: 0.5625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-ghost);
  margin-bottom: 6px;
}


/* ── ELITE STREAK WIDGET ── */
.streak-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: rgba(0, 255, 102, 0.03);
  border: 1px solid rgba(0, 255, 102, 0.2);
  border-radius: 12px;
}

.streak-info-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.streak-fire {
  font-size: 1.5rem;
  animation: subtle-pulse 2s ease-in-out infinite;
}

@keyframes subtle-pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.streak-num {
  font-size: 32px;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
  color: #fff;
  line-height: 1;
}

.streak-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: var(--font-ui);
}

.streak-status {
  font-family: 'Share Tech Mono', monospace;
  color: var(--green);
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(0, 255, 102, 0.4);
  padding: 6px 12px;
  background: rgba(0, 255, 102, 0.1);
  border-radius: 4px;
}

letter-spacing: 0.1em;
}


/* =============================================
   LOADING SCREEN — "SWIM" DEEP OCEAN VIBE
   ============================================= */

#loading {
  position: fixed;
  inset: 0;
  z-index: 99999;
  /* Deep oceanic abyss background */
  background: radial-gradient(ellipse at center bottom, #0e2a47 0%, #051020 50%, #010308 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease;
}

.arirang-loading {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  overflow: hidden;
}

/* ── Underwater Air Bubbles ── */
.loading-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.l-particle {
  position: absolute;
  left: var(--x);
  bottom: var(--y);
  width: 4px;
  height: 4px;
  /* Icy cyan bubbles */
  background: rgba(125, 211, 252, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(125, 211, 252, 0.5);
  animation: bubbleRise var(--dur, 4s) ease-in infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}

@keyframes bubbleRise {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }

  20% {
    opacity: 0.8;
  }

  80% {
    opacity: 0.6;
  }

  100% {
    transform: translateY(-80px) scale(1.5);
    opacity: 0;
  }
}

/* ── MAIN PLAYER CONTAINER ── */
.vinyl-player {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

/* ── Water Sonar Ripples ── */
.ripple-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Cyan water rings */
  border: 1px solid rgba(56, 189, 248, 0.3);
  animation: rippleExpand 3s ease-out infinite;
}

.ripple:nth-child(2) {
  animation-delay: 1s;
}

.ripple:nth-child(3) {
  animation-delay: 2s;
}

@keyframes rippleExpand {
  0% {
    transform: scale(1);
    opacity: 0.8;
    border-color: rgba(56, 189, 248, 0.6);
  }

  100% {
    transform: scale(2.8);
    opacity: 0;
    border-color: rgba(2, 132, 199, 0.1);
  }
}

/* ── Vinyl Record (Deep Sea Theme) ── */
.vinyl-record {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #050b14 !important;
  background-image: repeating-radial-gradient(circle at center,
      #050b14 0px,
      #0a192f 2px,
      #050b14 4px) !important;
  border: 2px solid rgba(56, 189, 248, 0.15);
  box-shadow: 0 0 25px rgba(2, 132, 199, 0.4), inset 0 0 15px rgba(0, 0, 0, 0.8);
  animation: vinylSpin 4s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
}

/* Deep Teal/Ocean Blue Label */
.vinyl-label {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7, #082f49) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
  border: 1px solid rgba(125, 211, 252, 0.3);
  box-shadow: 0 0 15px rgba(2, 132, 199, 0.6);
}

.vinyl-label::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #010409 !important;
  border: 1px solid rgba(56, 189, 248, 0.5);
}

.vinyl-label-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 6px;
  font-weight: 900;
  color: #f0f9ff;
  letter-spacing: 1px;
}

.vinyl-label-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: 5px;
  color: rgba(186, 230, 253, 0.7);
}

/* Frosted Icy Reflection */
.vinyl-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 40%, rgba(125, 211, 252, 0.05) 45%, rgba(125, 211, 252, 0.15) 50%, rgba(125, 211, 252, 0.05) 55%, transparent 60%);
  pointer-events: none;
  z-index: 6;
}

@keyframes vinylSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ── Needle (Silver & Cyan) ── */
.needle {
  position: absolute;
  top: 15px;
  right: -25px;
  width: 65px;
  height: 4px;
  background: linear-gradient(90deg, #94a3b8, #475569);
  transform: rotate(35deg);
  transform-origin: right center;
  border-radius: 2px;
  z-index: 10;
  box-shadow: -2px 4px 6px rgba(0, 0, 0, 0.6);
}

.needle::before {
  content: '';
  position: absolute;
  right: -5px;
  top: -8px;
  width: 14px;
  height: 20px;
  background: #1e293b;
  border-radius: 4px;
  border: 1px solid rgba(125, 211, 252, 0.2);
}

.needle::after {
  content: '';
  position: absolute;
  left: -2px;
  top: -1px;
  width: 6px;
  height: 6px;
  background: #38bdf8;
  /* Cyan needle tip */
  border-radius: 50%;
  box-shadow: 0 0 8px #38bdf8;
}

/* ── BTS Logo (Ocean Glow) ── */
.logo-emerge {
  text-align: center;
  z-index: 5;
}

.bts-logo {
  width: 80px;
  height: 32px;
  color: #f0f9ff;
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.6));
}

.logo-subtitle {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: rgba(125, 211, 252, 0.6);
  letter-spacing: 4px;
  margin-top: 4px;
}

/* ── Wisdom Quotes ── */
.loading-wisdom {
  text-align: center;
  max-width: 320px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.wisdom-quote {
  display: none;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(241, 245, 249, 0.8);
  line-height: 1.6;
  font-style: italic;
  animation: quoteFade 0.8s ease forwards;
  margin: 0;
  padding: 0 20px;
}

.wisdom-quote.active {
  display: block;
}

.wisdom-author {
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  color: #38bdf8;
  /* Cyan author name */
  letter-spacing: 1px;
  display: inline-block;
  margin-top: 6px;
}

@keyframes quoteFade {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Progress & Status ── */
.loading-bottom {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 80%;
  max-width: 280px;
  z-index: 10;
}

.loading-status {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: #e2e8f0;
  letter-spacing: 2px;
  margin-bottom: 12px;
  animation: statusPulse 2s infinite;
}

@keyframes statusPulse {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

.loading-progress {
  width: 100%;
  height: 2px;
  background: rgba(56, 189, 248, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}

.loading-progress-fill {
  width: 0%;
  height: 100%;
  /* Ocean gradient progress bar */
  background: linear-gradient(90deg, #0284c7, #38bdf8, #bae6fd);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
  animation: progressFill 4s ease-in-out forwards;
}

@keyframes progressFill {
  0% {
    width: 0%;
  }

  50% {
    width: 60%;
  }

  100% {
    width: 95%;
  }
}

.loading-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  color: rgba(125, 211, 252, 0.4);
  letter-spacing: 1px;
}

/* ── Deep Ocean Currents (Base Waves) ── */
.ocean-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.ocean-waves .wave {
  position: absolute;
  bottom: 0;
  left: -10%;
  right: -10%;
  height: 60px;
  background: linear-gradient(180deg, rgba(2, 132, 199, 0.15) 0%, transparent 100%);
  border-radius: 50% 50% 0 0;
  animation: loadWave 6s ease-in-out infinite alternate;
}

.ocean-waves .wave:nth-child(2) {
  height: 40px;
  animation-delay: -2s;
  animation-duration: 8s;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.1) 0%, transparent 100%);
}

.ocean-waves .wave:nth-child(3) {
  height: 20px;
  animation-delay: -4s;
  animation-duration: 5s;
  background: linear-gradient(180deg, rgba(125, 211, 252, 0.05) 0%, transparent 100%);
}

@keyframes loadWave {
  0% {
    transform: translateX(-2%) scaleY(1);
  }

  100% {
    transform: translateX(2%) scaleY(1.3);
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {

  .vinyl-record,
  .ripple,
  .ocean-waves .wave,
  .loading-progress-fill,
  .l-particle {
    animation: none !important;
  }

  .loading-progress-fill {
    width: 95% !important;
  }
}


/* ── LOGIN OVERLAY ── */
#loginOverlay {
  position: fixed;
  inset: 0;
  background: var(--bg-abyss);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.login-card {
  width: 100%;
  max-width: 380px;
  padding: 40px 32px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red-core), var(--gold-core), var(--purple-core));
}

.login-title {
  text-align: center;
  font-size: 1.125rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--red-core);
  margin-bottom: 6px;
}

.login-subtitle {
  text-align: center;
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}


/* ── PASSWORD MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: 20px;
}

[hidden] {
  display: none !important;
}

.modal-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  max-width: 380px;
  width: 100%;
  overflow: hidden;
}

.modal-header {
  padding: 16px 20px;
  background: var(--bg-lifted);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-body {
  padding: 20px;
}


/* ── NOTIFICATION BADGE ── */
#notifBadge {
  position: fixed;
  top: 14px;
  right: 60px;
  z-index: var(--z-toast);
  background: var(--red-core);
  color: #fff;
  padding: 6px 14px;
  font-size: 0.6875rem;
  font-weight: 900;
  cursor: pointer;
  border-radius: var(--radius-sm);
  animation: notifPulse 2s infinite;
}

@keyframes notifPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 20, 95, 0.5);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(255, 20, 95, 0);
  }
}

/* ── PULSE BORDER ANIMATION ── */
@keyframes pulseBorder {

  0%,
  100% {
    border-color: var(--fail);
  }

  50% {
    border-color: rgba(255, 59, 92, 0.3);
  }
}


/* ══════════════════════════════════════
   THE MAGIC SHIP
   State 1: Harbor (dark, waiting)
   State 2: Sailing (activated, concert)
   ══════════════════════════════════════ */

.ship-container {
  position: relative;
  background:
    linear-gradient(180deg, #050510 0%, #0a0a1a 50%, #0c1020 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 30px 20px 20px;
  min-height: 460px;
}

/* Ocean waves at bottom */
.ship-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30 Q150 10 300 30 T600 30 T900 30 T1200 30 V60 H0Z' fill='rgba(255,20,95,0.03)'/%3E%3Cpath d='M0 40 Q200 20 400 40 T800 40 T1200 40 V60 H0Z' fill='rgba(167,139,250,0.02)'/%3E%3C/svg%3E") repeat-x;
  animation: waveMove 8s linear infinite;
  pointer-events: none;
}

@keyframes waveMove {
  0% {
    background-position-x: 0;
  }

  100% {
    background-position-x: 1200px;
  }
}

/* Ship silhouette */
.ship-vessel {
  width: 160px;
  height: 80px;
  margin: 30px auto 0;
  position: relative;
  transition: all 1.5s var(--ease-out);
}

.ship-hull {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(135deg, #1a1a2e, #0f0f23);
  border: 1px solid rgba(255, 255, 255, 0.08);
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
}

.ship-mast {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 50px;
  background: rgba(255, 255, 255, 0.15);
}

.ship-flag {
  position: absolute;
  top: 0;
  left: 2px;
  width: 24px;
  height: 14px;
  background: var(--red-core);
  clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%);
  opacity: 0.7;
}

/* Activated state */
.ship-container.activated {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(124, 58, 237, 0.08), transparent 60%),
    linear-gradient(180deg, #050510 0%, #0a0820 50%, #100828 100%);
  border-color: var(--purple-border);
}

.ship-container.activated .ship-vessel {
  animation: shipSail 4s ease-in-out infinite;
}

@keyframes shipSail {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  25% {
    transform: translateY(-4px) rotate(-1deg);
  }

  75% {
    transform: translateY(-2px) rotate(1deg);
  }
}

/* Badge slots around ship */
.ship-badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.ship-badge-slot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px dashed var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: var(--bg-deep);
  position: relative;
  transition: all 0.4s var(--ease-out);
  cursor: default;
}

.ship-badge-slot.earned {
  border-style: solid;
  border-color: var(--green);
  box-shadow: 0 0 16px rgba(0, 255, 102, 0.2);
  animation: badgeGlow 2.5s ease-in-out infinite;
}

@keyframes badgeGlow {

  0%,
  100% {
    box-shadow: 0 0 12px rgba(0, 255, 102, 0.15);
  }

  50% {
    box-shadow: 0 0 24px rgba(0, 255, 102, 0.35);
  }
}

.ship-badge-slot img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Army bomb dots on activation */
.army-bomb-crowd {
  display: none;
  justify-content: center;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 0 20px;
}

.ship-container.activated .army-bomb-crowd {
  display: flex;
}

.crowd-dot {
  width: 4px;
  height: 4px;
  background: var(--purple-mid);
  border-radius: 50%;
  animation: crowdWave var(--delay, 2s) ease-in-out infinite;
  opacity: 0.6;
}

@keyframes crowdWave {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  50% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

.ship-activation-text {
  text-align: center;
  margin-top: 16px;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}


/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    width: 280px;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.6);
  }

  .main-content {
    margin-left: 0;
  }

  .top-bar {
    display: flex;
  }

  .pages-wrapper {
    padding: 14px 14px 80px;
    height: calc(100vh - 48px);
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }

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

  .layered-grid {
    grid-template-columns: 1fr;
  }

  .stat-box {
    padding: 10px 8px;
  }

  .stat-box .sv {
    font-size: 1rem;
  }

  .a2-grid {
    min-width: 380px;
  }

  .ship-container {
    min-height: 380px;
    padding: 20px 14px;
  }

  #notifBadge {
    right: 14px;
    top: 14px;
  }
}

@media (max-width: 400px) {
  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  .daily-tracker {
    gap: 2px;
  }

  .sm-grid {
    gap: 2px;
  }
}


/* ── SIDEBAR OVERLAY (mobile) ── */
#sidebarOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: calc(var(--z-sidebar) - 1);
}

/* ══════════════════════════════════════
   MOBILE FIX — Sidebar + Layout
   ══════════════════════════════════════ */

/* Force hidden elements */
[hidden] {
  display: none !important;
}

/* Sidebar close button — hidden on desktop */
.sb-close-btn {
  display: none;
  background: none;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  font-size: 1rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.sb-close-btn:hover {
  color: var(--red-core);
  border-color: var(--red-core);
}

/* SB brand needs flex for close button */
.sb-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Burger animation */
.burger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  transition: all 0.25s;
}

.top-bar-burger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Top bar always hidden on desktop */
.top-bar {
  display: none;
}

/* ── DESKTOP (>768px) ── */
@media (min-width: 769px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--bg-panel);
    border-right: 1px solid var(--border-subtle);
    z-index: var(--z-sidebar);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: none;
    /* Always visible on desktop */
  }

  .main-content {
    margin-left: var(--sidebar-w);
  }

  #sidebarOverlay {
    display: none !important;
    /* Never show on desktop */
  }

  .sb-close-btn {
    display: none !important;
  }

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

  .pages-wrapper {
    padding: 24px 28px 40px;
    max-width: 860px;
    margin: 0 auto;
    overflow-y: auto;
    max-height: 100vh;
  }
}

/* ── MOBILE (≤768px) ── */
@media (max-width: 768px) {

  /* Sidebar — off screen by default */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 85vw;
    max-width: 300px;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-subtle);
    z-index: 300;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }

  /* Sidebar OPEN state */
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.7);
  }

  /* Show close button on mobile */
  .sb-close-btn {
    display: flex;
  }

  /* Overlay */
  #sidebarOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 250;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  #sidebarOverlay.active {
    display: block;
  }

  /* No margin on main content */
  .main-content {
    margin-left: 0;
    width: 100%;
  }

  /* Top bar visible */
  .top-bar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 10px 14px;
    background: rgba(6, 6, 10, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-subtle);
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
  }

  /* Pages wrapper */
  .pages-wrapper {
    padding: 14px 12px 80px;
    overflow-y: auto;
    height: calc(100vh - 48px);
    -webkit-overflow-scrolling: touch;
  }

  /* Page headers smaller */
  .page-title {
    font-size: 1rem;
  }

  .page-subtitle {
    font-size: 0.5625rem;
  }

  /* Grids collapse */
  .layered-grid {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }

  /* Stat boxes smaller */
  .stat-box {
    padding: 10px 8px;
  }

  .stat-box .sv {
    font-size: 1rem;
  }

  .stat-box .sl {
    font-size: 0.5rem;
  }

  /* Album 2x grid scroll */
  .a2-grid {
    min-width: 380px;
  }

  /* Countdown smaller */
  .countdown-bar {
    flex-wrap: wrap;
    padding: 10px;
    gap: 8px;
  }

  .cd-block {
    min-width: 38px;
    padding: 4px 8px;
  }

  .cd-num {
    font-size: 0.875rem;
  }

  /* Nav items — bigger touch targets */
  .nav-item {
    padding: 12px 14px;
    min-height: 44px;
  }

  .nav-item.sub-item {
    padding-left: 38px;
  }

  /* Cards */
  .glass-card,
  .archive-card,
  .mission-card {
    border-radius: var(--radius-sm);
  }

  /* Ship container */
  .ship-container {
    min-height: 360px;
    padding: 16px 12px;
  }

  /* Notification badge */
  #notifBadge {
    top: 12px;
    right: 12px;
  }

  /* Toast position */
  .toast-mini {
    top: 56px !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* Login card */
  .login-card {
    margin: 16px;
    padding: 28px 20px;
  }

  /* Modal */
  .modal-card {
    margin: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }

  /* Chat input sticky */
  #page-chat .pages-wrapper {
    padding-bottom: 20px;
  }
}

/* ── Small phones (≤400px) ── */
@media (max-width: 400px) {
  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-4 {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  .daily-tracker {
    gap: 2px;
  }

  .sm-grid {
    gap: 2px;
  }

  .sidebar {
    width: 90vw;
  }

  .pages-wrapper {
    padding: 10px 8px 80px;
  }

  .page-title {
    font-size: 0.875rem;
  }
}

/* ── Prevent body scroll when sidebar is open ── */
body.sidebar-open {
  overflow: hidden;
}

/* ═══════════════════════════════════════════
   MISSION LOCK OVERLAY
   ═══════════════════════════════════════════ */

.mission-lock-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center,
      var(--ocean-deep) 0%,
      var(--bg-abyss) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100001;
  overflow-y: auto;
  padding: 20px;
}

.lock-content {
  max-width: 600px;
  width: 100%;
  text-align: center;
}

/* ═══════════════════════════════════════════
   VINYL RECORD WITH RED GLOW (Static)
   ═══════════════════════════════════════════ */

.lock-animation {
  margin-bottom: 32px;
  position: relative;
}

.vinyl-record-lock {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  position: relative;
  border-radius: 50%;
}

/* Vinyl Base (Black) */
.vinyl-record-lock::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 35% 35%,
      #2a2a2a 0%,
      #0f0f0f 40%,
      #000 100%);
  border-radius: 50%;
  box-shadow:
    inset 0 2px 8px rgba(255, 255, 255, 0.1),
    inset 0 -2px 8px rgba(0, 0, 0, 0.5);
}

/* Vinyl Grooves */
.vinyl-grooves {
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle,
      transparent 0px,
      transparent 3px,
      rgba(255, 255, 255, 0.02) 3px,
      rgba(255, 255, 255, 0.02) 6px);
  z-index: 1;
}

/* Center Label */
.vinyl-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg,
      #d4af37 0%,
      #f4e5b0 50%,
      #c9a961 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.8),
    0 4px 12px rgba(0, 0, 0, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.label-inner {
  text-align: center;
}

.label-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.875rem;
  font-weight: 900;
  color: #000;
  letter-spacing: 2px;
  margin-bottom: 2px;
}

.label-year {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.625rem;
  color: rgba(0, 0, 0, 0.7);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.label-bts {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  font-weight: 900;
  color: #000;
  letter-spacing: 3px;
}

/* Pulsing Red Glow */
.vinyl-glow {
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle,
      rgba(255, 20, 95, 0.6) 0%,
      rgba(255, 20, 95, 0.3) 40%,
      transparent 70%);
  border-radius: 50%;
  z-index: 0;
  animation: redGlowPulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes redGlowPulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
    filter: blur(20px);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
    filter: blur(25px);
  }
}

/* Static Needle */
.vinyl-needle {
  position: absolute;
  top: -10px;
  right: 70px;
  width: 4px;
  height: 100px;
  background: linear-gradient(180deg,
      #8b7355 0%,
      #5c4a3a 100%);
  border-radius: 2px;
  transform-origin: top center;
  transform: rotate(25deg);
  z-index: 3;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.5);
}

.vinyl-needle::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: #8b7355;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.vinyl-needle::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: var(--red-core);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--red-core);
}

/* Additional floating particles */
.vinyl-record-lock::after {
  content: '';
  position: absolute;
  inset: -50px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 20, 95, 0.1) 0%, transparent 20%),
    radial-gradient(circle at 80% 40%, rgba(255, 20, 95, 0.08) 0%, transparent 25%),
    radial-gradient(circle at 50% 70%, rgba(255, 20, 95, 0.12) 0%, transparent 30%);
  border-radius: 50%;
  animation: particleFloat 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes particleFloat {

  0%,
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 0.3;
  }

  50% {
    transform: rotate(180deg) scale(1.1);
    opacity: 0.6;
  }
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .vinyl-record-lock {
    width: 180px;
    height: 180px;
  }

  .vinyl-label {
    width: 75px;
    height: 75px;
  }

  .label-text {
    font-size: 0.75rem;
  }

  .label-year {
    font-size: 0.5rem;
  }

  .label-bts {
    font-size: 0.625rem;
  }

  .vinyl-needle {
    height: 85px;
    right: 60px;
  }
}

/* Lock Message */
.lock-message {
  animation: fadeInUp 1s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lock-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--red-core);
  margin-bottom: 8px;
  letter-spacing: 3px;
  text-shadow: 0 0 20px rgba(255, 20, 95, 0.5);
}

.lock-subtitle {
  font-size: 1.125rem;
  color: var(--wave-foam);
  font-weight: 600;
  margin-bottom: 32px;
  letter-spacing: 2px;
}

/* Launch Countdown */
.countdown-to-launch {
  margin-bottom: 32px;
}

.launch-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.timer-block {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 16px 12px;
  min-width: 70px;
}

.timer-num {
  font-size: 2rem;
  font-weight: 900;
  font-family: 'Share Tech Mono', monospace;
  color: var(--red-core);
  line-height: 1;
  margin-bottom: 4px;
}

.timer-label {
  font-size: 0.625rem;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.timer-sep {
  font-size: 2rem;
  font-weight: 900;
  color: var(--text-muted);
}

/* Lock Info */
.lock-info {
  max-width: 500px;
  margin: 0 auto;
  text-align: left;
}

.info-text {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.8;
  margin-bottom: 24px;
  text-align: center;
}

.early-intel {
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--wave-foam);
  border-radius: 12px;
  margin-bottom: 20px;
}

.intel-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--wave-foam);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.intel-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.intel-list li {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.stay-ready {
  padding: 16px;
  background: rgba(255, 149, 0, 0.08);
  border: 1px solid rgba(255, 149, 0, 0.2);
  border-radius: 8px;
}

.stay-ready p {
  font-size: 0.8125rem;
  color: var(--courage-amber);
  margin: 8px 0;
  line-height: 1.6;
}

/* Mobile */
@media (max-width: 480px) {
  .lock-title {
    font-size: 1.5rem;
  }

  .vinyl-spinning {
    width: 150px;
    height: 150px;
  }

  .timer-block {
    min-width: 60px;
    padding: 12px 8px;
  }

  .timer-num {
    font-size: 1.5rem;
  }
}

/* --- Global Font Scale-Up --- */
:root {
  /* Bumping utility sizes */
  --text-xs: 0.75rem;
  /* 12px (was 10px) */
  --text-sm: 0.8125rem;
  /* 13px (was 11px) */
  --text-base: 0.875rem;
  /* 14px (was 12px) */
  --text-md: 0.9375rem;
  /* 15px (was 13px) */
  --text-lg: 1.0625rem;
  /* 17px (was 15px) */
}

/* Update standard body font */
body {
  font-size: 14px;
  /* Increase from default browser smalls */
}

/* Fix the sidebar specifically */
.nav-item {
  font-size: 14px !important;
  /* Makes menu items much more readable */
  padding: 12px 14px !important;
}

.sb-agent-name {
  font-size: 15px !important;
  /* Agent name scale up */
}

.sb-agent-meta {
  font-size: 11px !important;
  /* Meta data (ID/Team) scale up */
}

/* Make cards easier to read */
.glass-card,
.archive-card {
  font-size: 14px;
}

/* Force standard labels to be legible */
.label-tag,
.section-label {
  font-size: 11px !important;
  letter-spacing: 0.1em;
}

/* --- GLOBAL TYPOGRAPHY OVERRIDES --- */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
}

/* Titling & Branding */
h1,
h2,
h3,
h4,
.page-title,
.brand-name,
.login-title {
  font-family: var(--font-display) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* UI Elements & Buttons */
.btn-red,
.btn-outline,
.label-tag,
.section-label,
input,
select,
textarea {
  font-family: var(--font-ui) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Data, Stats, and XP */
.stat-value,
.rank-xp,
.total-value,
.cd-num,
.xp-value,
.timer-num,
.font-mono,
.sc-val {
  font-family: var(--font-mono) !important;
  letter-spacing: 1px;
}

/* Ensure the Sidebar is readable */
.nav-item {
  font-size: 14px !important;
  padding: 12px 14px !important;
}

/* Scale up smaller labels */
.label-tag,
.section-label {
  font-size: 11px !important;
  opacity: 0.8;
}

/* =============================================
   GUIDE BOX & PAGE HEADERS — Responsive
   ============================================= */

/* ── Page Title ── */
.page-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: #fff;
  margin-bottom: 4px;
}

.page-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

/* ── Section Labels ── */
.section-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 24px 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* ── Guide Box (Mission Directive) ── */
.guide-box {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--red-core);
  margin-bottom: 20px;
  align-items: flex-start;
  backdrop-filter: blur(6px);
  transition: border-color 0.3s ease;
}

/* Guide Box Icon */
.guide-box div:first-child {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.1));
}

/* Guide Box Title */
.guide-box div div:first-child {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
  line-height: 1.3;
}

/* Guide Box Description */
.guide-box div div:last-child {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-secondary);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.2px;
}

/* =============================================
   DESKTOP / TABLET (769px+)
   ============================================= */
@media (min-width: 769px) {

  .page-title {
    font-size: 1.75rem;
    letter-spacing: 4px;
    margin-bottom: 6px;
  }

  .page-subtitle {
    font-size: 0.85rem;
    margin-bottom: 28px;
  }

  .section-label {
    font-size: 0.875rem;
    letter-spacing: 2px;
    margin: 32px 0 16px 0;
    padding-bottom: 8px;
  }

  .guide-box {
    gap: 18px;
    padding: 20px 24px;
    margin-bottom: 28px;
    border-left-width: 4px;
    align-items: center;
  }

  .guide-box div:first-child {
    font-size: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.15));
  }

  .guide-box div div:first-child {
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 6px;
  }

  .guide-box div div:last-child {
    font-size: 0.875rem;
    line-height: 1.65;
  }
}

/* =============================================
   SMALL MOBILE (max 400px)
   ============================================= */
@media (max-width: 400px) {

  .page-title {
    font-size: 1.05rem;
    letter-spacing: 2px;
  }

  .page-subtitle {
    font-size: 0.6875rem;
    margin-bottom: 16px;
  }

  .section-label {
    font-size: 0.6875rem;
    margin: 20px 0 10px 0;
  }

  .guide-box {
    gap: 10px;
    padding: 12px 12px;
    margin-bottom: 16px;
    flex-direction: row;
  }

  .guide-box div:first-child {
    font-size: 1.25rem;
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .guide-box div div:first-child {
    font-size: 0.6875rem;
    letter-spacing: 1px;
    margin-bottom: 3px;
  }

  .guide-box div div:last-child {
    font-size: 0.6875rem;
    line-height: 1.5;
  }
}

/* =============================================
   COMPACT MISSION BRIEFING STRIP
   ============================================= */
.mission-briefing-strip {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  backdrop-filter: blur(10px);
}

.briefing-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.briefing-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  flex-shrink: 0;
}

.briefing-meta {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.briefing-divider {
  opacity: 0.3;
  margin: 0 3px;
}

.briefing-text {
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-secondary);
  font-weight: 500;
}

@media (min-width: 769px) {
  .mission-briefing-strip {
    padding: 14px 18px;
    margin-bottom: 20px;
  }

  .briefing-text {
    font-size: 12.5px;
  }

  .briefing-meta {
    font-size: 10px;
  }

  .briefing-icon {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }
}

/* =============================================
   MISSION PAGE HEADERS — Unified Design
   ============================================= */

/* ── Base Page Header ── */
.page-title {
  font-family: var(--font-display);
  font-size: 1rem !important;
  font-weight: 800;
  color: #fff;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  line-height: 1.2;
}

.page-subtitle {
  font-size: 11px !important;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.3px;
  margin-top: 0px;
  opacity: 0.6;
}

/* ── Mission Header (combines old page-header + guide-box + narrative) ── */
.mission-header {
  --mission-accent: var(--red-core);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--mission-accent);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}

/* Subtle accent glow */
.mission-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 100%;
  background: linear-gradient(90deg, var(--mission-accent), transparent);
  opacity: 0.04;
  pointer-events: none;
}

/* Top row: Icon + Title */
.mission-header-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mission-header-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  flex-shrink: 0;
}

.mission-header-text {
  flex: 1;
  min-width: 0;
}

/* Member Tag (replaces narrative card) */
.mission-header-member {
  display: none !important;
}

.member-tag {
  --tag-color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 0.5625rem;
  font-weight: 800;
  color: var(--tag-color);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
}

/* ── Section Labels ── */
.section-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 24px 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* =============================================
   DESKTOP (769px+)
   ============================================= */
@media (min-width: 769px) {

  .page-title {
    font-size: 1.5rem;
    letter-spacing: 4px;
  }

  .page-subtitle {
    font-size: 0.8rem;
    margin-top: 4px;
  }

  .mission-header {
    padding: 20px 24px;
    margin-bottom: 28px;
    border-left-width: 4px;
  }

  .mission-header-top {
    gap: 16px;
  }

  .mission-header-icon {
    width: 48px;
    height: 48px;
    font-size: 1.6rem;
    border-radius: 12px;
  }

  .member-tag {
    font-size: 0.625rem;
    padding: 5px 14px;
    letter-spacing: 2px;
  }

  .section-label {
    font-size: 0.875rem;
    letter-spacing: 2px;
    margin: 32px 0 16px 0;
  }
}

/* =============================================
   SMALL MOBILE (max 400px)
   ============================================= */
@media (max-width: 400px) {

  .page-title {
    font-size: 1rem;
    letter-spacing: 2px;
  }

  .page-subtitle {
    font-size: 0.625rem;
  }

  .mission-header {
    padding: 12px 14px;
    margin-bottom: 16px;
  }

  .mission-header-top {
    gap: 10px;
  }

  .mission-header-icon {
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
    border-radius: 8px;
  }

  .member-tag {
    font-size: 0.5rem;
    padding: 3px 8px;
  }

  .section-label {
    font-size: 0.6875rem;
    margin: 20px 0 10px 0;
  }
}

/* =============================================
   NARRATIVE / LORE BOX (Premium UI)
   ============================================= */
.narrative-box {
  position: relative;
  background: rgba(10, 10, 15, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--n-color);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  backdrop-filter: blur(12px);
}

/* Glowing accent line on the left */
.narrative-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--n-color);
  box-shadow: 0 0 20px var(--n-color);
}

/* Header: Avatar + Name */
.narrative-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.narrative-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--n-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.narrative-title {
  display: flex;
  flex-direction: column;
}

.narrative-name {
  font-family: var(--font-display);
  font-size: 15px; /* Slightly larger since it's not all caps */
  font-weight: 800;
  color: var(--n-color);
  text-transform: none; /* <--- FIXES THE NAME */
  letter-spacing: 0.5px;
}

.narrative-role {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* The Member's Quote */
.narrative-quote {
  font-size: 13.5px;
  line-height: 1.6;
  color: #f1f1f1;
  font-style: italic;
  margin-bottom: 18px;
  padding-left: 14px;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
}

/* The Actionable Instruction Box */
.narrative-directive {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.narrative-directive-icon {
  font-size: 16px;
  opacity: 0.8;
}

.narrative-directive-text {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  font-weight: 500;
}

/* =============================================
   MOBILE SCALING FOR NARRATIVE BOX
   ============================================= */
@media (max-width: 480px) {
  .narrative-box {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
  }

  .narrative-header {
    margin-bottom: 10px;
    gap: 10px;
  }

  .narrative-avatar {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .narrative-name {
    font-size: 12px;
    letter-spacing: 1px;
  }

  .narrative-role {
    font-size: 8px;
  }

  .narrative-directive {
    padding: 10px 12px;
    gap: 10px;
  }

  .narrative-directive-icon {
    font-size: 16px;
  }

  .narrative-directive-text {
    font-size: 11.5px;
  }
}

/* Sidebar PFP Container */
.sb-agent-pfp {
  width: 42px;
  /* Fixed small size */
  height: 42px;
  position: relative;
  flex-shrink: 0;
  border-radius: 50%;
  /* Force circle */
  border: 2px solid var(--team-color, var(--red-border));
  /* Dynamics from JS */
  background: var(--bg-deep);
  overflow: visible;
  /* To allow the online dot to show outside */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The actual image inside the PFP container */
.sb-agent-pfp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Prevents stretching */
  border-radius: 50%;
  /* Force circle */
}

/* Ensure emoji fallbacks are centered and small */
.sb-agent-pfp span {
  font-size: 20px;
}

/* The Parent Toggle Hint */
.nav-group-toggle {
  position: relative;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.nav-group-toggle .nav-chevron {
  display: inline-block;
  margin-left: auto;
  font-size: 10px;
  transition: transform 0.3s ease;
  opacity: 0.5;
}

/* When the menu is open, rotate the arrow */
.nav-group-toggle.open .nav-chevron {
  transform: rotate(90deg);
  opacity: 1;
}

/* Sub-items visual connection */
.nav-group-body {
  position: relative;
  margin-left: 22px;
  /* Indent the whole group */
  border-left: 1px solid var(--border-light);
  /* The "Guide Line" hint */
  padding-left: 4px;
}

.nav-item.sub-item {
  padding-left: 12px !important;
  /* Reset from the old 42px */
  height: 36px;
  font-size: 13px !important;
  opacity: 0.8;
}

.nav-item.sub-item:hover {
  opacity: 1;
  background: transparent !important;
  color: var(--red-core);
}

/* Battlefield List Container */
.battlefield-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

/* Individual Battle Row */
.battle-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
}

/* Accent line based on team color */
.battle-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--team-color, var(--red-core));
  box-shadow: 0 0 10px var(--team-color);
}

.battle-rank {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 900;
  color: var(--text-muted);
  width: 25px;
  flex-shrink: 0;
}

.battle-rank.top-1 {
  color: var(--gold-core);
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

.battle-pfp {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--team-color);
  margin: 0 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: #000;
}

.battle-pfp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.battle-info {
  flex: 1;
  min-width: 0;
}

.battle-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.battle-xp-wrapper {
  text-align: right;
}

.battle-xp {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 900;
  color: var(--red-core);
}

.battle-label {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: -2px;
}

/* Container for the battle list */
.battlefield-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Left accent border */
.battle-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 4px;
  background: var(--team-color);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 10px var(--team-color);
}

.battle-rank-big {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 900;
  color: var(--text-muted);
  width: 30px;
  text-align: center;
}

.battle-pfp-mid {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--team-color);
  overflow: hidden;
  margin: 0 12px;
  background: #000;
}

.battle-pfp-mid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.battle-main-info {
  flex: 1;
  min-width: 0;
}

.team-title-row {
  display: flex;
  flex-direction: column;
}

.team-name-text {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--team-color);
  letter-spacing: 0.5px;
}

.agent-count {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Mission Icons Area */
.mission-status-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.ms-pill {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
}

.ms-icon {
  opacity: 0.7;
  font-size: 11px;
}

.ms-check {
  font-weight: 900;
  font-size: 10px;
}

.ms-check.pass {
  color: var(--green);
}

.ms-check.fail {
  color: var(--fail);
}

.xp-display {
  text-align: right;
  margin-left: 10px;
}

.xp-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 900;
  color: #fff;
}

.xp-lbl {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Container for the comparison bars */
.comparison-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px 0;
}

.comp-row {
  position: relative;
}

/* Team Info Row */
.comp-team-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 8px;
  padding: 0 4px;
}

.comp-name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.comp-xp-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 900;
}

/* The Bar Styling */
.comp-bar-bg {
  height: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.comp-bar-fill {
  height: 100%;
  border-radius: 20px;
  position: relative;
  transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Shimmer effect on the bar */
.comp-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 3s infinite;
}

/* Rank Circle */
.comp-rank-badge {
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: var(--bg-lifted);
  border: 2px solid var(--team-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  z-index: 5;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Mission Dots Row */
.comp-mission-row {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  margin-left: 18px;
}

.comp-dot {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
}

.comp-dot.passed {
  color: var(--green);
}

.comp-dot.failed {
  color: rgba(255, 255, 255, 0.15);
}

/* Container for the ranking list */
#rankList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}

/* Elite Agent Card */
.rank-card {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: rgba(14, 14, 20, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
}

/* Team Color Accent (Vertical Bar) */
.rank-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--team-color);
  box-shadow: 0 0 10px var(--team-color);
}

/* Rank Badge */
.rank-badge {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 900;
  border-radius: 50%;
  background: var(--bg-lifted);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Top 3 Stylings */
.rank-card.top-0 {
  border-color: rgba(212, 175, 55, 0.3);
  background: rgba(212, 175, 55, 0.05);
}

.rank-card.top-0 .rank-badge {
  color: #d4af37;
  border-color: #d4af37;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

/* Compact Oval PFP */
.rank-pfp-oval {
  width: 50px;
  height: 35px;
  border-radius: 50%;
  /* Oval scifi shape */
  overflow: hidden;
  border: 1px solid var(--team-color);
  margin: 0 15px;
  flex-shrink: 0;
  background: #000;
}

.rank-pfp-oval img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rank-info {
  flex: 1;
  min-width: 0;
}

.rank-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rank-team-tag {
  font-size: 9px;
  font-weight: 700;
  color: var(--team-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

/* XP Display on the Right */
.rank-xp-box {
  text-align: right;
  padding-left: 10px;
}

.rank-xp-val {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 900;
  color: var(--red-core);
  text-shadow: 0 0 8px var(--red-glow);
}

.rank-xp-label {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: -2px;
}

/* Highlight "YOU" */
.rank-card.is-me {
  background: rgba(255, 20, 95, 0.05);
  border: 1px solid rgba(255, 20, 95, 0.2);
}

/* ── AGENCY BROADCAST TICKER ── */
.agency-ticker-wrap {
  width: 100%;
  overflow: hidden;
  background: rgba(255, 20, 95, 0.05);
  border: 1px solid var(--red-border);
  border-radius: 8px;
  padding: 8px 0;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.ticker-label {
  background: var(--red-core);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  padding: 2px 10px;
  margin: 0 15px;
  border-radius: 4px;
  text-transform: uppercase;
  z-index: 2;
  flex-shrink: 0;
}

.ticker-content {
  display: flex;
  white-space: nowrap;
  animation: tickerMove 30s linear infinite;
}

@keyframes tickerMove {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 50px;
  font-size: 11px;
  color: var(--text-secondary);
}

/* ── HERO STAT BLOCKS ── */
.hero-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  /* Center scrobbles is wider */
  gap: 12px;
  margin-bottom: 20px;
}

.hero-stat-card {
  background: rgba(14, 14, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 15px 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.hero-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-gradient);
}

.h-stat-val {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.h-stat-lbl {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 6px;
}

/* Specific colors for stats */
.hero-stat-card.xp {
  --accent-gradient: linear-gradient(90deg, transparent, var(--red-core), transparent);
}

.hero-stat-card.streams {
  --accent-gradient: linear-gradient(90deg, transparent, var(--wave-foam), transparent);
}

.hero-stat-card.rank {
  --accent-gradient: linear-gradient(90deg, transparent, var(--gold-core), transparent);
}

.h-stat-val.red {
  color: var(--red-core);
  text-shadow: 0 0 10px var(--red-glow);
}

.h-stat-val.blue {
  color: var(--wave-foam);
}

.h-stat-val.gold {
  color: var(--gold-core);
}

/* ── MINI STREAK BAR (Top of Hero) ── */
.streak-mini-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: linear-gradient(90deg, rgba(255, 149, 0, 0.1), transparent);
  border-left: 3px solid var(--courage-amber);
  border-radius: 8px;
  margin-bottom: 15px;
}

:root {
  --font-display: 'Orbitron', sans-serif;
  --font-ui: 'Rajdhani', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --font-body: 'Inter', sans-serif;
}

/* ── GLOBAL TYPOGRAPHY ── */
body {
  font-family: var(--font-body);
  letter-spacing: 0.2px;
}

/* Headlines (Like "Mission Control", "Rankings") */
h1,
h2,
h3,
.page-title,
.login-title,
.sb-brand-title {
  font-family: var(--font-display) !important;
  text-transform: uppercase;
  letter-spacing: 4px !important;
  /* This is the key "Old App" look */
  font-weight: 900;
}

/* UI Elements (Sidebar items, Buttons, Section Labels) */
/* Modified catch-all */
.btn-red,
.btn-outline,
.label-tag,
.section-label,
input,
select,
textarea {
  font-family: var(--font-ui) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Data & Numbers (XP, Scrobbles, Rank Numbers) */
.stat-value,
.xp-val,
.h-stat-val,
.rank-xp-val,
.timer-num,
.battle-rank-big,
.ticker-item {
  font-family: var(--font-mono) !important;
  letter-spacing: 1px;
}

/* ── SPECIFIC COMPONENT FIXES ── */

/* Sidebar Navigation */
.nav-item {
  font-size: 13px !important;
  color: var(--text-secondary);
}

.nav-item.active {
  color: var(--red-core) !important;
  text-shadow: 0 0 10px var(--red-glow);
}

/* Stat Cards (Home Page) */
.hero-stat-card .h-stat-val {
  font-size: 28px;
  letter-spacing: -1px;
}

.hero-stat-card .h-stat-lbl {
  font-weight: 700;
  font-family: var(--font-ui);
  color: var(--text-muted);
}

/* Battle Cards */
.team-name-text {
  font-family: var(--font-display);
  letter-spacing: 1px !important;
}

.agent-count {
  font-family: var(--font-ui);
  letter-spacing: 1px;
}

/* Ticker Speed & Style */
.ticker-item {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 10px;
  opacity: 0.8;
}

/* ── TYPOGRAPHY FIX ── */
h1,
h2,
h3,
.page-title,
.sb-brand-title,
.login-title {
  font-family: var(--font-display) !important;
  text-transform: none !important;
  /* Stop forced all-caps */
  letter-spacing: 1px !important;
  /* Tighten up the weird gaps */
  font-weight: 800;
}

/* Only small labels get the all-caps scifi look */
.label-tag,
.section-label,
.ticker-label,
.stat-label,
.h-stat-lbl {
  font-family: var(--font-ui) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
}

/* ── GLOBAL PFP COMPACTNESS (No more big circles) ── */
img {
  max-width: 100%;
  object-fit: cover;
}

/* Force all list-view PFPs to stay small */
.battle-pfp-mid,
.rank-pfp-oval,
.op-pfp-small,
.team-logo-small {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  /* Keep them as small circles */
  border: 2px solid var(--team-color, var(--red-border));
  flex-shrink: 0;
  overflow: hidden;
}

/* ── TEAM OBJECTIVE BARS ── */
.obj-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 25px;
}

.obj-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 12px;
}

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

.obj-item {
  margin-bottom: 10px;
}

.obj-item:last-child {
  margin-bottom: 0;
}

.obj-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  margin-bottom: 4px;
}

.obj-name {
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.obj-val {
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.obj-bar-bg {
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

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

@media (max-width: 600px) {
  .obj-container {
    grid-template-columns: 1fr;
  }
}

/* ── RANKING NAME CLEANUP ── */
.rank-name {
  font-family: var(--font-body) !important;
  /* Use Inter for names - much easier to read */
  text-transform: none !important;
  /* Stop forcing all-caps */
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0px !important;
  /* Remove scifi spacing for names */
}

/* Ensure the Dossier names on Home page and Operatives also follow this */
.rank-name,
.team-name-text,
.sb-agent-name {
  text-transform: none !important;
  letter-spacing: 0.5px !important;
}

/* Keep only Section Labels and Buttons as technical All-Caps */
.label-tag,
.section-label,
.ticker-label,
.btn-red,
.btn-outline {
  text-transform: uppercase !important;
}

/* ── ELITE SPY DOSSIER CARD (CENTERED HUD) ── */
.profile-agent-card {
  position: relative;
  background: rgba(14, 14, 20, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 4px solid var(--team-color, var(--wave-foam));

  /* Center Everything */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 40px 20px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

/* Adjust the PFP Spacing */
.profile-pfp-large {
  margin: 0 auto 16px auto;
  z-index: 2;
}

/* The Text Wrapper */
.profile-info-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

/* Center the Tags (Team / Rank) */
.agent-tags-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

/* Agent Name "Glass Decryption" Display (BULLETPROOF) */
.profile-agent-card .name-display {
  /* 1. Use the narrower tech font */
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;

  /* 2. Keep the spy theme by forcing all-caps */
  text-transform: uppercase;

  /* 3. Tighten spacing to fit long names */
  letter-spacing: 1.5px;

  /* 4. Fluid sizing: scales between 1.2rem (mobile) and 1.8rem (desktop) */
  font-size: clamp(1.2rem, 4vw, 1.8rem);

  /* 5. Tighten the glow so it's readable */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);

  /* 6. LONG NAME SAFETY NETS (CRUCIAL) */
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.2;
  text-align: center;
}

/* Top Left Targeting Bracket */
.profile-agent-card::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 30px;
  height: 30px;
  border-top: 2px solid var(--team-color);
  border-left: 2px solid var(--team-color);
  border-radius: 0;
  pointer-events: none;
  z-index: 10;
}

/* Bottom Right Targeting Bracket */
.profile-agent-card::after {
  content: "";
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  border-bottom: 2px solid var(--team-color);
  border-right: 2px solid var(--team-color);
  border-radius: 0;
  pointer-events: none;
  z-index: 10;
}

/* Radar Graphic (Centered Background) */
.profile-agent-card .radar-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

/* Spinning Scan Line */
.profile-agent-card .radar-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--team-color) 0%, transparent 30%);
  animation: radar-spin 4s linear infinite;
}

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

  to {
    transform: rotate(360deg);
  }
}

/* Page Title Styling (Digital Tab) */
#page-profile h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 5px;
  color: #fff;
  border-left: 5px solid var(--red-core);
  padding-left: 15px;
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: 700;
}

#page-profile .page-subtitle {
  font-family: 'Share Tech Mono', monospace;
  color: var(--text-muted);
  font-size: 10px;
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ── HOLOGRAPHIC CIRCULAR BADGES (FIXED COLORS) ── */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
  gap: 20px;
  padding: 10px;
}

.holo-badge-container {
  text-align: center;
  perspective: 1000px;
}

.holo-circle {
  width: 75px;
  height: 75px;
  margin: 0 auto 8px;
  border-radius: 50%;
  position: relative;
  padding: 3px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  /* Important: clips the spinning background */
  /* Removed the hue-rotate animation from here so it doesn't affect the image */
}

/* We put the rainbow gradient on a layer BEHIND the image and spin it */
.holo-circle::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000);
  animation: spinHoloBorder 4s linear infinite;
  z-index: 0;
}

/* The actual photo inside the badge */
.holo-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #000;
  overflow: hidden;
  position: relative;
  z-index: 2;
  /* Keeps image above the spinning rainbow border */
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.holo-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.1) brightness(1.05);
  /* Safe filters, won't mess up colors */
}

/* Glass shine overlay on badge */
.holo-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0) 50%,
      rgba(255, 255, 255, 0.1) 100%);
  z-index: 3;
  pointer-events: none;
}

.badge-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* New animation that physically spins the border instead of shifting the hue */
@keyframes spinHoloBorder {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ── UNIVERSAL COMPACT LIST FIX ── */

/* Force all list images (Battle & Operatives) to stay small */
.op-pfp,
.battle-pfp-mid,
.rank-pfp-oval,
.agent-list-img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid var(--team-color, var(--red-border)) !important;
  object-fit: cover !important;
  flex-shrink: 0;
}

/* Compact Row for Operative Database */
.op-row {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 6px;
}

/* Compact Card for Squad Standings (ELITE DASHBOARD) */
.battle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--team-color, #444);
  border-radius: 12px;
  margin-bottom: 8px;
  transition: transform 0.2s, background 0.2s;
}

.battle-card:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateX(4px);
}

/* Highlight the user's team */
.battle-card.is-me {
  background: rgba(255, 20, 95, 0.05);
  border: 1px solid rgba(255, 20, 95, 0.3);
  border-left: 4px solid var(--red-core);
  box-shadow: 0 0 20px rgba(255, 20, 95, 0.1);
}

/* Mission Status Strip */
.mission-status-strip {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* Tech Pills for Mission Icons */
.ms-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-family: var(--font-mono);
}

.ms-check.pass {
  color: var(--green);
  text-shadow: 0 0 5px var(--green);
}

.ms-check.fail {
  color: var(--fail);
  opacity: 0.5;
}

/* \u2500\u2500 WELCOME BANNER (ELITE HQ HEADER) \u2500\u2500 */
.welcome-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: 24px 30px;
  background: linear-gradient(135deg, rgba(20, 20, 30, 0.8), rgba(10, 10, 15, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid var(--red-core);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.welcome-text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.welcome-text-group p {
  margin-bottom: 4px;
}

.welcome-text-group p:first-child {
  font-family: 'Share Tech Mono', monospace;
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.welcome-text-group h2 {
  font-family: var(--font-ui);
  font-size: 22px;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  margin: 0 0 8px 0;
}

.welcome-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 4px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: var(--wave-foam);
  letter-spacing: 1px;
}



/* \u2500\u2500 TARGET / PROGRESS TRACKING (SCI-FI NEON) \u2500\u2500 */
.target-item {
  margin-bottom: 16px;
}

.target-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.target-meta .label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--font-mono);
}

.target-meta .count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.target-bar-bg {
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.target-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00b09b, #96c93d);
  box-shadow: 0 0 10px rgba(150, 201, 61, 0.4);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Clean text for names */
.op-name,
.team-name-text {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0px !important;
  margin-left: 12px;
}

.ab-tooltip__desc {
  color: #bdbdbd;
  font-size: 10px;
  /* Slightly larger for readability */
  line-height: 1.5;
  margin-top: 6px;
}

/* ── MICRO TAGS (Profile Page) ── */
.micro-tag {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

/* ── BIOMETRIC PFP SCANNER (Premium High-Tech) ── */
.profile-pfp-large {
  position: relative;
  width: 110px;
  height: 110px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  padding: 5px;
}

.profile-pfp-large img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  filter: contrast(1.1);
}

/* Active Scanner Ring (Spinning) */
.profile-pfp-large::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top: 2px solid var(--team-color);
  animation: premium-spin 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.profile-pfp-large .online-dot {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
  background: var(--green);
  border: 3px solid #0E0E14;
  border-radius: 50%;
  box-shadow: 0 0 6px var(--green);
  z-index: 10;
}

/* ── PROFILE PAGE SECTIONS ── */
/* ── GLOBAL OVERLAY FIX ── */
#loading {
  position: fixed;
  inset: 0;
  z-index: 999999;
  /* Highest priority */
  background: #050508;
  /* Solid background - NO transparency */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s;
}

/* ── SUB-PAGE SPINNER FIX (Prevents Overlap) ── */
.page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 300px;
  /* Gives the spinner its own dedicated space */
  position: relative;
  z-index: 1;
}

/* ── REMOVE YELLOW "BUG" LINES ── */
.stat-box {
  border-top: none !important;
  /* Removes the lines */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 10px;
  border-radius: 8px;
}

/* ── MOBILE BATTLEFIELD FIX ── */
@media (max-width: 768px) {

  /* Tighten the card padding */
  .battle-card {
    padding: 12px 14px;
    flex-wrap: nowrap;
    gap: 8px;
  }

  /* Shrink the rank number */
  .battle-rank-big {
    font-size: 16px !important;
    width: 20px;
  }

  /* Shrink the team logo */
  .battle-pfp-mid {
    width: 36px !important;
    height: 36px !important;
    margin: 0 8px !important;
  }

  /* Team name smaller */
  .team-name-text {
    font-size: 13px !important;
  }

  /* Agent count smaller */
  .agent-count {
    font-size: 8px !important;
  }

  /* THE KEY FIX: Make pills smaller and stop them wrapping */
  .mission-status-strip {
    display: flex;
    flex-wrap: nowrap !important;
    /* Force single line */
    gap: 4px !important;
    margin-top: 6px;
    overflow-x: auto;
    /* Scroll horizontally if needed */
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
    -ms-overflow-style: none;
    /* Hide scrollbar IE */
  }

  /* Hide scrollbar Chrome */
  .mission-status-strip::-webkit-scrollbar {
    display: none;
  }

  /* Shrink each pill */
  .ms-pill {
    padding: 3px 5px !important;
    gap: 2px !important;
    font-size: 9px !important;
    flex-shrink: 0;
    /* Prevent pills from squishing */
    border-radius: 4px !important;
  }

  .ms-icon {
    font-size: 9px !important;
  }

  .ms-check {
    font-size: 9px !important;
  }

  /* XP display */
  .xp-val {
    font-size: 14px !important;
  }

  .xp-lbl {
    font-size: 7px !important;
  }
}

/* --- TACTICAL / COOL BADGE STYLE --- */
.tactical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.tactical-card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tactical-card {
  width: 90px;
  height: 110px;
  background: #0a0a0c;
  border: none;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Layered crimson glow — this is what makes it feel alive */
  box-shadow:
    0 0 0 1.5px rgba(220, 30, 50, 0.8),     /* sharp crisp red edge */
    0 0 0 3px   rgba(220, 30, 50, 0.15),    /* soft second ring */
    0 0 18px    rgba(220, 30, 50, 0.25),    /* inner bloom */
    0 0 45px    rgba(220, 30, 50, 0.08),    /* wide ambient */
    0 12px 35px rgba(0, 0, 0, 0.7);         /* depth */

  animation: arirangPulse 2.5s ease-in-out infinite;
}

/* Breathing pulse — like a live broadcast signal */
@keyframes arirangPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1.5px rgba(220, 30, 50, 0.7),
      0 0 0 3px   rgba(220, 30, 50, 0.1),
      0 0 15px    rgba(220, 30, 50, 0.2),
      0 0 40px    rgba(220, 30, 50, 0.06),
      0 12px 35px rgba(0, 0, 0, 0.7);
  }
  50% {
    box-shadow:
      0 0 0 1.5px rgba(232, 58, 93, 1),
      0 0 0 4px   rgba(232, 58, 93, 0.2),
      0 0 25px    rgba(232, 58, 93, 0.35),
      0 0 60px    rgba(232, 58, 93, 0.12),
      0 12px 35px rgba(0, 0, 0, 0.7);
  }
}

/* TOP EDGE — Arirang broadcast bar */
.tactical-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  background: linear-gradient(90deg,
    transparent      0%,
    rgba(220,30,50,0.6)  10%,
    rgba(232,58,93,1)    30%,
    #ff6b8a          50%,   /* hot white-red peak */
    rgba(232,58,93,1)    70%,
    rgba(220,30,50,0.6)  90%,
    transparent      100%
  );
  z-index: 10;
  animation: topBarLive 2.5s ease-in-out infinite;
}

@keyframes topBarLive {
  0%, 100% { opacity: 0.7; filter: blur(0px); }
  50%       { opacity: 1;   filter: blur(0.5px);
              box-shadow: 0 0 12px rgba(232,58,93,0.9); }
}

/* BOTTOM EDGE — dimmer echo */
.tactical-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent,
    rgba(232,58,93,0.3) 30%,
    rgba(232,58,93,0.5) 50%,
    rgba(232,58,93,0.3) 70%,
    transparent
  );
  z-index: 10;
}

/* Tactical corners — RED not gold */
.tactical-card-container .tactical-card .corner-tl,
.tactical-card-container .tactical-card .corner-br {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1.5px solid #e83a5d;
  z-index: 15;
  transition: all 0.3s ease;
  box-shadow: 0 0 6px rgba(232,58,93,0.4);
}

.tactical-card-container .tactical-card .corner-tl {
  top: 5px; left: 5px;
  border-right: none; border-bottom: none;
}

.tactical-card-container .tactical-card .corner-br {
  bottom: 5px; right: 5px;
  border-left: none; border-top: none;
}

/* Inner — subtle red grid instead of white */
.tactical-inner {
  width: 100%;
  height: 100%;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(rgba(232,58,93,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,58,93,0.03) 1px, transparent 1px);
  background-size: 10px 10px;
  position: relative;
  z-index: 2;
}

/* Red shimmer overlay on image */
.tactical-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(232,58,93,0) 0%,
    rgba(232,58,93,0.05) 35%,
    rgba(255,100,130,0.10) 50%,
    rgba(232,58,93,0.05) 65%,
    rgba(232,58,93,0) 100%
  );
  animation: redShimmer 5s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 3;
}

@keyframes redShimmer {
  0%   { transform: translateX(-25px); opacity: 0.2; }
  100% { transform: translateX(25px);  opacity: 0.7; }
}

.tactical-inner img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(0,0,0,1));
  z-index: 2;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Scan line — red, not white */
.tactical-shine {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(90deg,
    transparent,
    rgba(232,58,93,0.6),
    rgba(255,120,150,0.4),
    rgba(232,58,93,0.6),
    transparent
  );
  filter: blur(6px);
  opacity: 0.5;
  z-index: 8;
  animation: arirangScan 3s infinite ease-in-out;
}

@keyframes arirangScan {
  0%   { top: -10%; }
  30%  { top: 110%; }
  100% { top: 110%; }
}

/* Hover */
.tactical-card-container:hover .tactical-card {
  transform: translateY(-5px);
  box-shadow:
    0 0 0 1.5px rgba(232, 58, 93, 1),
    0 0 0 4px   rgba(232, 58, 93, 0.25),
    0 0 30px    rgba(232, 58, 93, 0.4),
    0 0 70px    rgba(232, 58, 93, 0.15),
    0 15px 45px rgba(0, 0, 0, 0.9);
}

.tactical-card-container:hover img {
  transform: scale(1.15);
  filter: drop-shadow(0 0 15px rgba(232,58,93,0.5));
}

.tactical-card-container:hover .tactical-card .corner-tl,
.tactical-card-container:hover .tactical-card .corner-br {
  width: 14px;
  height: 14px;
  border-width: 2px;
  box-shadow: 0 0 12px rgba(232,58,93,0.8);
}

/* Label */
.tactical-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  color: rgba(232, 58, 93, 0.4);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
/* ── SECRET MISSIONS TACTICAL HUD ── */

.intel-hud-grid {
    display: grid;
    /* 2 columns on mobile, auto-fills on desktop */
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px;
    margin-bottom: 30px;
}

/* On Desktop/Tablet, use more columns */
@media (min-width: 600px) {
    .intel-hud-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

.intel-hud-card {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 12px;
    transition: all 0.3s ease;
}

.hud-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hud-pfp {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--team-color);
    margin-bottom: 8px;
    overflow: hidden;
    background: #000;
}

.hud-pfp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hud-team {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.hud-xp {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 900;
    color: #fff;
}

.hud-stats {
    font-size: 8px;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Highlight Your Team */
.intel-hud-card.is-me {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--team-color);
    box-shadow: inset 0 0 10px var(--team-color);
}

.hud-tag {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--team-color);
    color: #000;
    font-size: 6px;
    font-weight: 900;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
}
@keyframes pulseBorder {
  0% { border-color: rgba(255,59,92,0.4); box-shadow: 0 0 0px rgba(255,59,92,0); }
  50% { border-color: rgba(255,59,92,1); box-shadow: 0 0 20px rgba(255,59,92,0.3); }
  100% { border-color: rgba(255,59,92,0.4); box-shadow: 0 0 0px rgba(255,59,92,0); }
}