:root {
  --color-black: #000000;
  --color-tan: #86745c;
  --color-light-tan: #c2baab;
  --color-dark-tan: #6a5c48;
  --color-white: #ffffff;
  --color-black-63: rgba(0, 0, 0, 0.63);
  --color-black-80: rgba(0, 0, 0, 0.8);
  --color-black-88: rgba(0, 0, 0, 0.88);
  --color-gold: #b19977;
  --color-accent: #b19977;
  --color-accent-light: #c2baab;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--color-white);
  background:
    radial-gradient(circle at 80% 0%, rgba(177,153,119,.16), transparent 32%),
    linear-gradient(145deg, #090807 0%, #000 52%, #16120e 100%);
  min-height: 100vh;
}
button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px clamp(18px,4vw,56px);
  background: var(--color-black-88);
  border-bottom: 1px solid rgba(194,186,171,.22);
  backdrop-filter: blur(12px);
}
.brand { display:flex; align-items:center; gap:14px; }
.brand-mark {
  width: 48px; height: 48px; display:grid; place-items:center;
  border: 1px solid var(--color-gold); border-radius: 14px;
  color: var(--color-black); background: var(--color-gold); font-weight: 900;
}
.topbar h1 { margin:2px 0 0; font-size: clamp(18px,2.3vw,28px); }
.eyebrow { font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--color-light-tan); }

.shell { width: min(1200px, calc(100% - 28px)); margin: 34px auto 70px; }
.panel {
  background: linear-gradient(160deg, rgba(22,20,18,.97), rgba(7,7,7,.96));
  border: 1px solid rgba(194,186,171,.24);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero { padding: clamp(26px,5vw,62px); display:grid; grid-template-columns: 1.5fr .8fr; gap: clamp(28px,6vw,70px); align-items:center; }
.hero h2 { font-size: clamp(36px,5.6vw,70px); line-height:1.02; margin:18px 0; letter-spacing:-.035em; }
.hero p { color:#ddd6cc; font-size:clamp(17px,2vw,21px); line-height:1.65; }
.goal { border-left:4px solid var(--color-gold); padding-left:16px; }
.pill { display:inline-block; color:var(--color-black); background:var(--color-gold); border-radius:999px; padding:7px 12px; text-transform:uppercase; letter-spacing:.09em; font-size:12px; font-weight:800; }
.identity-card { background:rgba(134,116,92,.18); padding:24px; border-radius:16px; border:1px solid rgba(177,153,119,.35); }
label { display:block; font-weight:800; margin-bottom:8px; }
input[type="text"] { width:100%; background:#0b0b0b; color:white; border:1px solid #5f5549; border-radius:12px; padding:14px 15px; outline:none; }
input[type="text"]:focus { border-color:var(--color-gold); box-shadow:0 0 0 3px rgba(177,153,119,.16); }
.primary-btn, .ghost-btn, .choice, .nav-btn {
  border-radius:12px; border:1px solid transparent; transition:.2s ease;
}
.primary-btn { width:100%; margin-top:14px; padding:14px 18px; color:#050505; background:var(--color-gold); font-weight:900; }
.primary-btn:hover { transform:translateY(-1px); background:#c2aa89; }
.primary-btn:disabled { opacity:.42; cursor:not-allowed; transform:none; }
.primary-btn.large { max-width:420px; }
.ghost-btn { color:white; background:transparent; border-color:#625747; padding:10px 14px; }
.ghost-btn:hover { border-color:var(--color-gold); color:var(--color-gold); }
.small { font-size:13px !important; color:#afa79a !important; }

.dashboard { margin-bottom:18px; padding:18px 20px; display:grid; grid-template-columns:1fr 1.4fr auto; gap:24px; align-items:center; }
.student-display { font-size:21px; font-weight:900; margin-top:4px; }
.meter-label { display:flex; justify-content:space-between; font-size:13px; color:var(--color-light-tan); margin-bottom:7px; }
.meter { height:9px; border-radius:99px; background:#302a23; overflow:hidden; }
.meter-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--color-dark-tan),var(--color-gold)); transition:.35s; }
.score-box { min-width:90px; text-align:right; }
.score-box span { display:block; color:var(--color-light-tan); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.score-box strong { font-size:30px; }

.mission-layout { display:grid; grid-template-columns:280px 1fr; gap:18px; }
.mission-nav { padding:18px; align-self:start; position:sticky; top:100px; }
.mission-nav h3 { margin:2px 0 14px; }
.nav-btn { width:100%; text-align:left; background:transparent; color:#d8d0c5; border-color:transparent; padding:12px; margin:3px 0; display:grid; grid-template-columns:26px 1fr; gap:9px; }
.nav-btn:hover { background:rgba(134,116,92,.12); }
.nav-btn.active { background:rgba(177,153,119,.18); border-color:rgba(177,153,119,.4); color:white; }
.nav-btn.complete .nav-num { background:var(--color-gold); color:black; }
.nav-btn.locked { opacity:.45; cursor:not-allowed; }
.nav-num { width:26px; height:26px; border-radius:50%; background:#302a23; display:grid; place-items:center; font-size:12px; font-weight:900; }
.nav-title { font-size:14px; font-weight:800; }

.mission-stage { min-height:650px; padding:clamp(22px,4vw,44px); }
.mission-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:28px; }
.mission-head h2 { margin:6px 0 8px; font-size:clamp(27px,3.8vw,44px); }
.mission-head p { color:#cfc7bc; line-height:1.55; margin:0; max-width:700px; }
.mission-badge { white-space:nowrap; border:1px solid #665b4b; border-radius:999px; padding:8px 11px; color:var(--color-gold); font-size:12px; font-weight:800; }
.scenario { background:rgba(134,116,92,.13); border:1px solid rgba(194,186,171,.18); border-left:4px solid var(--color-tan); padding:17px 18px; border-radius:12px; margin-bottom:25px; color:#ece7e0; line-height:1.55; }
.question-card { padding:20px 0; border-top:1px solid rgba(194,186,171,.14); }
.question-card:first-of-type { border-top:0; }
.q-label { color:var(--color-gold); font-size:12px; text-transform:uppercase; letter-spacing:.09em; font-weight:900; }
.question-card h3 { margin:7px 0 14px; font-size:20px; line-height:1.35; }
.choices { display:grid; gap:9px; }
.choice { width:100%; text-align:left; color:#eee9e2; background:#0a0a0a; border-color:#403930; padding:13px 14px; }
.choice:hover:not(:disabled) { border-color:var(--color-gold); background:#14110e; }
.choice.selected { border-color:var(--color-gold); background:rgba(177,153,119,.14); }
.choice.correct { border-color:#8bb88b; background:rgba(86,136,86,.18); }
.choice.incorrect { border-color:#c98282; background:rgba(145,65,65,.18); }
.explanation { margin-top:10px; padding:12px 14px; border-radius:10px; background:#111; color:#cfc8bd; line-height:1.5; font-size:14px; }
.explanation strong { color:white; }
.mission-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:24px; padding-top:20px; border-top:1px solid rgba(194,186,171,.14); }
.mission-actions .primary-btn { width:auto; min-width:180px; margin:0; }
.result-note { color:var(--color-light-tan); }

.completion { text-align:center; padding:clamp(30px,6vw,64px); margin-top:22px; }
.completion h2 { font-size:clamp(35px,5vw,62px); margin:16px 0 10px; }
.completion > p { color:#d6cec3; font-size:18px; }
.completion-grid { margin:28px auto; max-width:800px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.completion-grid div, .cert-key-box { background:rgba(134,116,92,.13); border:1px solid rgba(194,186,171,.2); padding:17px; border-radius:12px; }
.completion-grid span, .cert-key-box span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--color-light-tan); margin-bottom:5px; }
.completion-grid strong { font-size:18px; }
.cert-key-box { max-width:800px; margin:0 auto 20px; }
.cert-key-box code { word-break:break-all; color:var(--color-gold); font-size:12px; }

footer { text-align:center; padding:26px; color:#8f8578; font-size:12px; }

@media (max-width: 850px) {
  .hero { grid-template-columns:1fr; }
  .dashboard { grid-template-columns:1fr auto; }
  .meter-wrap { grid-column:1 / -1; grid-row:2; }
  .mission-layout { grid-template-columns:1fr; }
  .mission-nav { position:static; }
  #missionNav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mission-head { flex-direction:column; }
  .completion-grid { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .topbar { align-items:flex-start; }
  .topbar .eyebrow { display:none; }
  .ghost-btn { padding:9px; font-size:12px; }
  #missionNav { grid-template-columns:1fr; }
  .dashboard { grid-template-columns:1fr; }
  .score-box { text-align:left; }
}