/* ===== /css/rajdhani-fonts.css ===== */
/* Rajdhani Self-Hosted Fonts - Optimized for Performance */
/* Latin subset, WOFF2 format, font-display: swap */

@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/rajdhani-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/rajdhani-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/rajdhani-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== /styles.css ===== */
/**
 * BLOOD CAFÉ - ULTIMATE GAMING AESTHETIC
 * Professional dark theme with cyber accents - NO ANIMATIONS
 * Built: November 16, 2025
 */

/* ========================================
   CSS VARIABLES - GAMING COLOR SYSTEM
   ======================================== */
:root {
  /* Background colors */
  --bg-primary: #0a0d14;
  --bg-secondary: #0f1419;
  --bg-card: #151b26;
  --bg-card-hover: #1a2130;
  --bg-input: #0d1117;

  /* Neon accent colors */
  --neon-blue: #00d9ff;
  --neon-cyan: #00ffff;
  --neon-purple: #a855f7;
  --neon-magenta: #ff00ff;
  --cyber-purple: #7c3aed;
  --blood-red: #ff0033;
  --electric-blue: #0080ff;

  /* UI colors */
  --text-primary: #ffffff;
  --text-secondary: #b8c5db;
  --text-muted: #76849c;
  --border: rgba(0, 217, 255, 0.15);
  --border-bright: rgba(0, 217, 255, 0.4);

  /* Status colors */
  --success: #00ff88;
  --warning: #ffaa00;
  --danger: #ff0033;
  --info: #00d9ff;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #00d9ff 100%);
  --gradient-secondary: linear-gradient(135deg, #00d9ff 0%, #0080ff 100%);
  --gradient-danger: linear-gradient(135deg, #ff0033 0%, #cc0000 100%);
  --gradient-success: linear-gradient(135deg, #00ff88 0%, #00cc66 100%);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7);
  --shadow-neon: 0 0 20px rgba(0, 217, 255, 0.3), 0 0 40px rgba(0, 217, 255, 0.1);
  --shadow-purple: 0 0 20px rgba(124, 58, 237, 0.3), 0 0 40px rgba(124, 58, 237, 0.1);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
}

/* ========================================
   RESET & BASE
   ======================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* CRITICAL: NO animations or transitions */
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

html {
  scroll-behavior: auto !important;
}

body {
  width: 100%;
  min-height: 100vh;
  background: var(--bg-primary);
  background-image:
    radial-gradient(circle at 20% 50%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 217, 255, 0.08) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: 'Rajdhani', 'Orbitron', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   TYPOGRAPHY - GAMING STYLE
   ======================================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  text-transform: uppercase;
}

h1 {
  font-size: 42px;
  letter-spacing: 2px;
  color: var(--text-primary);           /* fallback if background-clip:text is unsupported */
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(124, 58, 237, 0.5);
}

h2 {
  font-size: 32px;
  color: var(--neon-blue);
  text-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
}

h3 {
  font-size: 24px;
  color: var(--text-primary);
}

h4 {
  font-size: 20px;
  color: var(--text-secondary);
}

p {
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

/* ========================================
   LAYOUT - PROFESSIONAL SPACING
   ======================================== */
.wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--space-xl);
}

main {
  display: grid;
  gap: var(--space-xl);
}

/* ========================================
   HEADER & NAVIGATION - BADASS DESIGN
   ======================================== */
.header {
  background: rgba(15, 20, 25, 0.8);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5),
              0 0 1px rgba(0, 217, 255, 0.3);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  margin-bottom: var(--space-md);
}

.header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 4px 12px;
  min-width: 0;
}
.brand { flex-shrink: 0; }

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-primary);
}

.bloodcafe-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.bloodcafe-logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

.brand .h1 {
  color: var(--text-primary);           /* fallback if background-clip:text is unsupported */
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: inherit;
  margin: 0;
}

.badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 12px var(--success);
}

.nav {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: center;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,0.4) transparent;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-width: 0;
}
.nav::-webkit-scrollbar { height: 6px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.4); border-radius: 3px; }
.nav .btn { flex-shrink: 0; padding: 8px 14px; font-size: 13px; letter-spacing: 0.5px; }

/* ========================================
   BUTTONS - GAMING AESTHETIC
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  pointer-events: auto;
  box-shadow: var(--shadow-sm);
  /* NO animations */
  transition: none !important;
  transform: none !important;
  animation: none !important;
}

.btn::before,
.btn::after {
  display: none !important;
}

.btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-bright);
  box-shadow: var(--shadow-md), var(--shadow-neon);
  color: var(--neon-blue);
}

.btn:active {
  background: rgba(255, 255, 255, 0.05);
}

.btn-primary {
  background: var(--gradient-primary);
  border: 1px solid var(--neon-purple);
  color: white;
  box-shadow: var(--shadow-md), var(--shadow-purple);
}

.btn-primary:hover {
  box-shadow: var(--shadow-lg), var(--shadow-purple), 0 0 30px rgba(124, 58, 237, 0.4);
  border-color: var(--neon-purple);
  color: white;
}

.btn-success {
  background: var(--gradient-success);
  border: 1px solid var(--success);
  color: #000;
  font-weight: 800;
  box-shadow: var(--shadow-md), 0 0 20px rgba(0, 255, 136, 0.3);
}

.btn-success:hover {
  box-shadow: var(--shadow-lg), 0 0 30px rgba(0, 255, 136, 0.5);
  color: #000;
}

.btn-danger {
  background: var(--gradient-danger);
  border: 1px solid var(--danger);
  color: white;
  box-shadow: var(--shadow-md), 0 0 20px rgba(255, 0, 51, 0.3);
}

.btn-danger:hover {
  box-shadow: var(--shadow-lg), 0 0 30px rgba(255, 0, 51, 0.5);
  color: white;
}

.btn-logout {
  background: var(--gradient-danger);
  border: 1px solid var(--danger);
  color: white;
  font-weight: 700;
}

.btn-logout:hover {
  box-shadow: var(--shadow-lg), 0 0 30px rgba(255, 0, 51, 0.5);
  transform: translateY(-2px);
}

/* ========================================
   CARDS & PANELS - GLASSMORPHISM
   ======================================== */
.panel, .card {
  background: rgba(21, 27, 38, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  opacity: 0.6;
}

.panel:hover {
  border-color: var(--border-bright);
  box-shadow: var(--shadow-lg), var(--shadow-neon);
}

/* Section titles */
.section-title {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--neon-blue);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* ========================================
   FORMS & INPUTS - CYBER STYLE
   ======================================== */
.input, input[type="text"], input[type="number"], input[type="password"],
input[type="email"], textarea, select {
  width: 100%;
  padding: 14px 18px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  outline: none;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
  /* NO animations */
  transition: none !important;
  transform: none !important;
}

.input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

.input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--neon-blue);
  box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.2),
              inset 0 2px 8px rgba(0, 0, 0, 0.3),
              0 0 20px rgba(0, 217, 255, 0.1);
  outline: none;
}

select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300d9ff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* ========================================
   GRIDS - RESPONSIVE LAYOUT
   ======================================== */
.grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-characters {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.row {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: var(--space-lg);
}

/* ========================================
   CHARACTER CARDS - EPIC DESIGN
   ======================================== */
.char {
  background: rgba(21, 27, 38, 0.6);
  backdrop-filter: blur(10px);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

.char:hover {
  border-color: var(--neon-blue);
  color: var(--neon-blue);
  box-shadow: var(--shadow-md), var(--shadow-neon);
  background: rgba(0, 217, 255, 0.05);
}

.char.active {
  background: var(--gradient-primary);
  border-color: var(--neon-purple);
  color: white;
  box-shadow: var(--shadow-lg), var(--shadow-purple);
}

/* ========================================
   SLOT CARDS - ORGANIZED & CLEAN
   ======================================== */
.slot-card {
  background: rgba(13, 17, 23, 0.6);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.slot-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

.slot-title {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--neon-blue);
}

.badge-s {
  background: rgba(0, 217, 255, 0.15);
  color: var(--neon-blue);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(0, 217, 255, 0.3);
}

.label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
  letter-spacing: 0.5px;
}

/* ========================================
   TABS - MODERN DESIGN
   ======================================== */
.tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--border);
  padding-bottom: var(--space-sm);
}

.tab {
  padding: 12px 24px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  position: relative;
  bottom: -2px;
}

.tab:hover {
  color: var(--neon-blue);
  border-bottom-color: rgba(0, 217, 255, 0.3);
}

.tab.active {
  color: var(--neon-blue);
  border-bottom-color: var(--neon-blue);
  text-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
}

/* ========================================
   PILLS & BADGES - STATUS INDICATORS
   ======================================== */
.pill {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid rgba(124, 58, 237, 0.4);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neon-purple);
}

/* ========================================
   NOTICES & ALERTS
   ======================================== */
.notice {
  background: rgba(0, 217, 255, 0.08);
  border-left: 4px solid var(--neon-blue);
  padding: var(--space-md);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

.toast {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  background: rgba(21, 27, 38, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-bright);
  border-radius: 12px;
  padding: var(--space-md) var(--space-lg);
  box-shadow: var(--shadow-lg), var(--shadow-neon);
  color: var(--text-primary);
  font-weight: 600;
  max-width: 400px;
  z-index: 10000;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.toast.success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
  border-color: var(--success);
  color: var(--success);
}

.toast.error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
  border-color: var(--danger);
  color: var(--danger);
}

/* ========================================
   LISTS - BUILD CARDS
   ======================================== */
.list {
  display: grid;
  gap: var(--space-md);
}

.build-card {
  background: rgba(21, 27, 38, 0.6);
  backdrop-filter: blur(15px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}

.build-card:hover {
  border-color: var(--border-bright);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(0, 217, 255, 0.1);
}

.build-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
}

.build-card-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.build-card-creator {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.build-card-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* Star Rating System */
.build-card-rating {
  display: flex;
  align-items: center;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.star-rating {
  display: flex;
  gap: 4px;
}

.star-rating .star {
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  text-shadow: none;
}

.star-rating .star:hover,
.star-rating .star.filled {
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.star-rating .star:hover ~ .star {
  color: var(--text-muted);
  text-shadow: none;
}

.star-rating:hover .star {
  color: var(--text-muted);
  text-shadow: none;
}

.star-rating:hover .star:hover,
.star-rating:hover .star:hover ~ .star.filled,
.star-rating .star:hover ~ .star:hover {
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.star-rating:hover .star:hover ~ .star {
  color: var(--text-muted);
  text-shadow: none;
}

/* Hover preview for star ratings */
.star-rating:hover .star:nth-child(1):hover ~ .star,
.star-rating:hover .star:nth-child(2):hover ~ .star:not(:nth-child(-n+2)),
.star-rating:hover .star:nth-child(3):hover ~ .star:not(:nth-child(-n+3)),
.star-rating:hover .star:nth-child(4):hover ~ .star:not(:nth-child(-n+4)) {
  color: var(--text-muted);
}

.star-rating:hover .star:nth-child(1):hover,
.star-rating:hover .star:nth-child(2):hover,
.star-rating:hover .star:nth-child(2):hover ~ .star:nth-child(-n+2),
.star-rating:hover .star:nth-child(3):hover,
.star-rating:hover .star:nth-child(3):hover ~ .star:nth-child(-n+3),
.star-rating:hover .star:nth-child(4):hover,
.star-rating:hover .star:nth-child(4):hover ~ .star:nth-child(-n+4),
.star-rating:hover .star:nth-child(5):hover {
  color: #fbbf24;
}

/* Rating score display */
.rating-score {
  margin-left: var(--space-md);
  color: var(--text-muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rating-score .score-value {
  color: #fbbf24;
  font-weight: 700;
  font-size: 16px;
}

.rating-score .vote-count {
  color: var(--text-muted);
  font-size: 12px;
}

/* Tag badges */
.tag-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tag-badge.tag-pvp {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.tag-badge.tag-pve {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.tag-badge.tag-hybrid {
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
  border: 1px solid rgba(124, 58, 237, 0.4);
}

/* ========================================
   MOBILE NAVIGATION
   ======================================== */
.mobile-nav {
  display: none;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  height: auto !important;
  max-height: none !important;
  background: rgba(15, 20, 25, 0.98);
  backdrop-filter: blur(20px);
  border-top: 2px solid var(--border);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
  padding: 4px 4px env(safe-area-inset-bottom, 4px) 4px !important;
  z-index: 1000;
  overflow: hidden;
}

.mobile-nav::-webkit-scrollbar {
  display: none;
}

.mobile-nav-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-around !important;
  gap: 2px;
  padding: 0 4px;
}

.mobile-nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px;
  padding: 6px 4px !important;
  /* Was `flex: 1 1 0; min-width: 0`, which let items shrink to fit however many the
     page put in the bar. Pages carrying 13-14 items ended up with 20-23px-wide tap
     targets on a 360px phone — under the WCAG 2.2 minimum and genuinely hard to hit.
     Grow to fill when there is room, but never shrink below a usable 64px; the bar
     scrolls horizontally instead. 2026-09-03. */
  flex: 1 0 64px !important;
  min-width: 64px !important;
  max-width: 96px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  border-radius: 6px;
  transition: all 0.15s ease;
  overflow: hidden;
  border: none;
  background: none;
  cursor: pointer;
}

/* Menu button highlight */
.mobile-menu-btn {
  color: var(--neon-blue, #00d9ff) !important;
}

/* ========================================
   FULL-SCREEN MOBILE MENU OVERLAY
   ======================================== */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 14, 20, 0.98);
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mobile-menu-overlay.open {
  display: flex;
  flex-direction: column;
  opacity: 1;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.mobile-menu-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 2px;
  font-family: 'Rajdhani', sans-serif;
}

.mobile-menu-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.mobile-menu-close:active {
  background: rgba(255, 255, 255, 0.2);
}

.mobile-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 16px;
  flex: 1;
  align-content: start;
}

.mobile-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  text-decoration: none;
  color: #c9d1d9;
  transition: all 0.15s ease;
  min-height: 72px;
}

.mobile-menu-item:active {
  background: rgba(0, 217, 255, 0.15);
  border-color: rgba(0, 217, 255, 0.4);
  transform: scale(0.97);
}

.mobile-menu-item.active {
  background: rgba(0, 217, 255, 0.12);
  border-color: rgba(0, 217, 255, 0.5);
  color: #00d9ff;
}

.mobile-menu-item.logout {
  border-color: rgba(255, 107, 107, 0.3);
  color: #ff6b6b;
}

.mobile-menu-item.logout:active {
  background: rgba(255, 107, 107, 0.15);
}

.mobile-menu-icon {
  font-size: 24px;
  line-height: 1;
}

.mobile-menu-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.2;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
  color: var(--neon-blue);
  background: rgba(0, 217, 255, 0.15);
}

.mobile-nav-item .icon {
  font-size: 16px;
  line-height: 1;
}

.mobile-nav-item .label {
  white-space: nowrap;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 9px;
}

.mobile-nav-item.logout {
  color: #ff6b6b;
}

.mobile-nav-item.logout:hover,
.mobile-nav-item.logout.active {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}

/* ========================================
   RESPONSIVE - MOBILE FIRST
   ======================================== */
@media (max-width: 768px) {
  :root {
    --space-xl: 20px;
    --space-2xl: 32px;
  }

  .wrap {
    padding: var(--space-lg);
  }

  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }

  .header .wrap {
    padding: var(--space-md);
  }

  .brand {
    font-size: 22px;
  }

  .nav {
    display: none;
  }

  .mobile-nav {
    display: block !important;
  }

  body {
    padding-bottom: 72px !important;
  }

  .btn {
    padding: 10px 18px;
    font-size: 13px;
  }

  .grid-characters {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-sm);
  }

  .char {
    padding: var(--space-md) var(--space-sm);
    font-size: 11px;
  }
}

/* ========================================
   UTILITIES
   ======================================== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-sm); }
.mb-2 { margin-bottom: var(--space-md); }
.mb-3 { margin-bottom: var(--space-lg); }
.mt-1 { margin-top: var(--space-sm); }
.mt-2 { margin-top: var(--space-md); }
.mt-3 { margin-top: var(--space-lg); }

/* ========================================
   SPHERE AUTOCOMPLETE DROPDOWN
   ======================================== */
.sphere-autocomplete-container {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
}

.sphere-suggestions {
  background: rgba(13, 17, 23, 0.95);
  backdrop-filter: blur(30px) saturate(180%);
  border: 2px solid #00d9ff;
  border-radius: 12px;
  padding: 8px;
  max-height: 300px;
  overflow-y: auto;
  pointer-events: auto;

  /* Multi-layer shadows */
  box-shadow:
    0 0 1px rgba(0, 217, 255, 0.8),
    0 0 20px rgba(0, 217, 255, 0.4),
    0 0 40px rgba(0, 217, 255, 0.2),
    0 20px 60px rgba(0, 0, 0, 0.8);
}

.sphere-suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  margin-bottom: 4px;
}

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

.sphere-suggestion-item:hover {
  background: rgba(0, 217, 255, 0.2);
  border-color: rgba(0, 217, 255, 0.5);
  box-shadow:
    0 0 10px rgba(0, 217, 255, 0.3),
    0 0 20px rgba(0, 217, 255, 0.15);
}

.sphere-suggestion-color {
  width: 4px;
  height: 40px;
  border-radius: 2px;
  flex-shrink: 0;
}

.sphere-suggestion-text {
  flex: 1;
  min-width: 0;
}

.sphere-suggestion-name {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

.sphere-suggestion-category {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Rarity badges in suggestions — added 2026-05-05 */
.sphere-rarity-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.sphere-rarity-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  user-select: none;
  line-height: 1.2;
  border: 1px solid rgba(255,255,255,0.15);
}
.sphere-rarity-badge[data-rarity]:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.sphere-rarity-badge[data-rarity]:active {
  transform: translateY(0);
}

/* Custom scrollbar for suggestions */
.sphere-suggestions::-webkit-scrollbar {
  width: 8px;
}

.sphere-suggestions::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.sphere-suggestions::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #00d9ff 0%, #0080ff 100%);
  border-radius: 4px;
  border: 1px solid rgba(0, 217, 255, 0.5);
}

.sphere-suggestions::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #00ffff 0%, #00d9ff 100%);
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
}

/* ========================================
   TOOLTIP SYSTEM - HELPFUL TIPS
   ======================================== */
[data-tip] {
  position: relative;
  cursor: help;
}

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 14px;
  background: rgba(10, 15, 25, 0.98);
  border: 1px solid var(--neon-blue);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  max-width: 280px;
  white-space: normal;
  text-align: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 217, 255, 0.2);
  margin-bottom: 8px;
}

[data-tip]:hover::after {
  opacity: 1;
  visibility: visible;
}

[data-tip]::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--neon-blue);
  margin-bottom: 2px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
}

[data-tip]:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Tip position variants */
[data-tip-pos="bottom"]::after {
  bottom: auto;
  top: 100%;
  margin-top: 8px;
  margin-bottom: 0;
}

[data-tip-pos="bottom"]::before {
  bottom: auto;
  top: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--neon-blue);
  margin-top: 2px;
  margin-bottom: 0;
}

[data-tip-pos="left"]::after {
  left: auto;
  right: 100%;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 8px;
  margin-bottom: 0;
}

[data-tip-pos="left"]::before {
  left: auto;
  right: 100%;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  border-top-color: transparent;
  border-left-color: var(--neon-blue);
  margin-right: 2px;
  margin-bottom: 0;
}

[data-tip-pos="right"]::after {
  left: 100%;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  margin-bottom: 0;
}

[data-tip-pos="right"]::before {
  left: 100%;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  border-top-color: transparent;
  border-right-color: var(--neon-blue);
  margin-left: 2px;
  margin-bottom: 0;
}

/* Hide tooltips on mobile */
@media (max-width: 768px) {
  [data-tip]::after,
  [data-tip]::before {
    display: none;
  }
}

/* ========================================
   GLOBAL OVERRIDES - NO ANIMATIONS
   ======================================== */
*,
*::before,
*::after {
  animation: none !important;
  transition: none !important;
}

/* ========================================
   SCROLL PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* GPU acceleration for fixed/sticky elements */
.header,
.mobile-nav,
.toast,
#synergyPanel,
#compareFloatingBtn {
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Disable expensive backdrop-filter on scroll-heavy elements */
@media (max-width: 1024px) {
  .header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15, 20, 25, 0.98) !important;
  }

  .panel, .card, .build-card, .char {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .mobile-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15, 20, 25, 0.99) !important;
  }
}

/* Remove background-attachment: fixed on mobile (causes jank) */
@media (max-width: 1024px) {
  body {
    background-attachment: scroll !important;
  }
}

/* Simplify shadows for better scroll performance */
@media (max-width: 768px) {
  .panel, .card, .build-card, .slot-card, .char {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  }

  .panel:hover, .card:hover, .build-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  }

  .header {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
  }

  /* Disable neon glow effects on mobile */
  .char:hover, .char.active,
  .btn:hover, .btn-primary, .btn-success, .btn-danger {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  }
}

/* Reduce paint areas during scroll */
.header {
  contain: layout style;
}

.mobile-nav {
  contain: layout style;
}

/* ============================================================
   Accessibility primitives — added 2026-09-03.
   Paired with /a11y.js, which injects the skip link, the #bc-main
   landmark and the polite live region on every page.
   ============================================================ */
.bc-sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.bc-skip{
  position:absolute;left:8px;top:-60px;z-index:100000;
  padding:10px 18px;border-radius:0 0 8px 8px;
  background:#b00710;color:#fff;font-weight:700;letter-spacing:.02em;
  text-decoration:none;box-shadow:0 4px 18px rgba(0,0,0,.6);
  transition:top .16s ease-in-out;
}
.bc-skip:focus{top:0;outline:3px solid #fff;outline-offset:2px;}
/* The theme sets outline:none broadly; restore a visible focus ring for keyboard
   users only, so mouse users see no change. */
:focus-visible{outline:3px solid #ff2530!important;outline-offset:2px!important;}
#bc-main:focus{outline:none;}
@media (prefers-reduced-motion:reduce){
  .bc-skip{transition:none;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* Sphere calculator — condition multiplier panel (added 2026-09-03). */
.sc-conditions{
  margin:10px 0 18px;border:1px solid rgba(255,255,255,.10);border-radius:10px;
  background:rgba(255,255,255,.02);padding:10px 14px;
}
.sc-conditions > summary{
  cursor:pointer;font-weight:700;letter-spacing:.02em;color:var(--text-primary);
  list-style:none;padding:2px 0;
}
.sc-conditions > summary::-webkit-details-marker{display:none;}
.sc-conditions > summary::before{content:"▸ ";color:var(--blood-hi,#ff2530);}
.sc-conditions[open] > summary::before{content:"▾ ";}
.sc-cond-note{margin:8px 0 12px;font-size:13px;line-height:1.55;color:var(--text-secondary,#b9b3a8);}
.sc-cond-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;}
.sc-cond-field{display:flex;flex-direction:column;gap:3px;}
.sc-cond-label{font-size:12px;font-weight:600;color:var(--text-primary);}
.sc-cond-input{
  padding:7px 9px;border-radius:6px;border:1px solid rgba(255,255,255,.16);
  background:#0d0d10;color:var(--text-primary);font:inherit;font-variant-numeric:tabular-nums;
}
.sc-cond-input:focus-visible{outline:3px solid #ff2530;outline-offset:1px;}
.sc-cond-hint{font-size:11px;color:var(--text-muted,#898376);}

/* SEO sphere pages — formula blocks and mod-key chips (added 2026-09-03). */
.seo-formula{
  margin:12px 0;padding:12px 14px;border-radius:8px;overflow-x:auto;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.6;
  color:var(--text-primary);
}
.seo-note{
  margin:12px 0;padding:10px 14px;border-left:3px solid var(--blood-hi,#ff2530);
  background:rgba(255,37,48,.06);border-radius:0 8px 8px 0;font-size:14px;line-height:1.6;
}
.mk{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  font-family:ui-monospace,monospace;font-size:10px;color:var(--text-muted,#898376);
  vertical-align:middle;letter-spacing:0;
}

/* Squad-login call to action, shown in place of Logout for public visitors. */
.btn-squad-login{
  border-color:rgba(255,37,48,.5)!important;
  background:linear-gradient(135deg,#b00710,#7a050c)!important;
  color:#fff!important;font-weight:700;letter-spacing:.04em;
}
.btn-squad-login:hover{filter:brightness(1.12);}

/* ===== /css/enhancements.css ===== */
/* ========================================
   BLOOD CAFÉ – ENHANCED VISUAL COMPONENTS
   Gaming aesthetic with NO animations
   ======================================== */

/* ========================================
   SYNERGY PANEL - EPIC DESIGN
   ======================================== */
#synergyPanel {
  position: fixed !important;
  top: 100px !important;
  right: 32px !important;
  width: 340px !important;
  max-height: 500px !important;
  overflow-y: auto !important;

  /* Epic glassmorphism design */
  background: linear-gradient(145deg,
    rgba(21, 27, 38, 0.95) 0%,
    rgba(26, 33, 48, 0.92) 100%) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;

  /* Neon border */
  border: 2px solid rgba(0, 217, 255, 0.4) !important;
  border-radius: 20px !important;

  /* Epic shadows */
  box-shadow:
    0 0 1px rgba(0, 217, 255, 0.8),
    0 0 40px rgba(0, 217, 255, 0.4),
    0 0 80px rgba(124, 58, 237, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 20px 60px rgba(0, 0, 0, 0.7) !important;

  padding: 20px !important;
  /* Was 9998 -- a modal-tier value for what is a floating side card. At that height
     it painted over the sticky header's nav dropdowns. 1150 keeps it above all page
     content (max 1101, the synergy drawer) and below the header (1200), the mobile
     menu overlay (9999) and the PIN modal (10000). */
  z-index: 1150 !important;

  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 217, 255, 0.5) rgba(0, 0, 0, 0.3);
}

/* Collapsed state */
#synergyPanel.collapsed {
  width: 60px !important;
  height: 60px !important;
  max-height: 60px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  cursor: pointer !important;
}

#synergyPanel.collapsed > * {
  display: none !important;
}

#synergyPanel.collapsed::after {
  content: '⚡' !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 28px !important;
  color: #00d9ff !important;
}

/* Toggle button for synergy panel */
#synergyToggle {
  position: absolute !important;
  top: -12px !important;
  right: -12px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  border: 2px solid rgba(168, 85, 247, 0.5) !important;
  color: white !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.5) !important;
  z-index: 1 !important;
}

#synergyToggle:hover {
  box-shadow: 0 0 30px rgba(124, 58, 237, 0.7) !important;
}

#synergyPanel::-webkit-scrollbar {
  width: 8px;
}

#synergyPanel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

#synergyPanel::-webkit-scrollbar-thumb {
  background: rgba(0, 217, 255, 0.5);
  border-radius: 10px;
}

#synergyPanel::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 217, 255, 0.7);
}

/* Synergy header */
#synergyPanel > div:first-child:not(.synergy-empty) {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 2px solid rgba(0, 217, 255, 0.3) !important;
}

#synergyPanel > div:first-child:not(.synergy-empty) > div:first-child {
  font-size: 18px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: #00d9ff !important;
  text-shadow: 0 0 20px rgba(0, 217, 255, 0.6) !important;
}

#synergyPanel > div:first-child:not(.synergy-empty) > div:last-child {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: white !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.5) !important;
  border: 1px solid rgba(168, 85, 247, 0.5) !important;
}

/* Individual synergy cards */
.synergy-alert {
  background: linear-gradient(135deg,
    rgba(0, 217, 255, 0.12) 0%,
    rgba(124, 58, 237, 0.08) 100%) !important;
  border: 1px solid rgba(0, 217, 255, 0.3) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.synergy-alert.synergy-complete {
  background: linear-gradient(135deg,
    rgba(0, 255, 136, 0.15) 0%,
    rgba(0, 217, 255, 0.1) 100%) !important;
  border: 2px solid rgba(0, 255, 136, 0.5) !important;
  box-shadow:
    0 0 30px rgba(0, 255, 136, 0.3),
    0 4px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.synergy-alert > div:first-child {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

.synergy-alert > div:first-child > div:first-child {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.synergy-alert > div:nth-child(2) {
  font-size: 13px !important;
  color: #fbbf24 !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5) !important;
}

.synergy-alert > div:nth-child(3) {
  font-size: 12px !important;
  color: #b8c5db !important;
  font-style: italic !important;
  margin-bottom: 8px !important;
}

.synergy-alert > div:last-child {
  font-size: 11px !important;
  color: #76849c !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* No synergies state */
#synergyPanel > div > div:only-child {
  text-align: center !important;
  padding: 40px 20px !important;
}

#synergyPanel > div > div:only-child > div:first-child {
  font-size: 48px !important;
  margin-bottom: 16px !important;
  filter: grayscale(50%) !important;
}

#synergyPanel > div > div:only-child > div:nth-child(2) {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #76849c !important;
  margin-bottom: 8px !important;
}

#synergyPanel > div > div:only-child > div:last-child {
  font-size: 12px !important;
  color: #76849c !important;
  opacity: 0.7 !important;
}

/* ========================================
   STAR RATING - ENHANCED
   ======================================== */
.star-rating {
  display: inline-flex !important;
  gap: 4px !important;
}

.star {
  cursor: pointer !important;
  font-size: 20px !important;
  color: rgba(255, 255, 255, 0.15) !important;
  text-shadow: none !important;
  user-select: none !important;
}

.star.filled {
  color: #fbbf24 !important;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.6),
               0 0 20px rgba(251, 191, 36, 0.4) !important;
}

.star:hover {
  color: #fbbf24 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.5) !important;
}

/* ========================================
   TAG BADGES - GAMING STYLE
   ======================================== */
.tag-badge {
  display: inline-block !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.tag-pvp {
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.25), rgba(255, 0, 51, 0.15)) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(255, 0, 51, 0.4) !important;
  text-shadow: 0 0 10px rgba(255, 0, 51, 0.5) !important;
}

.tag-pve {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.25), rgba(0, 255, 136, 0.15)) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(0, 255, 136, 0.4) !important;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.5) !important;
}

.tag-hybrid {
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.25), rgba(255, 170, 0, 0.15)) !important;
  color: #fcd34d !important;
  border: 1px solid rgba(255, 170, 0, 0.4) !important;
  text-shadow: 0 0 10px rgba(255, 170, 0, 0.5) !important;
}

/* ========================================
   BUILD CARDS - EPIC STYLING
   ======================================== */
.build-card {
  background: linear-gradient(145deg,
    rgba(21, 27, 38, 0.8) 0%,
    rgba(15, 20, 25, 0.7) 100%) !important;
  backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(0, 217, 255, 0.2) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  position: relative !important;
  overflow: visible !important;
}

.build-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 217, 255, 0.5) 50%,
    transparent 100%) !important;
}

.build-card:hover {
  border-color: rgba(0, 217, 255, 0.5) !important;
  box-shadow:
    0 0 40px rgba(0, 217, 255, 0.2),
    0 8px 30px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Boogeyman special styling */
.boogeyman-config {
  border: 2px solid rgba(124, 58, 237, 0.5) !important;
  background: linear-gradient(145deg,
    rgba(30, 0, 30, 0.8) 0%,
    rgba(20, 0, 20, 0.7) 100%) !important;
  box-shadow:
    0 0 50px rgba(124, 58, 237, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(168, 85, 247, 0.2) !important;
}

.boogeyman-config::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(168, 85, 247, 0.7) 50%,
    transparent 100%) !important;
  height: 3px !important;
}

.boogeyman-config::after {
  content: '👁️' !important;
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  font-size: 24px !important;
  opacity: 0.6 !important;
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.8)) !important;
}

/* ========================================
   COMPARE FLOATING BUTTON
   ======================================== */
#compareFloatingBtn {
  position: fixed !important;
  bottom: 100px !important;
  right: 32px !important;
  /* Kept one step above the synergy panel it sits beside; see the note there. */
  z-index: 1160 !important;

  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  border: 2px solid rgba(168, 85, 247, 0.5) !important;
  padding: 18px 32px !important;
  border-radius: 50px !important;

  box-shadow:
    0 0 40px rgba(124, 58, 237, 0.5),
    0 8px 30px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;

  font-weight: 800 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: white !important;
  cursor: pointer !important;
}

#compareFloatingBtn:hover {
  box-shadow:
    0 0 60px rgba(124, 58, 237, 0.7),
    0 12px 40px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ========================================
   MODAL STYLING
   ======================================== */
#compareModal,
#pinModal,
.modal-backdrop {
  background: rgba(5, 7, 12, 0.96) !important;
  backdrop-filter: blur(20px) !important;
}

#compareModal > div,
#pinModal > div {
  background: linear-gradient(145deg,
    rgba(21, 27, 38, 0.98) 0%,
    rgba(15, 20, 25, 0.95) 100%) !important;
  border: 2px solid rgba(0, 217, 255, 0.3) !important;
  border-radius: 20px !important;
  box-shadow:
    0 0 60px rgba(0, 217, 255, 0.3),
    0 20px 80px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   COMPARISON TABLE
   ======================================== */
table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 14px !important;
}

table thead {
  background: rgba(0, 217, 255, 0.1) !important;
  border-bottom: 2px solid rgba(0, 217, 255, 0.4) !important;
}

table th {
  padding: 16px !important;
  text-align: left !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #00d9ff !important;
  font-size: 13px !important;
}

table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #b8c5db !important;
}

table tr:hover {
  background: rgba(0, 217, 255, 0.05) !important;
}

table tr:hover td {
  color: #ffffff !important;
}

/* ========================================
   SAVE SECTION - SPECIAL STYLING
   ======================================== */
.save-grid {
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: 1fr 1fr !important;
}

.save-grid > input {
  grid-column: span 1 !important;
}

.save-grid > div {
  grid-column: 1 / -1 !important;
}

.save-grid > button {
  grid-column: 1 / -1 !important;
  padding: 16px !important;
  font-size: 16px !important;
}

/* Edit mode styling */
.panel[style*="border: 2px solid rgba(245, 158, 11, 0.3)"] {
  border: 2px solid rgba(255, 170, 0, 0.5) !important;
  background: linear-gradient(145deg,
    rgba(40, 30, 0, 0.4) 0%,
    rgba(21, 27, 38, 0.8) 100%) !important;
  box-shadow:
    0 0 40px rgba(255, 170, 0, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 170, 0, 0.1) !important;
}

/* ========================================
   ACTIONS & BUTTONS IN CARDS
   ======================================== */
.actions {
  display: flex !important;
  gap: 12px !important;
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ========================================
   CHECKBOXES - CYBER STYLE
   ======================================== */
input[type="checkbox"] {
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid rgba(0, 217, 255, 0.4) !important;
  border-radius: 4px !important;
  background: rgba(13, 17, 23, 0.8) !important;
  cursor: pointer !important;
  position: relative !important;
  margin-right: 8px !important;
}

input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #00d9ff, #0080ff) !important;
  border-color: #00d9ff !important;
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.5) !important;
}

input[type="checkbox"]:checked::after {
  content: '✓' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #000 !important;
  font-weight: 900 !important;
  font-size: 14px !important;
}

label {
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  user-select: none !important;
  color: #b8c5db !important;
  font-weight: 600 !important;
}

label:hover {
  color: #ffffff !important;
}

/* ========================================
   SCROLLBAR - GLOBAL CYBER STYLE
   ======================================== */
::-webkit-scrollbar {
  width: 14px !important;
  height: 14px !important;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.4) !important;
  border-radius: 10px !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #7c3aed, #00d9ff) !important;
  border-radius: 10px !important;
  border: 2px solid rgba(0, 0, 0, 0.4) !important;
  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, 0.2),
    0 0 12px rgba(0, 217, 255, 0.3) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #a855f7, #00ffff) !important;
  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, 0.3),
    0 0 20px rgba(0, 217, 255, 0.5) !important;
}

/* ========================================
   TEXT SELECTION - NEON HIGHLIGHT
   ======================================== */
::selection {
  background: rgba(0, 217, 255, 0.4) !important;
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(0, 217, 255, 0.8) !important;
}

::-moz-selection {
  background: rgba(0, 217, 255, 0.4) !important;
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(0, 217, 255, 0.8) !important;
}

/* ========================================
   FOCUS STATES - CYBER GLOW
   ======================================== */
*:focus-visible {
  outline: 2px solid #00d9ff !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.4) !important;
}

button:focus-visible,
.btn:focus-visible {
  outline-offset: 2px !important;
}

/* ========================================
   MOBILE OPTIMIZATIONS
   ======================================== */
@media (max-width: 768px) {
  /* Synergy panel - compact floating card on mobile */
  #synergyPanel {
    position: fixed !important;
    top: auto !important;
    bottom: 80px !important;
    right: 12px !important;
    left: auto !important;
    width: 280px !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 45vh !important;
    padding: 14px !important;
    padding-top: 40px !important;
    border-radius: 12px !important;
    z-index: 999 !important;
  }

  #synergyPanel.collapsed {
    position: fixed !important;
    bottom: 80px !important;
    right: 12px !important;
    left: auto !important;
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
  }

  /* Make toggle button MUCH bigger and visible on mobile */
  #synergyToggle {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 44px !important;
    height: 32px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  }

  #synergyToggle::before {
    content: 'HIDE' !important;
  }

  #synergyToggle:empty::before {
    content: 'HIDE' !important;
  }

  #synergyPanel.collapsed #synergyToggle {
    display: none !important;
  }

  /* Synergy cards - more compact on mobile */
  .synergy-alert {
    padding: 10px !important;
    margin-bottom: 6px !important;
  }

  .synergy-alert > div:first-child > div:first-child {
    font-size: 12px !important;
  }

  .synergy-alert > div:nth-child(2) {
    font-size: 11px !important;
  }

  .synergy-alert > div:nth-child(3) {
    font-size: 10px !important;
  }

  .synergy-alert > div:last-child {
    font-size: 9px !important;
    display: none !important;
  }

  /* Header styling for mobile */
  #synergyPanel > div:first-child {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }

  #synergyPanel > div:first-child > div:first-child {
    font-size: 14px !important;
  }

  #compareFloatingBtn {
    bottom: 150px !important;
    right: 16px !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
  }

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

  .save-grid > input,
  .save-grid > div,
  .save-grid > button {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 480px) {
  #synergyPanel {
    max-height: 180px !important;
    padding: 12px !important;
  }

  #synergyPanel > div:first-child > div:first-child {
    font-size: 14px !important;
  }

  #compareFloatingBtn {
    padding: 10px 16px !important;
    font-size: 12px !important;
  }
}

/* ========================================
   SCROLL PERFORMANCE - DISABLE HEAVY EFFECTS
   ======================================== */

/* Remove backdrop-filter from all elements for scroll performance */
@media (max-width: 1024px) {
  #synergyPanel,
  .synergy-alert,
  .build-card,
  .sphere-suggestions,
  #compareModal,
  #pinModal,
  .modal-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #synergyPanel {
    background: rgba(21, 27, 38, 0.98) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
  }

  .build-card {
    background: rgba(21, 27, 38, 0.95) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
  }

  .build-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  }
}

/* ========================================
   MOBILE SYNERGY BADGE & DRAWER
   ======================================== */

/* Hide desktop synergy panel on mobile */
@media (max-width: 768px) {
  #synergyPanel {
    display: none !important;
  }
}

/* Floating badge - always visible on mobile */
#synergyBadge {
  display: none;
}

@media (max-width: 768px) {
  #synergyBadge {
    display: flex;
    position: fixed;
    bottom: 80px;
    right: 12px;
    min-width: 50px;
    height: 44px;
    padding: 0 14px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 22px;
    color: white;
    font-size: 14px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.5);
    z-index: 998;
    cursor: pointer;
  }

  #synergyBadge.empty {
    background: linear-gradient(135deg, #374151, #1f2937);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }

  #synergyBadge.has-complete {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.5);
  }
}

/* Overlay */
#synergyOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1100;
  opacity: 0;
}

#synergyOverlay.open {
  display: block;
  opacity: 1;
}

/* Slide-up drawer */
#synergyDrawer {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 70vh;
  background: linear-gradient(180deg, #1a1f2e 0%, #0f1318 100%);
  border-top: 2px solid rgba(124, 58, 237, 0.5);
  border-radius: 20px 20px 0 0;
  z-index: 1101;
  overflow: hidden;
  transform: translateY(100%);
}

#synergyDrawer.open {
  display: block;
  transform: translateY(0);
}

/* Drawer header */
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(124, 58, 237, 0.15);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.drawer-title {
  font-size: 18px;
  font-weight: 700;
  color: #00d9ff;
}

.drawer-close {
  padding: 10px 20px;
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* Drawer content */
.drawer-content {
  padding: 16px;
  max-height: calc(70vh - 70px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 40px 20px;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-title {
  font-size: 18px;
  font-weight: 700;
  color: #76849c;
  margin-bottom: 8px;
}

.empty-text {
  font-size: 14px;
  color: #76849c;
  opacity: 0.7;
}

/* Synergy cards in drawer */
.synergy-card {
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.1), rgba(124, 58, 237, 0.05));
  border: 1px solid rgba(0, 217, 255, 0.2);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}

.synergy-card.complete {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(0, 217, 255, 0.05));
  border: 2px solid rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

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

.synergy-name {
  font-size: 16px;
  font-weight: 700;
  color: white;
}

.synergy-progress {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.1);
  padding: 4px 10px;
  border-radius: 12px;
}

.synergy-bonus {
  font-size: 14px;
  color: #fbbf24;
  font-weight: 600;
  margin-bottom: 6px;
}

.synergy-desc {
  font-size: 13px;
  color: #b8c5db;
  font-style: italic;
  margin-bottom: 8px;
  line-height: 1.4;
}

.synergy-requires {
  font-size: 11px;
  color: #76849c;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Allow transitions for drawer */
#synergyDrawer,
#synergyOverlay {
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}

/* ========================================
   COMPACT HEADER (site-wide, 2026-05-12)
   Sticky single-row scrollable nav strip.
   Overrides styles.css horizontal-wrap and mobile.css column-stack.
   ======================================== */

.header {
  padding: 8px 0 !important;
  position: sticky;
  top: 0;
  /* Above page furniture -- the synergy panel/drawer reach 1101 and were painting
     over the nav dropdowns, since .header's z-index caps everything inside it.
     Still below the mobile menu overlay (9998) and the PIN modal (10000). */
  z-index: 1200;
}

.header .wrap {
  padding: 0 16px !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  max-width: 100% !important;
}

.header .bloodcafe-logo img {
  max-height: 32px !important;
  width: auto;
}

.header .brand {
  font-size: 14px !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.header .brand .h1 {
  font-size: 14px !important;
}

.header .badge {
  display: none;
}

.header .nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 4px !important;
  max-height: 40px;
  align-items: center;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  width: 100%;
}

.header .nav::-webkit-scrollbar {
  height: 4px;
}

.header .nav::-webkit-scrollbar-thumb {
  background: rgba(248, 113, 113, 0.4);
  border-radius: 2px;
}

.header .nav .btn {
  flex: 0 0 auto !important;
  white-space: nowrap;
  padding: 6px 10px !important;
  font-size: 11px !important;
  min-height: 30px !important;
  min-width: 0 !important;
  line-height: 1.2;
}

.header .nav .btn.active {
  background: rgba(248, 113, 113, 0.18) !important;
  color: #fca5a5 !important;
}

@media (max-width: 768px) {
  .header .wrap {
    flex-direction: row !important;
    text-align: left !important;
  }
  .header .brand,
  .header .brand .h1 {
    font-size: 12px !important;
  }
  .header .nav .btn {
    font-size: 10px !important;
    padding: 5px 8px !important;
  }
}


/* The synergy panel's empty state shares the panel with a populated header whose
   rules force display:flex and style first/last child as a title and a count pill.
   Applied to the empty state that turned the bolt icon into a cyan heading and the
   hint text into a purple badge, all crammed onto one line. Scoped 2026-09-03. */
#synergyPanel > .synergy-empty{
  display:block!important;
  text-align:center;
  padding:4px 2px;
}
#synergyPanel > .synergy-empty > div{ display:block!important; }
#synergyPanel > .synergy-empty .synergy-empty-icon{ line-height:1; opacity:.9; }

/* ========================================================================
   SITE HEADER — typographic treatment (2026-09-08)
   Replaces the row of ten emoji chips. The emoji stay in the markup and stay
   visible on the mobile bar, where an icon genuinely helps scanning; on desktop
   they are hidden and the nav reads as type. Active state is a rule under the
   label rather than a filled pill, so the one filled element in the header is
   the login CTA — one accent, spent in one place.
   Hit areas are 44px tall here; the previous 30px chips were the bulk of the
   small-tap-target findings.
   ======================================================================== */

.header .nav .nav-ico { display: none; }

@media (min-width: 900px) {
  .header { padding: 0 !important; }

  .header .wrap {
    gap: 22px !important;
    align-items: stretch !important;
    min-height: 52px;
  }

  .header .bloodcafe-logo { display: flex; align-items: center; }

  .header .brand {
    display: flex;
    align-items: center;
    font-family: 'Oswald', 'Rajdhani', sans-serif;
    letter-spacing: .10em;
    text-transform: uppercase;
    font-size: 13px !important;
  }
  /* The page name repeats the h1 below it, so let the wordmark lead.
     styles.css paints .h1 with background-clip:text + transparent fill, so the
     clip has to be reset before a plain colour can apply at all — same trap that
     made the reaper hero invisible. */
  .header .brand .h1 {
    font-size: 13px !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--ash, #8d877c) !important;
    font-weight: 500;
    letter-spacing: .08em;
  }

  .header .nav {
    gap: 2px !important;
    max-height: none !important;
    overflow: visible !important;
    justify-content: flex-end;
  }

  .header .nav .btn {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px !important;
    padding: 0 11px !important;
    font-family: 'Oswald', 'Rajdhani', sans-serif;
    font-size: 12px !important;
    font-weight: 500;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--ash, #8d877c) !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative;
    transition: color .16s ease;
  }

  /* the active rule, drawn under the label */
  .header .nav .btn::after {
    content: '';
    position: absolute;
    left: 11px; right: 11px; bottom: 9px;
    height: 2px;
    background: var(--blood-hi, #ff2530);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
  }
  .header .nav .btn:hover,
  .header .nav .btn:focus-visible { color: var(--bone, #e9e6dd) !important; }
  .header .nav .btn:hover::after { transform: scaleX(1); }

  .header .nav .btn.active {
    background: none !important;
    color: var(--bone, #e9e6dd) !important;
  }
  .header .nav .btn.active::after { transform: scaleX(1); }

  /* the one filled control in the header */
  .header .nav .btn.btn-squad-login,
  .header .nav .btn.btn-logout {
    margin-left: 10px;
    padding: 0 16px !important;
    color: var(--bone, #e9e6dd) !important;
    background: var(--blood, #b00710) !important;
    border-radius: 3px !important;
    font-weight: 600;
  }
  .header .nav .btn.btn-squad-login::after,
  .header .nav .btn.btn-logout::after { display: none; }
  .header .nav .btn.btn-squad-login:hover,
  .header .nav .btn.btn-logout:hover { filter: brightness(1.18); }
}

/* Narrow desktop: the ten labels no longer fit, so let the strip scroll again
   but keep the type treatment. */
@media (min-width: 900px) and (max-width: 1180px) {
  .header .nav:not(.nav-grouped) { overflow-x: auto !important; justify-content: flex-start; }
  .header .nav .btn { padding: 0 8px !important; font-size: 11px !important; letter-spacing: .06em; }
}

/* Below 900px the mobile bottom bar is the primary nav; the strip is secondary,
   so it keeps the icons and gets a real 44px hit area. */
@media (max-width: 899px) {
  .header .nav .nav-ico { display: inline; margin-right: 4px; }
  .header .nav .btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    font-size: 11px !important;
    padding: 0 10px !important;
  }
}

@media (min-width: 900px) {
  .header {
    border-bottom: 1px solid rgba(255, 37, 48, .18) !important;
    background: rgba(9, 10, 12, .86) !important;
  }
}


/* ========================================================================
   GROUPED SQUAD NAV (2026-09-08)

   The squad nav carries 32 links. The typographic header above is built for the
   10-item public nav: at >=900px it sets overflow:visible with
   justify-content:flex-end, so 32 non-wrapping items overflowed the container's
   START edge -- painting across the logo and wordmark and running off-screen with
   no scrollbar to reach them. site-header.js now groups those links into six
   dropdowns, leaving 8 controls in the bar.

   The trigger reuses .btn so it inherits the type treatment and the underline
   active-rule; only the caret and the panel are new.
   ======================================================================== */

.header .nav-group { position: relative; display: inline-flex; flex: 0 0 auto; }

.header .nav .nav-trigger {
  cursor: pointer;
  font: inherit;
  gap: 6px;
}

.header .nav-caret {
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .55;
  transition: transform .18s ease, opacity .18s ease;
}
.header .nav-group.open .nav-caret { transform: rotate(180deg); opacity: 1; }

.header .nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  min-width: 214px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #0d0e11;
  border: 1px solid rgba(255, 37, 48, .22);
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .62);
}
.header .nav-menu[hidden] { display: none; }

.header .nav-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 3px;
  color: var(--ash, #8d877c);
  text-decoration: none;
  font-family: 'Oswald', 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .075em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
.header .nav-menu-item .nav-ico { display: inline; font-size: 13px; line-height: 1; width: 16px; text-align: center; }
.header .nav-menu-item:hover,
.header .nav-menu-item:focus-visible {
  background: rgba(255, 37, 48, .10);
  color: var(--bone, #e9e6dd);
}
.header .nav-menu-item.active {
  color: var(--bone, #e9e6dd);
  box-shadow: inset 2px 0 0 var(--blood-hi, #ff2530);
}

/* The grouped bar fits, so it never needs to scroll -- and must not, or the
   panels would be clipped by the scroll container. */
@media (min-width: 900px) {
  .header .nav.nav-grouped {
    overflow: visible !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end;
    gap: 1px !important;
  }
}

/* Below 900px the bottom bar + its full-grid overlay are the nav. Collapsing the
   group triggers here retires a 6,000px-wide horizontal strip that was scrolling
   inside a 179px window -- every link in it is in the overlay. */
@media (max-width: 899px) {
  .header .nav.nav-grouped .nav-group { display: none; }
  .header .nav.nav-grouped { justify-content: flex-end; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .header .nav-caret { transition: none; }
}

/* ===== /css/mobile.css ===== */
/* ========================================
   BLOOD CAFÉ – MOBILE & CROSS-PLATFORM
   Responsive Design & Touch Optimization
   Phase 5: Mobile Polish
   ======================================== */

/* ========================================
   TOUCH TARGET OPTIMIZATION
   ======================================== */

/* Ensure all interactive elements meet 44x44px minimum */
@media (max-width: 768px) {
  button:not(.mobile-nav-item):not(.mobile-menu-btn):not(.mobile-menu-close):not(.mobile-menu-item):not(.warroom-tab):not(.mode-tab):not(.admin-tab):not(.filter-tab),
  .btn, a.btn, .clickable,
  input[type="button"],
  input[type="submit"],
  select {
    min-height: 48px;
    min-width: 48px;
    padding: 12px 20px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  /* Navigation buttons */
  .nav-btn {
    min-width: 64px;
    min-height: 64px;
    padding: 12px;
  }

  /* Bottom navigation touch optimization */
  .bottom-nav {
    padding: 8px 0;
  }

  .bottom-nav a {
    min-width: 60px;
    min-height: 60px;
  }

  /* Form inputs */
  input, textarea, select {
    min-height: 48px;
    font-size: 16px; /* Prevents zoom */
    padding: 12px 16px;
  }

  /* Sphere selectors */
  .sphere-option {
    min-height: 60px;
    padding: 16px;
  }

  /* Card interactions */
  .card, .panel {
    padding: 20px;
  }

  /* Links and text buttons - exclude mobile nav/menu items */
  a:not(.mobile-nav-item):not(.mobile-menu-item) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px;
  }

  /* Icon buttons */
  button[class*="icon"], .icon-btn {
    min-width: 48px;
    min-height: 48px;
  }

  /* Close buttons in modals */
  .modal-close, [class*="close"] {
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
  }

  /* Tab buttons */
  .tab, [role="tab"] {
    min-height: 48px;
    padding: 12px 20px;
  }

  /* Dropdown items */
  .dropdown-item, select option {
    min-height: 48px;
    padding: 12px;
  }
}

/* ========================================
   RESPONSIVE LAYOUT IMPROVEMENTS
   ======================================== */

/* Mobile-first breakpoints */
@media (max-width: 480px) {
  /* Small phones */
  .wrap {
    padding: 16px;
  }

  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 22px;
  }

  h3 {
    font-size: 18px;
  }

  /* Single column layouts */
  .grid-2, .grid-3, .grid-4,
  [class*="grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Stack navigation */
  .nav {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .nav .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  /* Tablets and large phones */
  .calculator-grid,
  .comparison-grid {
    grid-template-columns: 1fr !important;
  }

  /* Two-column grids become single column */
  .squad-grid {
    grid-template-columns: 1fr !important;
  }

  /* Reduce spacing on mobile */
  .wrap {
    padding: 20px;
  }

  /* Header adjustments */
  header .wrap, .header .wrap {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .brand {
    font-size: 18px;
  }

  /* Modal full-screen on mobile */
  .modal-content {
    width: 95%;
    max-width: 95%;
    max-height: 90vh;
    margin: 5vh auto;
  }

  /* Table scrolling */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Reduce animations on mobile for performance */
  * {
    animation-duration: 0.2s !important;
  }

  /* Simplify shadows on mobile */
  .card, .panel, button {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  }

  .card:hover, .panel:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablets */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
  /* Landscape phone mode */
  .header, header {
    position: relative; /* Remove sticky */
  }

  .modal-content {
    max-height: 95vh;
    overflow-y: auto;
  }
}

/* ========================================
   MOBILE NAVIGATION ENHANCEMENTS
   ======================================== */

@media (max-width: 768px) {
  /* Hide desktop navigation */
  .header .nav {
    display: none;
  }

  /* Ensure bottom nav is visible */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }

  /* Add padding to body to account for bottom nav */
  body {
    padding-bottom: 72px;
  }

  /* Scroll to top button repositioning */
  #scrollToTop {
    bottom: 100px !important; /* Above bottom nav */
    right: 20px !important;
  }
}

/* ========================================
   TOUCH-FRIENDLY FORMS
   ======================================== */

@media (max-width: 768px) {
  /* Larger form elements */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 8px;
  }

  /* Better select styling */
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
  }

  /* Better checkbox/radio sizing */
  input[type="checkbox"],
  input[type="radio"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
  }

  /* Label spacing */
  label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    min-height: 24px;
    display: flex;
    align-items: center;
  }

  /* Form groups */
  .form-group {
    margin-bottom: 20px;
  }
}

/* ========================================
   MOBILE-OPTIMIZED CARDS
   ======================================== */

@media (max-width: 768px) {
  .card, .panel {
    margin-bottom: 16px;
  }

  /* Sphere cards grid */
  .sphere-selector {
    grid-template-columns: 1fr !important;
    max-height: 400px;
  }

  /* Config cards */
  .config-card {
    padding: 16px;
  }

  /* Stat cards */
  .stat-card {
    padding: 20px 16px;
  }

  .stat-value {
    font-size: 28px;
  }
}

/* ========================================
   MOBILE TEXT OPTIMIZATION
   ======================================== */

@media (max-width: 768px) {
  /* Prevent text overflow */
  * {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Better line height on mobile */
  p, li {
    line-height: 1.7;
  }

  /* Larger body text */
  body {
    font-size: 16px;
  }

  /* Reduce letter spacing on mobile */
  h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0.3px;
  }
}

/* ========================================
   MOBILE SCROLLING IMPROVEMENTS
   ======================================== */

@media (max-width: 768px) {
  /* Smooth scrolling */
  html {
    -webkit-overflow-scrolling: touch;
  }

  /* Better scroll containers */
  .scroll-container {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }

  /* Hide scrollbar on mobile for cleaner look */
  .sphere-selector::-webkit-scrollbar {
    width: 4px;
  }

  .sphere-selector::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.5);
  }
}

/* ========================================
   MOBILE MODAL IMPROVEMENTS
   ======================================== */

@media (max-width: 768px) {
  .modal {
    align-items: flex-start;
    padding: 0;
  }

  .modal-content {
    border-radius: 12px 12px 0 0;
    margin-top: 10vh;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Modal header sticky */
  .modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--panel, #1a1f2e);
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Modal close button */
  .modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 11;
  }
}

/* ========================================
   MOBILE TABLES
   ======================================== */

@media (max-width: 768px) {
  /* Stack table rows on mobile */
  .table-responsive {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Alternative: Card-style tables */
  table.mobile-cards {
    border: 0;
  }

  table.mobile-cards thead {
    display: none;
  }

  table.mobile-cards tr {
    display: block;
    margin-bottom: 16px;
    background: var(--card, #232d3f);
    border-radius: 8px;
    padding: 12px;
  }

  table.mobile-cards td {
    display: block;
    text-align: right;
    padding: 8px;
    border: 0;
  }

  table.mobile-cards td::before {
    content: attr(data-label);
    float: left;
    font-weight: 600;
    color: var(--brand-bright, #a855f7);
  }
}

/* ========================================
   MOBILE NOTIFICATIONS
   ======================================== */

@media (max-width: 768px) {
  .notification, .toast {
    left: 10px;
    right: 10px;
    top: 10px;
    max-width: calc(100% - 20px);
  }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
  /* Disable expensive effects on mobile */
  body::before {
    animation: none;
    opacity: 0.5;
  }

  /* Simplified backgrounds - NO fixed attachment */
  body {
    background: var(--bg, #0a0e14);
    background-attachment: scroll !important;
    animation: none;
  }

  /* Reduce blur effects - CRITICAL for scroll performance */
  [class*="glass"], [class*="blur"],
  .header, .mobile-nav, .panel, .card,
  .build-card, .char, #synergyPanel,
  .sphere-suggestions, .toast {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* GPU acceleration for fixed elements */
  .header, .mobile-nav, .toast, #synergyPanel {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    contain: layout style;
  }

  /* Simplified shadows - reduces paint complexity */
  .panel, .card, .build-card, .slot-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  }

  /* Simplified gradients */
  [class*="gradient"] {
    background-size: 100% 100% !important;
  }

  /* Disable text-shadow glow effects */
  h1, h2, h3, .section-title, .slot-title {
    text-shadow: none !important;
  }
}

/* Tablet performance */
@media (max-width: 1024px) {
  body {
    background-attachment: scroll !important;
  }

  .header, .mobile-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ========================================
   SAFE AREA INSETS (iOS Notch)
   ======================================== */

@supports (padding: max(0px)) {
  .header, header {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
    padding-top: max(12px, env(safe-area-inset-top));
  }

  .bottom-nav {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  body {
    padding-bottom: max(72px, calc(72px + env(safe-area-inset-bottom)));
  }
}

/* ========================================
   COMPACT MOBILE LAYOUT — MAX SCREEN SPACE
   Reduces header, hero, and chrome on phones/tablets
   so interactive content (canvases, forms, tools) gets room
   ======================================== */

/* --- Phones --- */
@media (max-width: 768px) {
  /* Limit dev news feed so it doesn't push builder off screen */
  .dev-news-container {
    max-height: 120px !important;
    overflow-y: auto !important;
  }
  .dev-news-panel {
    margin-bottom: 8px !important;
  }
  /* Auto-collapse hero on mobile */
  .hero-section.collapsed .hero-content > *:not(.hero-title-row) {
    display: none !important;
  }
  /* Slim down sticky header */
  .header, header {
    padding: 6px 0 !important;
    margin-bottom: 8px !important;
  }
  .header .wrap, header .wrap {
    padding: 4px 12px !important;
    gap: 8px !important;
  }
  .brand {
    font-size: 15px !important;
    gap: 6px !important;
    letter-spacing: 1px !important;
  }
  .brand .h1 {
    font-size: 15px !important;
  }
  /* Logo smaller on mobile */
  .bloodcafe-logo img {
    height: 28px !important;
    width: auto !important;
  }

  /* Collapse hero sections — they're decorative, not functional */
  .hero-section,
  .st-hero,
  .sphere-hero,
  .lb-hero,
  [class*="-hero"] {
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
  }
  .hero-title,
  .st-hero h1,
  .sphere-hero h1,
  .lb-hero h1 {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }
  .hero-subtitle,
  .st-hero-desc,
  .hero-section .hero-subtitle {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }
  /* Hide verbose sub-descriptions on mobile */
  .st-hero-sub,
  .hero-section .quick-stats,
  .hero-section .quick-actions {
    display: none !important;
  }
  .st-hero-stat {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  /* Compact tab bars */
  .st-tab-bar,
  .tab-bar,
  [role="tablist"] {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
  }
  .st-tab,
  [role="tab"] {
    padding: 8px 12px !important;
    font-size: 11px !important;
    min-height: 36px !important;
  }

  /* Tighter cards and content */
  .st-card,
  .card,
  .panel {
    padding: 12px !important;
    margin-bottom: 8px !important;
  }
  .st-card h2,
  .card h2 {
    font-size: 16px !important;
    margin-bottom: 4px !important;
  }
  .st-card-desc,
  .card-desc {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  /* Sensitivity tuner: maximize canvas space */
  .st-sim-canvas {
    height: calc(50vh - 80px) !important;
    min-height: 200px !important;
  }
  .st-sim-controls {
    margin-bottom: 6px !important;
  }
  .st-sim-hud {
    gap: 8px !important;
    padding: 6px !important;
  }

  /* Container less padding */
  .st-container {
    padding: 0 8px 70px !important;
  }

  /* Reduce main content spacing */
  main {
    gap: 8px !important;
  }
  .wrap {
    padding: 8px 12px !important;
  }
}

/* --- Tablets: ALL iPads including Air/Pro landscape (up to 1400px) ---
   Gated on `pointer: coarse` as well as width. The width alone was catching every
   1024-1400px LAPTOP too, hiding the desktop navigation and pinning a touch bottom-bar
   to the screen on machines with a mouse. Pointer type is what actually distinguishes
   an iPad Pro in landscape (coarse) from a 1280px laptop (fine), so it is the correct
   discriminator here. 2026-09-03. */
@media (min-width: 769px) and (max-width: 1400px) and (pointer: coarse) {
  /* Hide desktop nav on tablets — use mobile bottom nav instead */
  .header .nav, .nav {
    display: none !important;
  }
  .mobile-nav {
    display: block !important;
  }
  body {
    padding-bottom: 72px !important;
  }
  /* Limit dev news feed */
  .dev-news-container {
    max-height: 150px !important;
    overflow-y: auto !important;
  }
  /* Compact header */
  .header, header {
    padding: 6px 0 !important;
    margin-bottom: 8px !important;
  }
  .header .wrap, header .wrap {
    padding: 4px 16px !important;
    gap: 8px !important;
  }
  .brand {
    font-size: 17px !important;
    letter-spacing: 1px !important;
  }
  .bloodcafe-logo img {
    height: 30px !important;
    width: auto !important;
  }

  /* Slim heroes — decorative, not functional */
  .hero-section,
  .st-hero,
  .sphere-hero,
  .lb-hero,
  [class*="-hero"] {
    padding: 10px 20px !important;
    margin-bottom: 8px !important;
  }
  .hero-title,
  .st-hero h1,
  .sphere-hero h1,
  .lb-hero h1 {
    font-size: 20px !important;
    margin-bottom: 2px !important;
  }
  .hero-subtitle,
  .st-hero-desc {
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }
  .st-hero-stat {
    font-size: 26px !important;
    line-height: 1 !important;
  }
  /* Hide decorative fluff on tablet */
  .st-hero-sub,
  .hero-section .quick-stats,
  .hero-section .quick-actions {
    display: none !important;
  }

  /* Compact tab bars */
  .st-tab-bar,
  .tab-bar,
  [role="tablist"] {
    margin-bottom: 8px !important;
  }
  .st-tab,
  [role="tab"] {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* Tighter cards */
  .st-card,
  .card,
  .panel {
    padding: 14px !important;
    margin-bottom: 8px !important;
  }
  .st-card h2,
  .card h2 {
    font-size: 17px !important;
    margin-bottom: 4px !important;
  }
  .st-card-desc,
  .card-desc {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }

  /* Canvas gets real space */
  .st-sim-canvas {
    height: calc(60vh - 60px) !important;
    min-height: 300px !important;
  }

  /* Tighter spacing */
  main {
    gap: 10px !important;
  }
  .st-container {
    padding: 0 12px 20px !important;
  }
}

/* --- Landscape: just make header non-sticky so it scrolls away --- */
@media (orientation: landscape) and (max-height: 500px) {
  .header, header {
    position: relative !important;
  }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */

@media (prefers-color-scheme: dark) {
  /* Already using dark theme, but ensure consistency */
  :root {
    color-scheme: dark;
  }
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {
  button, .btn {
    border: 2px solid currentColor;
  }

  .card, .panel {
    border: 1px solid currentColor;
  }

  a {
    text-decoration: underline;
  }
}

/* ========================================
   REDUCED DATA MODE
   ======================================== */

@media (prefers-reduced-data: reduce) {
  /* Disable background images/gradients to save data */
  body::before {
    display: none;
  }

  [class*="gradient"] {
    background-image: none !important;
  }
}

/* ========================================
   MOBILE TAB BARS — SCROLLABLE WITH INDICATORS
   All in-page tab bars (war room, weapons db,
   game modes, etc.) get scroll hints on mobile
   ======================================== */

@media (max-width: 768px) {
  /* Universal tab container fix */
  .warroom-tabs,
  .admin-tabs,
  .tabs-container,
  [role="tablist"] {
    position: relative;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-behavior: smooth;
  }

  /* Tab items shrink and wrap text if needed */
  .warroom-tab,
  .admin-tab,
  .mode-tab,
  .filter-tab,
  [role="tab"] {
    padding: 8px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
  }

  /* Scroll fade indicators on tab containers */
  .warroom-tabs::after,
  .admin-tabs::after,
  .tabs-container::after {
    content: '→';
    position: sticky;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(10, 13, 20, 0.95) 40%);
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 8px 8px 24px;
    font-size: 14px;
    font-weight: 700;
    pointer-events: none;
    z-index: 2;
    flex-shrink: 0;
  }

  /* Filter tabs on weapons database — wrap into grid */
  .filter-tabs,
  .weapons-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  .filter-tabs .filter-tab,
  .weapons-filter-bar .btn {
    white-space: normal !important;
    font-size: 10px !important;
    padding: 8px 6px !important;
    text-align: center !important;
    min-height: 40px !important;
    min-width: 0 !important;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  /* Hide non-essential elements */
  .header, header,
  .bottom-nav,
  .nav,
  #scrollToTop,
  .modal,
  [class*="notification"] {
    display: none !important;
  }

  /* Optimize for printing */
  body {
    background: white;
    color: black;
  }

  .card, .panel {
    border: 1px solid #000;
    break-inside: avoid;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  /* Show URLs after links */
  a[href]::after {
    content: " (" attr(href) ")";
  }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 3px solid var(--brand-bright, #a855f7);
  outline-offset: 2px;
}

/* High visibility focus for mobile */
@media (max-width: 768px) {
  *:focus-visible {
    outline-width: 4px;
    outline-offset: 3px;
  }
}

/* Screen reader only class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip to content link */
.skip-to-content:focus {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--brand, #7c3aed);
  color: white;
  text-decoration: none;
  border-radius: 8px;
}

/* ========================================
   MOBILE SPHERE AUTOCOMPLETE
   Enhanced dropdown for touch devices
   ======================================== */

@media (max-width: 768px) {
  /* Main autocomplete container - higher z-index for mobile */
  .sphere-autocomplete-container {
    z-index: 99999 !important;
  }

  /* Suggestion dropdown - mobile optimized */
  .sphere-suggestions {
    background: rgba(13, 17, 23, 0.98) !important;
    border: 3px solid #00d9ff !important;
    border-radius: 16px !important;
    padding: 12px !important;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.6),
      0 0 20px rgba(0, 217, 255, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    animation: slideDownMobile 0.2s ease-out;
  }

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

  /* Individual suggestion items - larger touch targets */
  .sphere-suggestion-item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 14px !important;
    min-height: 64px !important;
    cursor: pointer !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    transition: all 0.15s ease !important;
  }

  .sphere-suggestion-item:last-child {
    margin-bottom: 0 !important;
  }

  .sphere-suggestion-item:active {
    background: rgba(0, 217, 255, 0.25) !important;
    border-color: #00d9ff !important;
    transform: scale(0.98);
  }

  /* Color indicator - more visible */
  .sphere-suggestion-color {
    width: 8px !important;
    height: 48px !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 8px currentColor;
  }

  /* Text container */
  .sphere-suggestion-text {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Sphere name - larger font */
  .sphere-suggestion-name {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }

  /* Category label - more visible */
  .sphere-suggestion-category {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
  }

  /* Header label for dropdown */
  .sphere-suggestions::before {
    content: "Select a Sphere";
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #00d9ff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 8px 12px 16px 12px;
    border-bottom: 1px solid rgba(0, 217, 255, 0.3);
    margin-bottom: 12px;
    text-align: center;
  }

  /* Scrollbar for mobile */
  .sphere-suggestions::-webkit-scrollbar {
    width: 6px !important;
  }

  .sphere-suggestions::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 3px !important;
  }

  .sphere-suggestions::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #00d9ff 0%, #0080ff 100%) !important;
    border-radius: 3px !important;
  }
}

/* Extra small phones - even more optimization */
@media (max-width: 400px) {
  .sphere-suggestions {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
  }

  .sphere-suggestion-item {
    padding: 14px 12px !important;
    gap: 12px !important;
  }

  .sphere-suggestion-name {
    font-size: 16px !important;
  }

  .sphere-suggestion-category {
    font-size: 11px !important;
  }
}

/* ===== /css/logo-effects.css ===== */
/**
 * BLOOD CAFÉ - LOGO STYLES
 * Visual design - NO ANIMATIONS
 */

/* ============================================
   HEADER LOGO STYLES
   ============================================ */

.bloodcafe-logo {
  display: inline-block;
  cursor: pointer;
  position: relative;
  z-index: 100;
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

.bloodcafe-logo img {
  height: 40px;
  width: auto;
  display: block;
  transition: none !important;
  animation: none !important;
  transform: none !important;
  /* Static red glow - no animation */
  filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.6))
          drop-shadow(0 0 12px rgba(220, 38, 38, 0.3));
}

.bloodcafe-logo:hover img {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  /* Slightly brighter glow on hover - static */
  filter: drop-shadow(0 0 12px rgba(220, 38, 38, 0.9))
          drop-shadow(0 0 24px rgba(220, 38, 38, 0.7))
          drop-shadow(0 0 36px rgba(220, 38, 38, 0.5)) !important;
}

.bloodcafe-logo:active img {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* Small icon version for mobile nav */
.bloodcafe-logo-small img {
  height: 40px;
  width: auto;
}

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

.bloodcafe-hero-logo {
  text-align: center;
  margin: 0 auto 32px;
  position: relative;
  transition: none !important;
  animation: none !important;
}

.bloodcafe-hero-logo img {
  height: 200px;
  width: auto;
  display: inline-block;
  position: relative;
  transition: none !important;
  animation: none !important;
  transform: none !important;
  /* Static red glow */
  filter: drop-shadow(0 0 10px rgba(220, 38, 38, 0.7))
          drop-shadow(0 0 20px rgba(220, 38, 38, 0.5))
          drop-shadow(0 0 30px rgba(220, 38, 38, 0.3));
}

/* Static background glow */
.bloodcafe-hero-logo::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle,
    rgba(220, 38, 38, 0.3) 0%,
    rgba(220, 38, 38, 0.1) 40%,
    transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  transition: none !important;
  animation: none !important;
}

.bloodcafe-hero-logo:hover img {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* Hero title text */
.bloodcafe-hero-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 48px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #dc2626, #ef4444, #dc2626);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(220, 38, 38, 0.5);
  margin: 16px 0;
  transition: none !important;
  animation: none !important;
}

/* ============================================
   LOADING SCREEN - COMPLETELY DISABLED
   ============================================ */

.bloodcafe-loading-screen {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.bloodcafe-loading-screen.hidden {
  display: none !important;
}

.bloodcafe-loading-logo {
  display: none !important;
}

.bloodcafe-loading-text {
  display: none !important;
}

/* ============================================
   WATERMARK
   ============================================ */

.bloodcafe-watermark {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 120px;
  height: auto;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  transition: none !important;
}

.bloodcafe-watermark img {
  width: 100%;
  height: auto;
  filter: grayscale(100%);
}

.wrap:hover .bloodcafe-watermark {
  opacity: 0.08;
  transition: none !important;
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
  .bloodcafe-logo img {
    height: 60px;
  }

  .bloodcafe-hero-logo img {
    height: 120px;
  }

  .bloodcafe-hero-logo::before {
    width: 200px;
    height: 200px;
  }

  .bloodcafe-hero-title {
    font-size: 32px;
    letter-spacing: 2px;
  }

  .bloodcafe-watermark {
    width: 80px;
    bottom: 10px;
    right: 10px;
    opacity: 0.05;
  }
}

@media (max-width: 480px) {
  .bloodcafe-logo img {
    height: 50px;
  }

  .bloodcafe-hero-logo img {
    height: 100px;
  }

  .bloodcafe-hero-title {
    font-size: 24px;
    letter-spacing: 1px;
  }

  .bloodcafe-watermark {
    width: 60px;
  }
}

/* ============================================
   GLOBAL OVERRIDE
   ============================================ */

* {
  animation: none !important;
  transition: none !important;
}

/* ===== /css/mobile-first-2026-04-30.css ===== */
/* ============================================================================
 * BLOODCAFÉ — Mobile-First Responsive Override (2026-04-30)
 * ----------------------------------------------------------------------------
 * Implements the squad-side responsive spec. Loaded LAST in <head> so it
 * overrides any older desktop-only or partial mobile styles.
 *
 * Hard rules enforced here:
 *   - No horizontal scroll
 *   - 16px+ inputs (prevents iOS auto-zoom)
 *   - 44px tap targets
 *   - Tables stack on phones
 *   - All layout containers are flexible width
 *
 * Breakpoints (mobile-first, additive):
 *   base       → phones (320px+)
 *   480px+     → large phones / small tablets
 *   768px+     → tablets
 *   1024px+    → laptops
 *   1280px+    → desktop
 * ============================================================================ */

/* ── BOX MODEL + SCROLL CONTAINMENT ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ── MEDIA: never overflow viewport ──────────────────────────────────────── */
img, video, canvas, svg, picture, iframe {
  max-width: 100%;
  height: auto;
}

/* ── FLUID CONTAINERS ────────────────────────────────────────────────────── */
.container, .card, .panel, .section,
.wrapper, .content, .main, .page,
main, article, section, header, footer, nav {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── FLUID TYPOGRAPHY (per spec) ─────────────────────────────────────────── */
body {
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.5;
}
h1 { font-size: clamp(24px, 6vw, 42px); line-height: 1.2; }
h2 { font-size: clamp(20px, 4vw, 32px); line-height: 1.25; }
h3 { font-size: clamp(18px, 3vw, 26px); line-height: 1.3; }

/* ── TOUCH-FRIENDLY INPUTS (44px tap targets, no iOS zoom) ──────────────── */
/* !important is required here — older styles.css/mobile.css set 15px on
   `input[type="text"]` etc which beats the bare `input` selector by specificity.
   This is the one place !important is the correct hammer. */
button, input, select, textarea,
input[type="text"], input[type="search"], input[type="email"],
input[type="tel"], input[type="url"], input[type="password"],
input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="time"], input[type="month"] {
  font-size: 16px !important;          /* Prevents iOS Safari auto-zoom on focus */
  min-height: 44px;
  font-family: inherit;
}
input[type="checkbox"], input[type="radio"] {
  min-height: auto !important;
  min-width: 20px;
  min-height: 20px;
}
button, [role="button"], a.btn, a.button {
  min-height: 44px;
  padding: 10px 14px;
  cursor: pointer;
  touch-action: manipulation;
}

/* ── PHONE-SPECIFIC LAYOUT (≤ 767px) ────────────────────────────────────── */
@media (max-width: 767px) {
  body {
    padding: 0;
    margin: 0;
  }

  /* Stack flex/grid containers on phones unless they explicitly opt out */
  .row, .flex-row, .columns, .col-row, .grid:not(.grid-keep-mobile) {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Form fields: full width */
  input, select, textarea, button:not(.icon-btn):not(.tag) {
    width: 100%;
  }

  /* ── Wide TABLES become stacked CARDS ──
     Pattern: each <tr> becomes a card; each <td> becomes a labeled row.
     If the markup includes `data-label="X"` on <td>, that label shows.
     If not, the raw cell content stacks vertically — still readable. */
  table.responsive,
  table[data-mobile="cards"],
  .table-mobile-cards table,
  table:not(.no-stack) {
    display: block;
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto;
  }
  table:not(.no-stack) thead {
    /* Hide header on mobile — labels come from data-label or row context */
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  table:not(.no-stack) tbody,
  table:not(.no-stack) tr {
    display: block;
    width: 100%;
  }
  table:not(.no-stack) tr {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
  }
  table:not(.no-stack) td {
    display: block;
    padding: 6px 0;
    border: none;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
  /* If data-label is present, show it as an inline label */
  table:not(.no-stack) td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: rgba(0, 217, 255, 0.85);
    margin-right: 6px;
    text-transform: uppercase;
    font-size: 0.78em;
    letter-spacing: 0.04em;
  }

  /* Fix common desktop layout patterns: hard-cap card widths */
  .card, .panel, .section, .tile {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0;
    margin-right: 0;
  }

  /* Headings shouldn't have huge desktop margins */
  h1, h2, h3 { margin-top: 0.6em; margin-bottom: 0.4em; }

  /* Long text shouldn't blow out the row */
  pre, code, .code-block {
    overflow-x: auto;
    max-width: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  /* Sticky top nav (where present): make sure tap targets are big */
  nav, .navbar, .top-nav, header.site-header {
    width: 100%;
    max-width: 100%;
  }
  nav a, .navbar a, .top-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
  }

  /* Hover-only effects shouldn't gate anything on touch devices */
  .hover-only, .desktop-only {
    display: none !important;
  }
  .mobile-only {
    display: block !important;
  }
}

/* ── LARGE PHONES / SMALL TABLETS (≥ 480px) ─────────────────────────────── */
@media (min-width: 480px) {
  /* No structural change — just slight padding bump */
  .container, .page, main { padding-left: 12px; padding-right: 12px; }
}

/* ── TABLETS (≥ 768px) ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
  /* Tables can be tables again */
  table:not(.no-stack) { display: table; }
  table:not(.no-stack) thead { position: static; width: auto; height: auto; }
  table:not(.no-stack) tbody, table:not(.no-stack) tr { display: table-row-group; }
  table:not(.no-stack) tr { display: table-row; margin: 0; padding: 0; border: none; background: transparent; }
  table:not(.no-stack) td { display: table-cell; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); }
  table:not(.no-stack) td[data-label]::before { content: none; }

  /* Multi-column layouts come back */
  .row, .flex-row, .columns, .col-row {
    flex-direction: row !important;
  }
  .desktop-only { display: revert !important; }
  .mobile-only { display: none !important; }
}

/* ── LAPTOPS (≥ 1024px) ─────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .container, .wrapper, main { max-width: 1200px; margin-left: auto; margin-right: auto; }
}

/* ── DESKTOP (≥ 1280px) ─────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .container, .wrapper, main { max-width: 1400px; }
}

/* ── ACCESSIBILITY: respect reduced-motion + dark/contrast prefs ────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── LAST-RESORT VIEWPORT GUARD (catches anything that escapes box-sizing) */
@media (max-width: 767px) {
  body * {
    max-width: 100vw;
  }

  /* Kill any `min-width: NNNpx` on layout containers — most common cause of
     horizontal scroll on phones (e.g. rank-calculator min-width: 900px,
     sphere-guide min-width: 500px). */
  table, .stage-table, .sphere-grid, .sphere-card,
  .container, .wrap, .wrapper, .content, .main, .page, .card, .panel, .section,
  [class*="grid"], [class*="card"], [class*="panel"], [class*="container"],
  [class*="wrap"], [class*="row"], [class*="col"],
  section, article, main, header, footer, nav,
  div, ul, ol, dl, form, fieldset {
    min-width: 0 !important;
  }

  /* Cap any inline pixel width >= 360px so it can't overflow phone screens */
  [style*="width:360px"], [style*="width: 360px"],
  [style*="width:380px"], [style*="width: 380px"],
  [style*="width:400px"], [style*="width: 400px"],
  [style*="width:420px"], [style*="width: 420px"],
  [style*="width:440px"], [style*="width: 440px"],
  [style*="width:480px"], [style*="width: 480px"],
  [style*="width:500px"], [style*="width: 500px"],
  [style*="width:520px"], [style*="width: 520px"],
  [style*="width:540px"], [style*="width: 540px"],
  [style*="width:560px"], [style*="width: 560px"],
  [style*="width:580px"], [style*="width: 580px"],
  [style*="width:600px"], [style*="width: 600px"],
  [style*="width:640px"], [style*="width: 640px"],
  [style*="width:680px"], [style*="width: 680px"],
  [style*="width:700px"], [style*="width: 700px"],
  [style*="width:720px"], [style*="width: 720px"],
  [style*="width:760px"], [style*="width: 760px"],
  [style*="width:800px"], [style*="width: 800px"],
  [style*="width:900px"], [style*="width: 900px"],
  [style*="width:960px"], [style*="width: 960px"],
  [style*="width:1000px"], [style*="width: 1000px"],
  [style*="min-width:"], [style*="min-width: "] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}