/* ═══════════════════════════════════════════
   SPACE FORCE COMMANDER — MAIN STYLESHEET
   ═══════════════════════════════════════════ */

:root {
  --space-black : #03050f;
  --deep-blue   : #050d1f;
  --neon-cyan   : #00f5ff;
  --neon-green  : #39ff14;
  --neon-orange : #ff6b00;
  --neon-red    : #ff2244;
  --star-white  : #e8f4ff;
  --muted       : #4a6080;
  --panel-bg    : rgba(5, 20, 50, 0.88);
  --border-glow : rgba(0, 245, 255, 0.25);
  --font-hud    : 'Orbitron', monospace;
  --font-body   : 'Exo 2', sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background : var(--space-black);
  color      : var(--star-white);
  font-family: var(--font-body);
  min-height : 100vh;
  overflow-x : hidden;
}

/* ── STARFIELD ── */
#starfield { position:fixed; inset:0; pointer-events:none; z-index:0; }

/* ── NEBULA ── */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 15% 25%, rgba(0,80,200,0.14) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 75%, rgba(80,0,180,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 50% 50%, rgba(0,20,60,0.35) 0%, transparent 80%);
}

/* ── APP WRAPPER ── */
#app { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; }
main { flex:1; }

/* ══════════════════════════════
   NAVIGATION
══════════════════════════════ */
#main-nav {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 12px 24px;
  background     : rgba(3,5,15,0.94);
  border-bottom  : 1px solid var(--border-glow);
  backdrop-filter: blur(12px);
  position       : sticky; top:0; z-index:100;
  flex-wrap      : wrap; gap:10px;
}
.nav-logo {
  font-family: var(--font-hud);
  font-size  : 1rem; font-weight:900;
  color      : var(--neon-cyan);
  letter-spacing: 2px;
  text-decoration: none;
  text-shadow: 0 0 15px rgba(0,245,255,0.5);
}
.nav-logo span { color: var(--neon-orange); }

#hq-cadet-bar {
  display    : flex;
  align-items: center;
  gap        : 12px;
  flex-wrap  : wrap;
}
.nav-cadet-info {
  font-family: var(--font-hud);
  font-size  : 0.72rem;
  color      : var(--neon-cyan);
}
.xp-bar-wrap {
  width:110px; height:7px;
  background: rgba(255,255,255,0.08);
  border-radius:4px; overflow:hidden;
  border:1px solid var(--border-glow);
}
.xp-bar {
  height:100%; border-radius:4px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-green));
  transition: width .6s ease;
  box-shadow: 0 0 6px var(--neon-cyan);
}

/* ══════════════════════════════
   PANELS
══════════════════════════════ */
.panel {
  background     : var(--panel-bg);
  border         : 1px solid var(--border-glow);
  border-radius  : 14px;
  backdrop-filter: blur(14px);
  padding        : 26px;
  box-shadow     : 0 0 30px rgba(0,245,255,0.04), inset 0 1px 0 rgba(255,255,255,0.04);
}
.panel-sm { padding:16px; border-radius:10px; }
.panel-inset {
  background   : rgba(1,8,16,0.8);
  border       : 1px solid rgba(0,245,255,0.15);
  border-radius: 10px;
  padding      : 16px;
}

/* ══════════════════════════════
   TYPOGRAPHY
══════════════════════════════ */
h1,h2,h3,h4 { font-family:var(--font-hud); letter-spacing:.5px; line-height:1.2; }
h1 { font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight:900; }
h2 { font-size: clamp(1.1rem, 3vw, 1.6rem); font-weight:700; }
h3 { font-size: clamp(0.95rem, 2vw, 1.2rem); }
p  { line-height:1.75; }

.glow-cyan   { color:var(--neon-cyan);   text-shadow:0 0 18px rgba(0,245,255,.6); }
.glow-green  { color:var(--neon-green);  text-shadow:0 0 18px rgba(57,255,20,.6); }
.glow-orange { color:var(--neon-orange); text-shadow:0 0 18px rgba(255,107,0,.6); }
.text-muted  { color:var(--muted); }
.label-hud   { font-family:var(--font-hud); font-size:0.68rem; letter-spacing:2px; color:var(--muted); }

/* ══════════════════════════════
   BUTTONS
══════════════════════════════ */
.btn {
  font-family   : var(--font-hud);
  font-size     : 0.8rem; font-weight:700;
  letter-spacing: 1.5px; text-transform:uppercase;
  padding       : 12px 26px;
  border        : none; border-radius:8px;
  cursor        : pointer;
  transition    : all .2s ease;
  display       : inline-flex; align-items:center; gap:8px;
}
.btn:active { transform:scale(.97); }

.btn-primary {
  background: linear-gradient(135deg,#0055bb,#00aaff);
  color:#fff;
  box-shadow: 0 0 18px rgba(0,160,255,.4);
}
.btn-primary:hover { box-shadow:0 0 28px rgba(0,160,255,.7); transform:translateY(-2px); }

.btn-success {
  background: linear-gradient(135deg,#006600,#39ff14);
  color:#000; font-weight:900;
  box-shadow: 0 0 18px rgba(57,255,20,.35);
}
.btn-success:hover { box-shadow:0 0 28px rgba(57,255,20,.6); transform:translateY(-2px); }

.btn-danger {
  background: linear-gradient(135deg,#bb0022,#ff2244);
  color:#fff;
  box-shadow: 0 0 18px rgba(255,34,68,.4);
}
.btn-danger:hover { box-shadow:0 0 28px rgba(255,34,68,.7); transform:translateY(-2px); }

.btn-ghost {
  background: rgba(255,255,255,.05);
  border    : 1px solid var(--muted);
  color     : var(--muted);
}
.btn-ghost:hover { border-color:var(--neon-cyan); color:var(--neon-cyan); }

.btn-sm { padding:8px 16px; font-size:0.7rem; }
.btn-full { width:100%; justify-content:center; }

/* ══════════════════════════════
   FORM ELEMENTS
══════════════════════════════ */
.input-field {
  width         : 100%;
  padding       : 13px 16px;
  background    : rgba(1,8,22,0.9);
  border        : 1px solid var(--border-glow);
  border-radius : 8px;
  color         : var(--neon-cyan);
  font-family   : var(--font-hud);
  font-size     : 0.88rem;
  letter-spacing: 1px;
  outline       : none;
  transition    : border-color .25s, box-shadow .25s;
  caret-color   : var(--neon-cyan);
}
.input-field::placeholder { color:var(--muted); font-family:var(--font-body); letter-spacing:0; }
.input-field:focus {
  border-color: var(--neon-cyan);
  box-shadow  : 0 0 14px rgba(0,245,255,.2);
}

.code-editor {
  width       : 100%;
  padding     : 14px 16px;
  background  : #010810;
  border      : 1px solid var(--border-glow);
  border-radius:8px;
  color       : var(--neon-green);
  font-family : 'Courier New', monospace;
  font-size   : 1rem; line-height:1.6;
  outline     : none; resize:vertical;
  transition  : border-color .25s, box-shadow .25s;
  caret-color : var(--neon-cyan);
  min-height  : 52px;
}
.code-editor:focus {
  border-color: var(--neon-cyan);
  box-shadow  : 0 0 16px rgba(0,245,255,.2);
}

.output-box {
  background  : #010810;
  border      : 1px solid rgba(57,255,20,.25);
  border-radius:8px;
  padding     : 13px 16px;
  font-family : 'Courier New', monospace;
  font-size   : 0.95rem;
  color       : var(--neon-green);
  min-height  : 44px;
  word-break  : break-all;
}
.output-box.error   { color:var(--neon-red);  border-color:rgba(255,34,68,.35); }
.output-box.correct { border-color:rgba(57,255,20,.55); box-shadow:0 0 12px rgba(57,255,20,.15); }

/* ══════════════════════════════
   BADGES
══════════════════════════════ */
.badge {
  display      : inline-flex; align-items:center; gap:5px;
  background   : rgba(0,245,255,.08);
  border       : 1px solid var(--border-glow);
  border-radius: 20px;
  padding      : 4px 12px;
  font-size    : 0.73rem;
  font-family  : var(--font-hud);
  color        : var(--neon-cyan);
  white-space  : nowrap;
}
.badge-green  { background:rgba(57,255,20,.08);  border-color:rgba(57,255,20,.3);  color:var(--neon-green); }
.badge-orange { background:rgba(255,107,0,.08); border-color:rgba(255,107,0,.3); color:var(--neon-orange);}
.badge-gold   { background:rgba(255,215,0,.08); border-color:rgba(255,215,0,.3); color:gold; }
.badge-done   { background:rgba(57,255,20,.1);  border-color:rgba(57,255,20,.4); color:var(--neon-green); }
.badge-locked { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.1); color:var(--muted); }

/* ══════════════════════════════
   MISSION CARD
══════════════════════════════ */
.mission-card {
  padding   : 20px;
  cursor    : pointer;
  transition: all .25s ease;
}
.mission-card:hover {
  border-color: rgba(0,245,255,.5);
  transform   : translateY(-2px);
  box-shadow  : 0 8px 28px rgba(0,245,255,.12);
}
.mission-card.locked { opacity:.42; cursor:not-allowed; pointer-events:none; }
.mission-card.locked:hover { transform:none; box-shadow:none; }

/* ══════════════════════════════
   TABS
══════════════════════════════ */
.tab-bar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:-1px; }
.tab-btn {
  font-family   : var(--font-hud);
  font-size     : 0.7rem; letter-spacing:1.2px; text-transform:uppercase;
  padding       : 10px 18px;
  background    : rgba(255,255,255,.04);
  border        : 1px solid var(--border-glow);
  border-bottom : none;
  border-radius : 8px 8px 0 0;
  color         : var(--muted);
  cursor        : pointer;
  transition    : all .2s;
}
.tab-btn:hover,
.tab-btn.active {
  background  : rgba(0,245,255,.1);
  border-color: var(--neon-cyan);
  color       : var(--neon-cyan);
}

/* ══════════════════════════════
   TOAST
══════════════════════════════ */
.toast {
  position      : fixed; top:76px; right:20px; z-index:9999;
  background    : rgba(0,50,100,.97);
  border        : 1px solid var(--neon-cyan);
  border-radius : 10px;
  padding       : 14px 22px;
  font-family   : var(--font-hud); font-size:.82rem;
  color         : var(--neon-cyan);
  box-shadow    : 0 0 28px rgba(0,245,255,.3);
  display       : none;
  max-width     : 300px;
  animation     : toastIn .35s ease;
}
@keyframes toastIn {
  from { transform:translateX(110%); opacity:0; }
  to   { transform:translateX(0);    opacity:1; }
}

/* ══════════════════════════════
   AUTH PAGES
══════════════════════════════ */
.auth-wrapper {
  display        : flex;
  align-items    : center;
  justify-content: center;
  min-height     : 100vh;
  padding        : 20px;
}
.auth-box {
  width    : 100%;
  max-width: 420px;
}
.auth-logo { text-align:center; margin-bottom:32px; }
.auth-logo .rocket { font-size:3.5rem; animation:float 3s ease-in-out infinite; display:block; margin-bottom:12px; }
.form-group { margin-bottom:16px; }
.form-group label {
  display      : block;
  font-family  : var(--font-hud); font-size:.68rem; letter-spacing:2px;
  color        : var(--muted);
  margin-bottom: 7px;
}
.form-error {
  color      : var(--neon-red);
  font-size  : 0.82rem;
  margin-top : 10px;
  min-height : 20px;
  font-family: var(--font-body);
}

/* ══════════════════════════════
   ANIMATIONS
══════════════════════════════ */
@keyframes float {
  0%,100% { transform:translateY(0);    }
  50%     { transform:translateY(-12px);}
}
@keyframes pulse-glow {
  0%,100% { opacity:.7; }
  50%     { opacity:1;  }
}
@keyframes slideUp {
  from { transform:translateY(20px); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
.animate-up { animation:slideUp .5s ease forwards; }

/* ══════════════════════════════
   GRID HELPERS
══════════════════════════════ */
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; }
.flex-between { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.flex-center  { display:flex; justify-content:center; align-items:center; }
.gap-8  { gap:8px;  } .gap-12 { gap:12px; } .gap-16 { gap:16px; }
.mt-8   { margin-top:8px;   } .mt-16  { margin-top:16px; }
.mt-24  { margin-top:24px;  } .mt-32  { margin-top:32px; }
.mb-8   { margin-bottom:8px;  } .mb-16 { margin-bottom:16px; }
.mb-24  { margin-bottom:24px; } .mb-32 { margin-bottom:32px; }
.p-center { text-align:center; }

/* ══════════════════════════════
   SCROLLBAR
══════════════════════════════ */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--space-black); }
::-webkit-scrollbar-thumb { background:var(--muted); border-radius:3px; }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width:600px) {
  .panel { padding:18px; }
  #main-nav { padding:10px 16px; }
  .btn { padding:11px 18px; font-size:.75rem; }
}