:root {
  /* ═══════════════════════════════════════════════════════
     MySquad Cinematic Game Theme v1.0
     Extracted from reference media + Grok vision
     Dark purple-black palette + HUD primitives
     ═══════════════════════════════════════════════════════ */

  /* Core palette from image(3).jpg + video frames */
  --cine-void:       #030408;
  --cine-deep:       #05070e;
  --cine-dark:       #0b0c18;
  --cine-base:       #181825;
  --cine-mid:        #2a2a3a;
  --cine-panel:      #1f1c34;
  --cine-grey:       #494661;
  --cine-muted:      #66627e;
  --cine-lavender:   #736e8d;
  --cine-mist:       #9888a5;
  --cine-ice:        #c4b8d4;
  --cine-bright:     #e8e0f0;

  /* Neon accents */
  --neon-cyan:       #00f0ff;
  --neon-purple:     #a855f7;
  --neon-pink:       #e879f9;
  --neon-amber:      #fbbf24;
  --neon-green:      #4ade80;

  /* HUD glass */
  --glass-bg:        rgba(11, 12, 24, 0.72);
  --glass-border:    rgba(115, 110, 141, 0.18);
  --glass-highlight: rgba(152, 136, 165, 0.08);

  /* Theme evolution stages */
  --theme-stage:     garage;   /* garage | shipyard | spaceship */
  --accent-primary:  var(--neon-cyan);
  --accent-secondary: var(--neon-purple);
  --accent-warm:     var(--neon-amber);
}

/* ═══════════════════ BASE ═══════════════════ */
html, body {
  margin: 0; padding: 0;
  background: var(--cine-deep) !important;
  color: var(--cine-bright) !important;
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

body.cinematic-loaded {
  transition: background 1.2s ease;
}

/* ═══════════════════ SCANLINES + CRT ═══════════════════ */
.cine-scanlines {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 240, 255, 0.012) 2px,
    rgba(0, 240, 255, 0.012) 4px
  );
  opacity: 0.4;
}

.cine-vignette {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 55%,
    rgba(3, 4, 8, 0.55) 100%
  );
}

/* ═══════════════════ AMBIENT ORBS ═══════════════════ */
.cine-ambience {
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  overflow: hidden;
}

.cine-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.22;
  animation: orb-drift 24s ease-in-out infinite;
}
.cine-orb:nth-child(1) {
  width: 500px; height: 500px;
  background: var(--cine-mist);
  top: 15%; left: 25%;
  animation-delay: 0s;
}
.cine-orb:nth-child(2) {
  width: 400px; height: 400px;
  background: var(--neon-purple);
  top: 55%; left: 65%;
  animation-delay: -8s;
}
.cine-orb:nth-child(3) {
  width: 350px; height: 350px;
  background: var(--neon-cyan);
  top: 75%; left: 15%;
  animation-delay: -16s;
}

@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(50px, -40px) scale(1.12); }
  66%      { transform: translate(-30px, 30px) scale(0.92); }
}

/* ═══════════════════ HUD PANELS ═══════════════════ */
.cine-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.cine-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(0, 240, 255, 0.15),
    transparent
  );
}
.cine-panel:hover {
  border-color: rgba(0, 240, 255, 0.22);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(0, 240, 255, 0.05);
  transform: translateY(-2px);
}

.cine-panel-glow {
  box-shadow:
    0 0 20px rgba(168, 85, 247, 0.08),
    inset 0 0 40px rgba(168, 85, 247, 0.02);
  border-color: rgba(168, 85, 247, 0.18);
}
.cine-panel-glow::before {
  background: linear-gradient(90deg,
    transparent,
    rgba(168, 85, 247, 0.18),
    transparent
  );
}

/* ═══════════════════ HUD CARDS ═══════════════════ */
.cine-card {
  background: rgba(31, 28, 52, 0.55);
  border: 1px solid rgba(115, 110, 141, 0.12);
  border-radius: 10px;
  padding: 14px;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}
.cine-card:hover {
  border-color: rgba(0, 240, 255, 0.22);
  box-shadow: 0 6px 24px rgba(0, 240, 255, 0.06);
  transform: scale(1.015) translateY(-2px);
}
.cine-card.active {
  border-color: rgba(0, 240, 255, 0.28);
  background: rgba(0, 240, 255, 0.04);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.06);
}

/* Status dots */
.cine-status {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.cine-status.online  { background: var(--neon-green);  box-shadow: 0 0 8px var(--neon-green);  animation: status-breathe 2.2s ease-in-out infinite; }
.cine-status.busy    { background: var(--neon-amber);  box-shadow: 0 0 8px var(--neon-amber); }
.cine-status.offline { background: #ef4444;            box-shadow: 0 0 4px #ef4444; }

@keyframes status-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.65; }
}

/* ═══════════════════ BUTTONS ═══════════════════ */
.cine-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.14);
  color: var(--neon-cyan);
  transition: all 0.25s ease;
  font-family: inherit;
  backdrop-filter: blur(4px);
  text-decoration: none;
}
.cine-btn:hover {
  background: rgba(0, 240, 255, 0.12);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.12);
  transform: translateY(-1px);
}
.cine-btn.accent {
  background: rgba(168, 85, 247, 0.10);
  border-color: rgba(168, 85, 247, 0.22);
  color: var(--neon-purple);
}
.cine-btn.accent:hover {
  background: rgba(168, 85, 247, 0.16);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.14);
}
.cine-btn.ghost {
  background: transparent;
  border-color: rgba(115, 110, 141, 0.25);
  color: var(--cine-mist);
}
.cine-btn.ghost:hover {
  border-color: var(--cine-mist);
  color: var(--cine-ice);
}

/* ═══════════════════ TOP BAR ═══════════════════ */
.cine-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  background: linear-gradient(180deg,
    rgba(5, 7, 14, 0.92),
    rgba(5, 7, 14, 0.45)
  );
  border-bottom: 1px solid rgba(115, 110, 141, 0.10);
  backdrop-filter: blur(14px);
}
.cine-topbar::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(0, 240, 255, 0.2),
    var(--neon-purple),
    rgba(0, 240, 255, 0.2),
    transparent
  );
}

.cine-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.cine-brand-icon {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  animation: brand-pulse 3.2s ease-in-out infinite;
}
@keyframes brand-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(0, 240, 255, 0.25); }
  50%      { box-shadow: 0 0 28px rgba(0, 240, 255, 0.55); }
}
.cine-brand-text {
  background: linear-gradient(135deg, #fff, var(--neon-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ═══════════════════ PROGRESS BAR ═══════════════════ */
.cine-progress-wrap {
  flex: 1;
  max-width: 440px;
}
.cine-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  color: var(--cine-muted);
  margin-bottom: 4px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-family: 'Orbitron', sans-serif;
}
.cine-progress-track {
  height: 5px;
  background: rgba(115, 110, 141, 0.12);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(115, 110, 141, 0.15);
}
.cine-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));
  border-radius: 3px;
  transition: width 0.8s ease;
  position: relative;
}
.cine-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: progress-shimmer 2.4s infinite;
}
@keyframes progress-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ═══════════════════ SIDEBAR ═══════════════════ */
.cine-sidebar {
  background: linear-gradient(90deg,
    rgba(5, 7, 14, 0.88),
    rgba(5, 7, 14, 0.35)
  );
  border-right: 1px solid rgba(115, 110, 141, 0.10);
  backdrop-filter: blur(10px);
}

/* ═══════════════════ GARAGE THEME ═══════════════════ */
.theme-garage {
  --accent-primary:   var(--neon-amber);
  --accent-secondary: var(--neon-pink);
  --garage-dust:      rgba(251, 191, 36, 0.04);
}
.theme-garage .cine-panel {
  border-color: rgba(251, 191, 36, 0.12);
}
.theme-garage .cine-panel:hover {
  border-color: rgba(251, 191, 36, 0.25);
  box-shadow: 0 8px 32px rgba(251, 191, 36, 0.06);
}
.theme-garage .cine-brand-text {
  background: linear-gradient(135deg, #fff, var(--neon-amber));
  -webkit-background-clip: text;
}

/* flickering light effect for garage */
.garage-flicker {
  animation: flicker 4.2s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  41% { opacity: 1; }
  42% { opacity: 0.75; }
  43% { opacity: 1; }
  45% { opacity: 0.85; }
  46% { opacity: 1; }
  78% { opacity: 1; }
  79% { opacity: 0.55; }
  80% { opacity: 1; }
  81% { opacity: 0.7; }
  82% { opacity: 1; }
}

/* ═══════════════════ SPACESHIP THEME ═══════════════════ */
.theme-spaceship {
  --accent-primary:   var(--neon-cyan);
  --accent-secondary: var(--neon-purple);
}
.theme-spaceship .cine-panel {
  border-color: rgba(0, 240, 255, 0.15);
  box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.02);
}
.theme-spaceship .cine-panel:hover {
  border-color: rgba(0, 240, 255, 0.28);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 0 50px rgba(0, 240, 255, 0.08),
    inset 0 0 30px rgba(0, 240, 255, 0.03);
}

/* ═══════════════════ SCROLLBAR ═══════════════════ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: rgba(115, 110, 141, 0.25); border-radius: 2px; }
::-webkit-scrollbar-track { background: transparent; }

/* ═══════════════════ ANIMATIONS ═══════════════════ */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cine-animate-in {
  animation: fade-in-up 0.5s ease-out forwards;
}

@keyframes hud-slide-in {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 900px) {
  .cine-sidebar { display: none; }
  .cine-progress-wrap { max-width: 200px; }
}

/* ═══════════════════ TERMINAL / CODE ═══════════════════ */
.cine-term {
  background: var(--cine-void);
  border: 1px solid rgba(115, 110, 141, 0.12);
  border-radius: 8px;
  padding: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--cine-ice);
  white-space: pre-wrap;
}
.cine-prompt { color: var(--neon-green); font-weight: 700; }
.cine-cmd    { color: var(--cine-bright); }
.cine-out    { color: var(--cine-mist); }

/* ═══════════════════ METRICS ═══════════════════ */
.cine-metric-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}
.cine-metric-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--cine-muted);
}

/* ═══════════════════ FEED ═══════════════════ */
.cine-feed-item {
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 240, 255, 0.02);
  border: 1px solid rgba(0, 240, 255, 0.04);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--cine-ice);
  animation: feed-pop 0.35s ease-out;
}
@keyframes feed-pop {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════ PARTICLE CANVAS LAYER ═══════════════════ */
#cine-particle-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ═══════════════════ UTILITY ═══════════════════ */
.cine-dim     { color: var(--cine-muted); }
.cine-bright  { color: var(--cine-bright); }
.cine-mono    { font-family: 'JetBrains Mono', monospace; }
.cine-orbitron { font-family: 'Orbitron', sans-serif; }
.cine-center  { display: flex; align-items: center; justify-content: center; }
.cine-hidden  { display: none !important; }