/* =====================================================================
   THE DECISION ROOM — style.css
   Module 1: Landing Screen
   Module 2: Mission Selection

   HOW THIS FILE IS ORGANIZED (read top to bottom):
   1. Variables (:root)      — every color/spacing value lives here
   2. Reset                  — removes the browser's default styling
   3. Base / Typography      — fonts, headings, body text defaults
   4. Layout utilities       — .app wrapper, .screen system
   5. Background system      — the cinematic layered dark background
   6. Landing screen         — top bar, hero content, compass icon
   7. Mission Selection      — section heading, ornament, mission cards
   8. Buttons                — the reusable gold "Enter" button
   9. Animation system       — fade-up / fade-in / scale-in + delays
   10. Responsive breakpoints — tablet / desktop adjustments
   11. Accessibility         — focus states, reduced motion
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. VARIABLES
   Every color, spacing, and timing value the whole project will reuse.
   Change a value here and it updates everywhere it's used — this is
   why we never "hardcode" colors directly inside a style rule below.
--------------------------------------------------------------------- */
:root {
  /* Core palette */
  --bg: #090909;                         /* page background, near-black */
  --bg-elevated: #121212;                /* slightly lighter panels (future use) */
  --gold: #d7b16a;                       /* primary gold accent */
  --gold-light: #f2d59a;                 /* brighter gold, for gradients/hover */
  --text: #f4efe7;                       /* main text, warm off-white */
  --text-muted: #b9b0a2;                 /* secondary text, description copy */
  --border: rgba(215, 177, 106, 0.25);   /* faint gold hairlines */

  /* Typography */
  --font-heading: "Cinzel", serif;
  --font-body: "Inter", sans-serif;

  /* Motion */
  --transition: 0.35s ease;
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);

  /* Spacing scale — used instead of random pixel values */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  /* Shared layout */
  --max-width: 1200px;
  --radius: 6px;
}


/* ---------------------------------------------------------------------
   2. RESET
   Browsers apply their own default margins/fonts/sizing. We clear that
   out so our own CSS is the only thing controlling the design.
--------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Smooth scrolling for later in-page jumps (kept subtle, not required now) */
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* the glow/vignette layers can slightly exceed edges */
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}


/* ---------------------------------------------------------------------
   3. BASE TYPOGRAPHY
--------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
}


/* ---------------------------------------------------------------------
   4. LAYOUT — .app wrapper and the .screen system
   Every screen (landing, briefing, decisions, results...) is a full
   viewport-height <section class="screen">. Only the one with the
   "active" class is visible. This is the foundation later modules
   will plug into for screen switching.
--------------------------------------------------------------------- */
.app {
  position: relative;
  width: 100%;
}

.screen {
  position: relative;
  min-height: 100svh; /* svh = safer viewport unit on mobile browsers */
  width: 100%;
  display: none;      /* hidden by default... */
  overflow: hidden;
}

.screen.active {
  display: flex;       /* ...shown only when it's the active screen */
  flex-direction: column;
}


/* ---------------------------------------------------------------------
   5. BACKGROUND SYSTEM
   A dark palace hall, not a flat texture. Layer order (back to front):
     a) an original SVG illustration (pillars, arches) — the real
        architecture, sitting on .scene-bg's own background
     b) a warm gold glow + semi-transparent dark wash over the hall,
        so it reads as glimpsed in near-darkness rather than lit flat
     c) a vignette that crushes the corners, plus a very faint grain
--------------------------------------------------------------------- */
.scene-bg {
  position: absolute;
  inset: 0;             /* shorthand for top/right/bottom/left: 0 */
  z-index: 0;
  pointer-events: none;

  /* a) The hall illustration — an original vector file (see
        assets/images/palace-hall.svg), not a photo, so it stays sharp
        at any screen size while costing only a few KB. */
  background-image: url("../assets/images/palace-hall.svg");
  background-repeat: no-repeat;
  background-position: center 15%;
  background-size: cover;
  background-color: #050505; /* shown instantly, before the SVG loads */
}

.scene-bg::before {
  /* b) Warm gold glow behind where the title sits, laid over a dark
        wash. The wash uses rgba() (not solid hex) on purpose — it's
        translucent, so the hall illustration underneath stays
        faintly visible instead of being painted over completely. */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 46% 34% at 50% 36%,
      rgba(215, 177, 106, 0.14),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(2, 2, 2, 0.74) 0%,
      rgba(6, 6, 6, 0.5) 45%,
      rgba(0, 0, 0, 0.85) 100%
    );
}

.scene-bg::after {
  /* c) Vignette (crushes the corners toward black, like a film
        frame) plus grain. The grain's opacity is baked into the SVG
        via feComponentTransfer on its alpha channel — a plain
        fill-opacity on the rect has no effect on feTurbulence output,
        which was the bug that made the grain too strong before. */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 85% 75% at 50% 48%,
      transparent 42%,
      rgba(0, 0, 0, 0.82) 100%
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch' result='t'/><feComponentTransfer in='t'><feFuncA type='linear' slope='0.035' intercept='0'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: cover, 140px 140px;
}


/* ---------------------------------------------------------------------
   6. LANDING SCREEN
--------------------------------------------------------------------- */

/* --- Top bar --- */
.top-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--gold);
}

.brand-name {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.about-link {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--transition);
}

.about-link:hover {
  color: var(--gold-light);
}

/* --- Hero content --- */
.hero {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: var(--space-2) var(--space-3) var(--space-4);
  gap: 0;
}

/* Compass rose icon */
.compass {
  width: 76px;
  height: 76px;
  margin-bottom: var(--space-3);
  color: var(--gold);
  animation: spin 90s linear infinite;
  filter: drop-shadow(0 0 10px rgba(215, 177, 106, 0.35));
}

.compass-ring {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
}

.compass-dot {
  fill: var(--gold);
}

.compass-ticks line {
  stroke: var(--gold-light);
  stroke-width: 1.75;
  opacity: 0.8;
}

.compass-needle {
  fill: var(--gold-light);
  opacity: 0.95;
}

/* Title: uppercase, engraved gold gradient, tight carved-stone spacing.
   Each word sits on its own line (see the <br> tags in the HTML) —
   this is a fixed three-line layout, matched to the reference, not a
   responsive wrap. */
.hero-title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: clamp(2.9rem, 13vw, 5.25rem);
  line-height: 1.04;
  letter-spacing: 0.015em;
  font-weight: 700;

  /* A richer metallic gradient: a bright highlight near the top,
     easing through gold, down to a bronze shadow at the base — this
     reads as engraved metal rather than a flat gold fill. */
  background: linear-gradient(
    180deg,
    #fffaef 0%,
    var(--gold-light) 20%,
    var(--gold) 56%,
    #7a5a2e 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* Two stacked shadows: a warm glow that lifts the title off the
     background, and a tight dark shadow that gives the letterforms
     physical depth. */
  filter:
    drop-shadow(0 4px 30px rgba(215, 177, 106, 0.28))
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
}

.hero-subtitle {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: clamp(0.78rem, 2.2vw, 0.9rem);
  letter-spacing: 0.22em;
  color: var(--text-muted);
  margin-top: var(--space-3);
}

.hero-desc {
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin-top: var(--space-3);
}

/* --- Scroll hint at the bottom of the screen --- */
.scroll-hint {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-bottom: var(--space-3);
  color: var(--gold);
  opacity: 0.6;
  animation: bob 2.4s ease-in-out infinite;
}


/* ---------------------------------------------------------------------
   7. MISSION SELECTION SCREEN
--------------------------------------------------------------------- */
.selection-content {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) var(--space-3);
}

/* Small uppercase label, reusable for any screen's "01 — Section Name"
   heading — the same pattern the reference uses on every screen. */
.section-eyebrow {
  align-self: flex-start;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.selection-heading {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: var(--space-4);
}

.section-title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  letter-spacing: 0.03em;
  font-weight: 700;
  color: var(--gold-light);
  text-shadow: 0 2px 20px rgba(215, 177, 106, 0.25);
}

/* Reusable ornament: line / diamond / line. Any future screen can drop
   this under a heading the same way this one does. */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.ornament-line {
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
}

.ornament-diamond {
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* --- Mission cards --- */
.mission-grid {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.mission-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.mission-card-media {
  position: relative;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 70% at 50% 30%, rgba(215, 177, 106, 0.16), transparent 70%),
    linear-gradient(180deg, #1b1712 0%, #0a0908 100%);
  border-bottom: 1px solid var(--border);
}

.mission-number {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.45);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  color: var(--gold);
}

/* A quiet decorative glyph standing in for each mission's portrait —
   original shapes, not a likeness of any real person. */
.mission-icon {
  width: 56px;
  height: 56px;
  fill: var(--gold);
  opacity: 0.35;
}

.mission-card-body {
  padding: var(--space-3);
}

.mission-card-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--gold-light);
}

.mission-card-figure {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.mission-card-year {
  color: var(--text-muted);
  opacity: 0.7;
}

.mission-card-desc {
  margin-top: var(--space-1);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.mission-card-meta {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mission-difficulty {
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  color: var(--border);
}

.mission-difficulty .star.is-filled {
  color: var(--gold);
}

.mission-time {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Active card: the one playable mission — inviting, clickable */
.mission-card.is-active {
  cursor: pointer;
}

.mission-card.is-active:hover,
.mission-card.is-active:focus-visible {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(215, 177, 106, 0.15);
}

.mission-card.is-active:focus-visible {
  outline: 1px solid var(--gold-light);
  outline-offset: 3px;
}

/* Locked cards: visible, but clearly inactive — dimmed and not
   interactive. No JavaScript needed to enforce this; there's simply
   no click handler bound to them (see js/script.js). */
.mission-card.is-locked {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.4);
}

.mission-locked {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.selection-quote {
  margin-top: var(--space-4);
  padding-bottom: var(--space-3);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
}

/* Mission flow: reuses the screen, panel, typography and button systems above. */
.briefing-content, .decision-content, .result-content, .reality-content { position: relative; z-index: 2; flex: 1; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: var(--space-3) var(--space-3) var(--space-4); }
.briefing-heading, .result-heading, .reality-heading { text-align: center; margin: var(--space-3) auto var(--space-4); }
.briefing-kicker, .card-label { color: var(--gold); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; }.briefing-kicker { margin-bottom: var(--space-1); }
.briefing-grid, .result-grid, .reality-grid { display: grid; gap: var(--space-3); max-width: 860px; margin: 0 auto; }
.briefing-card, .briefing-details, .choice-card, .profile-card, .similarity-card, .decision-summary, .reality-story, .insight-card, .comparison-card { border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01)); box-shadow: 0 16px 35px rgba(0,0,0,.18); }
.briefing-card, .profile-card, .similarity-card, .reality-story, .insight-card, .comparison-card { padding: var(--space-3); }.briefing-card p:not(.card-label), .reality-story p, .profile-card p:not(.card-label), .comparison-card p:not(.card-label) { color: var(--text-muted); font-size: .92rem; line-height: 1.7; }.briefing-card .card-label + p { margin: var(--space-1) 0 var(--space-3); }.briefing-card .card-label + p:last-child { margin-bottom: 0; }
.briefing-details { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }.briefing-details div { padding: var(--space-2); border-bottom: 1px solid var(--border); }.briefing-details dt { font-size: .67rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; }.briefing-details dd { margin-top: .3rem; color: var(--text); font-size: .82rem; }.threat-level { color: var(--gold-light); }
.briefing .btn-primary, .result .btn-primary, .reality .btn-primary { display: block; margin: var(--space-4) auto 0; }.decision-content { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }.decision-header { text-align: center; max-width: 720px; margin: 0 auto; }.decision-context { color: var(--text-muted); max-width: 60ch; margin: var(--space-3) auto 0; font-size: .95rem; line-height: 1.7; }.choice-list { display: grid; gap: var(--space-2); width: 100%; max-width: 760px; margin: var(--space-4) auto 0; }
.choice-card { display: flex; align-items: flex-start; gap: var(--space-2); width: 100%; padding: var(--space-3); color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: border-color var(--transition), transform var(--transition), background var(--transition); }.choice-card:hover, .choice-card:focus-visible { border-color: var(--gold); transform: translateY(-2px); background: rgba(215,177,106,.08); outline: none; }.choice-letter { flex: 0 0 26px; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border); color: var(--gold); font-family: var(--font-heading); font-size: .75rem; }.choice-card strong { display: block; color: var(--gold-light); font-family: var(--font-heading); font-size: .95rem; }.choice-card span:not(.choice-letter) { display: block; color: var(--text-muted); font-size: .83rem; line-height: 1.55; margin-top: .25rem; }.decision-progress { margin-top: var(--space-3); text-align: center; color: var(--text-muted); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; }
.profile-card h3 { margin: var(--space-1) 0; color: var(--gold-light); font-size: 1.35rem; }.similarity-card { text-align: center; }.similarity-card strong { display: block; margin: var(--space-1) 0; color: var(--gold-light); font: 700 clamp(2.8rem, 10vw, 4rem)/1 var(--font-heading); }.similarity-card span { color: var(--text-muted); font-size: .76rem; }.decision-summary { max-width: 860px; margin: var(--space-3) auto 0; padding: var(--space-3); }.decision-summary ol { padding-left: 1.25rem; margin-top: var(--space-2); color: var(--text-muted); font-size: .85rem; }.decision-summary li + li { margin-top: .45rem; }.rating { text-align: center; color: var(--gold-light); font-family: var(--font-heading); margin-top: var(--space-3); }.reality-story p + p { margin-top: var(--space-2); }.insight-card ul { margin: var(--space-2) 0 0 1.1rem; color: var(--text-muted); font-size: .88rem; line-height: 1.7; }.comparison-card { max-width: 860px; margin: var(--space-3) auto 0; }


/* ---------------------------------------------------------------------
   8. BUTTONS
   .btn-primary is the reusable luxurious gold button — this same class
   will be used for "Begin Mission", "Continue", "Next" in later screens.
--------------------------------------------------------------------- */
.btn-primary {
  position: relative;
  overflow: hidden; /* clips the light-sweep pseudo-element on hover */
  margin-top: var(--space-4);
  padding: 1.15rem 3.75rem;
  border: 1.5px solid var(--gold);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(215, 177, 106, 0.18), rgba(215, 177, 106, 0.03));
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;

  /* A thin outer ring (offset outward via box-shadow, since a real
     second border can't sit outside the element's own border) plus
     an inset highlight along the top edge — together they give the
     button the layered, struck-metal look of a bordered plaque. */
  box-shadow:
    0 0 0 1px rgba(215, 177, 106, 0.22),
    0 0 0 4px rgba(215, 177, 106, 0.05),
    inset 0 1px 0 rgba(255, 246, 224, 0.2),
    0 0 0 rgba(215, 177, 106, 0);

  transition:
    box-shadow 0.4s ease,
    transform var(--transition),
    background var(--transition),
    color var(--transition),
    letter-spacing var(--transition);
}

/* Light-sweep: a soft diagonal band that glides across the button on
   hover. Purely decorative, so it sits behind the label via z-index. */
.btn-primary::before {
  content: "";
  position: absolute;
  z-index: -1; /* sits behind the button's own text, not on top of it */
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255, 246, 224, 0.22),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.7s ease;
}

.btn-primary:hover {
  background: linear-gradient(180deg, rgba(215, 177, 106, 0.32), rgba(215, 177, 106, 0.07));
  color: #fff5de;
  letter-spacing: 0.34em;
  box-shadow:
    0 0 0 1px rgba(215, 177, 106, 0.32),
    0 0 0 5px rgba(215, 177, 106, 0.08),
    inset 0 1px 0 rgba(255, 246, 224, 0.28),
    0 0 32px rgba(215, 177, 106, 0.4);
}

.btn-primary:hover::before {
  left: 130%;
}

.btn-primary:active {
  transform: scale(0.97);
}

/* Keyboard focus state — visible outline for accessibility */
.btn-primary:focus-visible,
.about-link:focus-visible {
  outline: 1px solid var(--gold-light);
  outline-offset: 4px;
}


/* ---------------------------------------------------------------------
   9. ANIMATION SYSTEM
   Reusable classes: .fade-up / .fade-in / .scale-in
   Elements start hidden (opacity 0) and are held there with
   animation-play-state: paused. JavaScript adds "is-loaded" to the
   .screen once the page is ready, which is the ONLY thing that
   starts the animations — no animation logic lives in JS itself.
   .delay-1 through .delay-6 stagger the entrance.
--------------------------------------------------------------------- */
.fade-up,
.fade-in,
.scale-in {
  animation-duration: 0.9s;
  animation-timing-function: var(--ease-cinematic);
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

.fade-up {
  opacity: 0;
  transform: translateY(22px);
  animation-name: fadeUp;
}

.fade-in {
  opacity: 0;
  animation-name: fadeIn;
}

.scale-in {
  opacity: 0;
  transform: scale(0.94);
  animation-name: scaleIn;
}

/* Once the parent screen has "is-loaded", every paused animation runs */
.is-loaded .fade-up,
.is-loaded .fade-in,
.is-loaded .scale-in {
  animation-play-state: running;
}

.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.38s; }
.delay-4 { animation-delay: 0.55s; }
.delay-5 { animation-delay: 0.7s; }
.delay-6 { animation-delay: 0.85s; }

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

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes scaleIn {
  to { opacity: 1; transform: scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}


/* ---------------------------------------------------------------------
   10. RESPONSIVE BREAKPOINTS
   Mobile-first: all base styles above already work on small phones.
   These media queries only ADD refinements for larger screens.
--------------------------------------------------------------------- */

/* Tablets and small laptops */
@media (min-width: 640px) {
  .top-bar {
    padding: var(--space-3) var(--space-4);
  }

  .selection-content {
    padding: var(--space-4);
  }
}

/* Mission cards move from a stacked column to a 3-up row once there's
   enough width for all three to breathe */
@media (min-width: 860px) {
  .mission-grid {
    max-width: none;
    flex-direction: row;
    align-items: stretch;
  }

  .mission-card {
    flex: 1;
  }

  .briefing-grid { grid-template-columns: 1.25fr .9fr; }.result-grid { grid-template-columns: 1.2fr .8fr; }.reality-grid { grid-template-columns: 1.25fr .75fr; }
}

/* Desktop */
@media (min-width: 1024px) {
  .top-bar,
  .hero,
  .selection-content {
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
  }

  .hero-desc {
    max-width: 42ch;
  }
}


/* ---------------------------------------------------------------------
   11. ACCESSIBILITY — reduced motion
   Respects the visitor's OS-level "reduce motion" setting by skipping
   all entrance animations and the compass spin/scroll bob.
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-in,
  .scale-in,
  .compass,
  .scroll-hint {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Version 1.1: cinematic decision scenes and richer mission outcome. */
.scene-art{position:relative;width:100%;max-width:860px;height:210px;margin:var(--space-3) auto 0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(145deg,rgba(215,177,106,.12),rgba(0,0,0,.24));box-shadow:inset 0 0 80px rgba(0,0,0,.55),0 18px 35px rgba(0,0,0,.22)}
.chamber-art{background:radial-gradient(ellipse at 50% 5%,rgba(242,213,154,.25),transparent 45%),linear-gradient(90deg,#0b0a08,#281b0f 50%,#0b0a08)}.arch{position:absolute;left:35%;top:20px;width:30%;height:175px;border:5px solid rgba(215,177,106,.38);border-bottom:0;border-radius:80px 80px 0 0}.window-light{position:absolute;inset:0;background:linear-gradient(110deg,transparent 36%,rgba(242,213,154,.09) 48%,transparent 61%)}.chamber-table{position:absolute;bottom:24px;left:30%;width:40%;height:12px;background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 9px 0 rgba(215,177,106,.2)}.guard-patrol{position:absolute;bottom:26px;left:8%;display:flex;align-items:end;gap:30px;color:var(--gold-light);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase}.guard-patrol i{display:block;width:10px;height:45px;border-radius:8px 8px 2px 2px;background:rgba(215,177,106,.48);animation:patrol 3s ease-in-out infinite}.guard-patrol i:nth-child(2){animation-delay:.5s}.guard-patrol i:nth-child(3){animation-delay:1s}.guard-patrol span{position:absolute;left:0;bottom:-18px;white-space:nowrap}
.map-art{padding:20px;background:linear-gradient(135deg,#20170d,#5b4221 50%,#1d160d)}.map-art::before{content:"";position:absolute;inset:8px;border:1px solid rgba(242,213,154,.35)}.map-title{position:relative;z-index:1;color:var(--gold-light);font:600 .66rem var(--font-heading);letter-spacing:.14em;text-transform:uppercase}.map-art svg,.route-art svg{position:absolute;inset:35px 20px 25px;width:calc(100% - 40px);height:calc(100% - 60px)}.map-art path{fill:none;stroke:rgba(242,213,154,.65);stroke-width:2;stroke-dasharray:5 4}.map-art circle{fill:var(--gold-light);filter:drop-shadow(0 0 5px var(--gold))}.map-legend{position:absolute;bottom:14px;right:20px;display:flex;gap:12px;color:var(--text-muted);font-size:.61rem}.map-legend span::before{content:"◆";margin-right:4px;color:var(--gold)}
.message-art{display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,rgba(215,177,106,.17),transparent 43%),#100d09}.parchment{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;width:min(76%,450px);padding:24px 32px;color:#5a3b1c;background:linear-gradient(100deg,#b99658,#f0d79a 50%,#b38a4b);box-shadow:0 12px 30px rgba(0,0,0,.55);font:italic .76rem var(--font-heading);transform:rotate(-2deg)}.parchment i{position:absolute;right:25px;bottom:15px;color:#8a2320;font-size:1.8rem}.royal-seal{position:absolute;right:13%;bottom:22px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid #7f2925;color:#7f2925;background:#b83932;font:700 .7rem var(--font-heading);box-shadow:0 0 0 4px rgba(117,30,27,.3)}.message-shadow{position:absolute;bottom:20px;width:55%;height:20px;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(8px)}
.route-art{background:linear-gradient(180deg,#1d1711 0 49%,#100e0c 50%)}.route-horizon{position:absolute;top:48%;width:100%;border-top:1px solid rgba(215,177,106,.35)}.route-art path{fill:none;stroke:var(--gold-light);stroke-width:3;stroke-dasharray:7 5;animation:routePulse 3s linear infinite}.route-art circle{fill:var(--gold)}.checkpoint{position:absolute;inset:0;display:flex;align-items:end;justify-content:space-around;padding-bottom:20px;color:var(--text-muted);font-size:.7rem}.checkpoint span{padding:4px 7px;border:1px solid var(--border);border-radius:50%;background:var(--bg)}
.council-art{background:radial-gradient(ellipse at 50% 37%,rgba(215,177,106,.2),transparent 34%),linear-gradient(160deg,#110f0c,#2b2015)}.council-map{position:absolute;left:35%;top:45%;width:30%;height:55px;background:#d6b46c;transform:perspective(110px) rotateX(52deg);box-shadow:0 5px 20px #000}.advisor{position:absolute;bottom:35px;width:30px;height:80px;border-radius:15px 15px 3px 3px;background:linear-gradient(#b7975d,#4a3520)}.advisor::before{content:"";position:absolute;top:-22px;left:5px;width:20px;height:20px;border-radius:50%;background:#b7975d}.advisor-one{left:18%}.advisor-two{left:calc(50% - 15px);height:90px}.advisor-three{right:18%}.supply-meter{position:absolute;right:18px;top:16px;color:var(--text-muted);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase}.supply-meter i{display:block;width:105px;height:6px;margin-top:6px;background:linear-gradient(90deg,var(--gold) 62%,rgba(255,255,255,.12) 62%)}
.result-hero{display:grid;gap:var(--space-2);max-width:860px;margin:0 auto;align-items:center}.leadership-badge{display:grid;place-items:center;width:105px;height:105px;margin:auto;border:1px solid var(--gold);border-radius:50%;color:var(--gold-light);background:radial-gradient(circle,rgba(215,177,106,.24),transparent 65%);box-shadow:0 0 0 8px rgba(215,177,106,.05),0 0 32px rgba(215,177,106,.22);font:700 1.6rem var(--font-heading)}.similarity-card .score-ring{position:relative;display:grid;place-items:center;width:112px;height:112px;margin:var(--space-2) auto;border-radius:50%;background:conic-gradient(var(--gold) var(--score,0deg),rgba(255,255,255,.09) 0);transition:background 1.2s var(--ease-cinematic)}.similarity-card .score-ring::before{content:"";position:absolute;width:92px;height:92px;border-radius:50%;background:var(--bg-elevated)}.similarity-card .score-ring strong{position:relative;z-index:1;margin:0;font-size:1.55rem}.performance-panel,.comparison-grid{display:grid;gap:var(--space-2);max-width:860px;margin:var(--space-3) auto 0}.performance-panel>div{padding:var(--space-2);border-left:2px solid var(--gold);background:rgba(255,255,255,.025)}.performance-panel ul{padding-left:1rem;margin-top:.4rem;color:var(--text-muted);font-size:.82rem;line-height:1.6}
.history-timeline{position:relative;display:grid;gap:var(--space-2);max-width:860px;margin:0 auto;list-style:none}.history-timeline::before{content:"";position:absolute;left:10px;top:14px;bottom:14px;border-left:1px solid var(--border)}.history-timeline li{position:relative;padding:var(--space-2) var(--space-2) var(--space-2) 34px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.025)}.history-timeline li::before{content:"";position:absolute;left:4px;top:18px;width:12px;height:12px;border:2px solid var(--gold);border-radius:50%;background:var(--bg)}.history-timeline span{color:var(--gold-light);font:600 .85rem var(--font-heading)}.history-timeline p{margin-top:.25rem;color:var(--text-muted);font-size:.82rem;line-height:1.55}
@keyframes patrol{50%{transform:translateY(-10px);opacity:.55}}@keyframes routePulse{to{stroke-dashoffset:-48}}@media (min-width:860px){.result-hero{grid-template-columns:120px 1.2fr .8fr}.performance-panel,.comparison-grid{grid-template-columns:1fr 1fr}}

/* Cinematic finish: layered light, restrained texture, and tactile controls. */
body::before{content:"";position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.28;background:radial-gradient(circle at 18% 22%,rgba(215,177,106,.06),transparent 24%),radial-gradient(circle at 82% 75%,rgba(215,177,106,.045),transparent 28%)}
.screen{isolation:isolate}.screen::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(ellipse 38% 26% at 50% 42%,rgba(242,213,154,.055),transparent 72%)}.screen::after{content:"✦  ·  ✧  ·  ✦";position:absolute;z-index:1;right:7%;bottom:8%;pointer-events:none;color:rgba(242,213,154,.24);font-size:.72rem;letter-spacing:1.5rem;animation:atmosphere 7s ease-in-out infinite}
.scene-bg{transform:scale(1.025);transition:transform 1.8s var(--ease-cinematic),filter 1.2s ease;filter:saturate(.88) contrast(1.08)}.screen.active .scene-bg{transform:scale(1);filter:saturate(1) contrast(1.12)}.scene-bg::before{background:radial-gradient(ellipse 44% 34% at 50% 36%,rgba(215,177,106,.18),transparent 70%),radial-gradient(ellipse 30% 24% at 76% 75%,rgba(215,177,106,.07),transparent 72%),linear-gradient(180deg,rgba(2,2,2,.72),rgba(6,6,6,.48) 45%,rgba(0,0,0,.88))}
.top-bar{padding-top:calc(var(--space-3) + .35rem)}.brand-mark{box-shadow:0 0 18px rgba(215,177,106,.15),inset 0 1px rgba(255,255,255,.15)}.about-link{position:relative}.about-link::after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform var(--transition)}.about-link:hover::after{transform:scaleX(1);transform-origin:left}
.hero-title{letter-spacing:.035em;filter:drop-shadow(0 5px 38px rgba(215,177,106,.34)) drop-shadow(0 2px 2px rgba(0,0,0,.72))}.hero-desc{position:relative}.hero-desc::before{content:"";position:absolute;top:-.9rem;left:50%;width:36px;border-top:1px solid var(--border);transform:translateX(-50%)}.compass{filter:drop-shadow(0 0 16px rgba(215,177,106,.48))}.btn-primary{isolation:isolate;min-width:190px;box-shadow:0 0 0 1px rgba(215,177,106,.28),0 0 0 5px rgba(215,177,106,.045),inset 0 1px 0 rgba(255,246,224,.25),0 9px 22px rgba(0,0,0,.25)}.btn-primary::after{content:"";position:absolute;inset:3px;border:1px solid rgba(242,213,154,.16);pointer-events:none}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(215,177,106,.42),0 0 0 6px rgba(215,177,106,.08),inset 0 1px 0 rgba(255,246,224,.35),0 16px 32px rgba(0,0,0,.38),0 0 28px rgba(215,177,106,.24)}.btn-primary:focus-visible,.choice-card:focus-visible{outline:1px solid var(--gold-light);outline-offset:5px}
.mission-card{background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.01) 60%),rgba(0,0,0,.14);box-shadow:0 12px 25px rgba(0,0,0,.2)}.mission-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,transparent 20%,rgba(255,255,255,.07) 45%,transparent 60%);transform:translateX(-130%);transition:transform .9s var(--ease-cinematic)}.mission-card.is-active:hover::after{transform:translateX(130%)}.mission-card-media{height:164px;background:radial-gradient(ellipse 70% 90% at 50% 25%,rgba(215,177,106,.24),transparent 68%),linear-gradient(180deg,#211a11,#090807)}.mission-card.is-active:hover{transform:translateY(-7px);box-shadow:0 22px 44px rgba(0,0,0,.5),0 0 0 1px rgba(215,177,106,.24),0 0 36px rgba(215,177,106,.14)}.mission-icon{transition:transform .6s var(--ease-cinematic),opacity .5s ease}.mission-card.is-active:hover .mission-icon{transform:scale(1.12) rotate(-3deg);opacity:.55}
.briefing-grid{position:relative}.briefing-card{overflow:hidden}.briefing-card::before{content:"";display:block;height:78px;margin:-1.5rem -1.5rem var(--space-3);background:radial-gradient(ellipse at 50% 0,rgba(242,213,154,.25),transparent 66%),linear-gradient(90deg,transparent,rgba(215,177,106,.24),transparent);border-bottom:1px solid var(--border)}.briefing-card::after{content:"✦";position:absolute;right:var(--space-3);top:1.05rem;color:var(--gold);opacity:.7}.briefing-details div{transition:background var(--transition),transform var(--transition)}.briefing-details div:hover{background:rgba(215,177,106,.07);transform:translateX(2px)}
.decision-header .section-title{max-width:22ch;margin-inline:auto}.decision-context{font-size:1rem}.scene-art{border-color:rgba(215,177,106,.36);box-shadow:inset 0 0 90px rgba(0,0,0,.62),0 22px 42px rgba(0,0,0,.34),0 0 0 4px rgba(215,177,106,.035)}.scene-art::after{content:"";position:absolute;inset:7px;border:1px solid rgba(242,213,154,.16);pointer-events:none}.choice-card{position:relative;overflow:hidden;border-color:rgba(215,177,106,.28);box-shadow:0 8px 18px rgba(0,0,0,.16)}.choice-card::before{content:"";position:absolute;inset:0;width:4px;background:var(--gold);opacity:0;transition:opacity var(--transition)}.choice-card:hover,.choice-card:focus-visible{transform:translateY(-4px) scale(1.006);box-shadow:0 17px 30px rgba(0,0,0,.34),0 0 24px rgba(215,177,106,.1)}.choice-card:hover::before,.choice-card.is-selected::before{opacity:1}.choice-card.is-selected{border-color:var(--gold-light);background:linear-gradient(90deg,rgba(215,177,106,.18),rgba(215,177,106,.055));box-shadow:0 0 0 1px rgba(215,177,106,.25),0 0 28px rgba(215,177,106,.24);transform:translateX(7px)}.choice-card.is-selected .choice-letter{background:var(--gold);color:var(--bg);border-color:var(--gold-light)}.choice-letter{transition:background var(--transition),color var(--transition),transform var(--transition)}.choice-card:hover .choice-letter{transform:rotate(45deg)}
.leadership-badge{animation:badgeGlow 3.5s ease-in-out infinite}.profile-card,.similarity-card,.performance-panel,.decision-summary,.comparison-card,.insight-card{box-shadow:0 16px 34px rgba(0,0,0,.27)}.result-hero .profile-card{border-top:2px solid rgba(215,177,106,.72)}.similarity-card .score-ring{box-shadow:0 0 0 8px rgba(215,177,106,.045),0 0 30px rgba(215,177,106,.18)}.performance-panel>div{transition:transform var(--transition),background var(--transition)}.performance-panel>div:hover{transform:translateY(-3px);background:rgba(215,177,106,.07)}.decision-summary li::marker{color:var(--gold)}
.history-timeline li{transition:transform var(--transition),border-color var(--transition),background var(--transition);box-shadow:0 8px 20px rgba(0,0,0,.15)}.history-timeline li:hover{transform:translateX(7px);border-color:rgba(215,177,106,.5);background:rgba(215,177,106,.06)}.history-timeline li::before{box-shadow:0 0 0 4px rgba(215,177,106,.08),0 0 12px rgba(215,177,106,.32)}.timeline-match{margin-top:.6rem!important;color:var(--gold-light)!important;font-size:.7rem!important;letter-spacing:.08em;text-transform:uppercase}.comparison-card,.insight-card{border-top-color:rgba(215,177,106,.54)}
@keyframes atmosphere{50%{transform:translateY(-10px);opacity:.5}}@keyframes badgeGlow{50%{box-shadow:0 0 0 11px rgba(215,177,106,.08),0 0 42px rgba(215,177,106,.36)}}
@media (prefers-reduced-motion:reduce){.screen::after,.guard-patrol i,.leadership-badge{animation:none!important}.scene-bg{transform:none!important}.choice-card:hover{transform:none}}

/* Supplied artwork replaces the CSS scene illustrations while retaining the existing screen layers. */
.screen-artwork{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none}.screen-artwork::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,4,4,.3),rgba(4,4,4,.65) 68%,rgba(4,4,4,.88)),radial-gradient(ellipse 65% 52% at 50% 42%,transparent 20%,rgba(0,0,0,.28) 100%)}.screen-artwork img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.7;transform:scale(1.025);transition:transform 1.8s var(--ease-cinematic),opacity 1.2s ease}.screen.active .screen-artwork img{transform:scale(1);opacity:.78}.screen .scene-bg{opacity:.45}.screen.landing .screen-artwork img{object-position:center}.briefing .screen-artwork img,.result .screen-artwork img,.reality .screen-artwork img{object-position:center 30%}.decision .screen-artwork{inset:12% 0 auto;height:260px;border-block:1px solid rgba(215,177,106,.25)}.decision .screen-artwork::after{background:linear-gradient(180deg,rgba(4,4,4,.22),rgba(4,4,4,.68)),radial-gradient(ellipse at 50% 40%,transparent 25%,rgba(0,0,0,.34))}.decision .screen-artwork img{opacity:.74}.decision .scene-art{display:none}

/* =====================================================================
   GLOBAL MULTILINGUAL & MISSION 02 ENHANCEMENTS
   ===================================================================== */

/* Language Selector Segmented Control */
.lang-selector {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  gap: 2px;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 32px;
  padding: 0 0.4rem;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), transform var(--transition);
}

.lang-btn:hover {
  color: var(--gold-light);
}

.lang-btn.is-active {
  background: linear-gradient(180deg, rgba(215, 177, 106, 0.28), rgba(215, 177, 106, 0.08));
  color: var(--gold-light);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(215, 177, 106, 0.25), inset 0 1px 0 rgba(255, 246, 224, 0.2);
}

/* Devanagari typography enhancements */
html[lang="hi"] body {
  line-height: 1.65;
}

html[lang="hi"] .hero-title,
html[lang="hi"] .section-title,
html[lang="hi"] .mission-card-title,
html[lang="hi"] .choice-card strong {
  letter-spacing: 0.01em;
}

/* Empire Progress System */
.empire-progress {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-2);
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(15, 38, 28, 0.45);
  color: var(--gold-light);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Did You Know & Modern Parallel Cards */
.did-you-know-card {
  margin-top: 0.75rem;
  padding: 0.85rem var(--space-3);
  border: 1px dashed rgba(215, 177, 106, 0.35);
  border-radius: var(--radius);
  background: rgba(215, 177, 106, 0.04);
}

.did-you-know-card p {
  color: var(--gold-light) !important;
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
}

.modern-parallel-tag {
  display: block;
  margin-top: 0.5rem;
  padding: 0.4rem 0.65rem;
  border-left: 2px solid var(--gold);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.time-badge {
  display: inline-block;
  margin-bottom: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  background: rgba(215, 177, 106, 0.15);
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dynamic-ending-box {
  max-width: 720px;
  margin: var(--space-4) auto 0;
  padding: var(--space-4);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 30%, rgba(15, 38, 28, 0.65), rgba(7, 7, 7, 0.9));
  text-align: center;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 0 40px rgba(215, 177, 106, 0.25);
}

.dynamic-ending-box blockquote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--gold-light);
  margin-bottom: var(--space-3);
}

/* Hero Image Artwork inside Mission Selection Cards */
.mission-card-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s ease, filter 0.45s ease;
  z-index: 1;
}

.mission-card-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 7, 7, 0.92) 0%, rgba(7, 7, 7, 0.3) 55%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.mission-card.is-active:hover .mission-card-hero-img,
.mission-card.is-active:focus-visible .mission-card-hero-img {
  transform: scale(1.03);
  filter: contrast(1.06) brightness(1.03);
}

/* Ambient Particle Canvas & Accessibility Utilities */
.ambient-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  opacity: 0.75;
}

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

/* =====================================================================
   PERSISTENT GLOBAL NAVIGATION HEADER & AUDIO TOGGLE REDESIGN
   ===================================================================== */
.global-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-3);
  pointer-events: none;
}

.global-header .brand,
.global-header .top-actions {
  pointer-events: auto;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Compact Icon-Only Sound Toggle (Apple-quality glassmorphic pill button) */
.sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.sound-toggle:hover {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(215, 177, 106, 0.28), rgba(215, 177, 106, 0.08));
  color: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(215, 177, 106, 0.2);
}

.sound-toggle.is-muted {
  opacity: 0.65;
  color: var(--text-muted);
}

.sound-toggle .sound-icon {
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sound-toggle:hover .sound-icon {
  transform: scale(1.18);
}

/* Redesigned Restart Button (Matching glassmorphism, height, border, font & gold hover) */
.btn-restart {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 36px;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-restart:hover {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(215, 177, 106, 0.28), rgba(215, 177, 106, 0.08));
  color: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(215, 177, 106, 0.2);
}

.btn-restart:focus-visible {
  outline: 1px solid var(--gold-light);
  outline-offset: 2px;
}

.btn-restart svg {
  color: var(--gold-light);
  transition: transform 0.4s ease;
}

.btn-restart:hover svg {
  transform: rotate(180deg);
}

/* Ensure screens have precise top clearance for the fixed global header */
.screen {
  padding-top: 68px;
}

/* =====================================================================
   DECISION SCREEN AAA HERO & CHOICE CONTAINER LAYOUT
   ===================================================================== */
.decision .screen-artwork {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.decision-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 0 var(--space-4);
}

/* Section 1 — Hero Banner */
.decision-hero {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3) var(--space-3) var(--space-3);
  margin-bottom: var(--space-2);
}

.decision-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.decision-header .section-eyebrow {
  align-self: center;
  margin-top: 0.35rem;
}

.decision-header .section-title {
  margin-top: 0.4rem;
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  line-height: 1.2;
}

.decision-context {
  color: var(--text-muted);
  max-width: 58ch;
  margin: 0.6rem auto 0;
  font-size: 0.92rem;
  line-height: 1.65;
}

/* Section 2 — Decision Choice Container */
.choice-container {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-2);
}

.choice-list {
  display: grid;
  gap: var(--space-2);
  width: 100%;
}

/* =====================================================================
   ABOUT LAB GLASSMORPHISM MODAL OVERLAY
   ===================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.modal-overlay.is-active {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(16px);
}

.modal-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 580px;
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--space-4);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 20%, rgba(25, 22, 16, 0.96), rgba(8, 7, 6, 0.98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(215, 177, 106, 0.22);
  color: var(--text);
  transform: scale(0.95);
  transition: transform 0.3s var(--ease-cinematic);
}

.modal-overlay.is-active .modal-content {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--gold);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.modal-close:hover {
  border-color: var(--gold);
  background: rgba(215, 177, 106, 0.2);
  color: var(--gold-light);
}

.modal-header {
  text-align: center;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.modal-header .brand-mark {
  margin: 0 auto 0.5rem;
}

.modal-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.modal-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}

.modal-section {
  margin-bottom: var(--space-3);
}

.modal-section h4 {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}

.modal-section p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 0.4rem;
}

.modal-section p strong {
  color: var(--gold-light);
}

.mission-cards-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modal-mission-item {
  display: flex;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(215, 177, 106, 0.12);
}

.modal-mission-item.locked {
  opacity: 0.7;
}

.modal-mission-item strong {
  display: block;
  font-size: 0.88rem;
  color: var(--gold-light);
}

.modal-mission-item .leader-tag {
  display: block;
  font-size: 0.75rem;
  color: var(--gold);
  margin-bottom: 0.2rem;
}

.modal-mission-item p {
  font-size: 0.82rem;
  margin: 0;
}

.future-list {
  padding-left: 1.2rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.credits-section {
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  margin-bottom: 0;
}

.lab-brand-title {
  font-family: var(--font-heading);
  font-size: 1.05rem !important;
  color: var(--gold-light) !important;
  margin-bottom: 0.1rem !important;
}

.lab-brand-subtitle {
  font-size: 0.76rem !important;
  letter-spacing: 0.1em;
  color: var(--gold) !important;
}