:root{
  --bg:#0f1221; --card:#171a2e; --line:rgba(255,255,255,.12);
  --ink:#f5f7ff; --muted:#bfc5ea; --accent:#6ee7ff; --ok:#77dd77; --bad:#ff6b6b;
  --r:14px; --shadow:0 8px 24px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 800px at 10% -10%, #1a1e3f 0%, #0f1221 60%, #0b0e1b 100%);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Nunito,sans-serif;line-height:1.45}

/* HUD */
.hud{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;background:rgba(20,24,58,.8);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.hud-left{display:flex;align-items:center;gap:12px}
.progress{width:220px;height:8px;background:#0a0d21;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.progress span{display:block;height:100%;width:0;background:var(--accent)}
.timer{font-weight:800;font-variant-numeric:tabular-nums}

/* Layout */
.stage{display:grid;grid-template-columns:1.4fr .6fr;gap:16px;max-width:1100px;margin:16px auto;padding:0 18px}
@media (max-width:1000px){.stage{grid-template-columns:1fr}}
.scene{min-height:480px;background:linear-gradient(135deg,#121636,#0f1221 60%,#14183a);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.sidebar .panel{background:#0b0e1d;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:12px}
.inventory{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.inventory li{background:#12142a;border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:.9rem}
.journal{display:grid;gap:8px;max-height:260px;overflow:auto}
.journal .entry{background:#10132a;border:1px solid var(--line);border-radius:10px;padding:8px;font-size:.95rem}
.muted{color:var(--muted)}

/* Buttons */
.btn{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:10px;padding:10px 12px;cursor:pointer}
.btn.primary{background:var(--accent);border-color:transparent;color:#001018;font-weight:800}
.btn.alt{background:transparent}
.btn.ghost{text-decoration:underline}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* Cards & helpers */
.card{background:#0c0f24;border:1px solid var(--line);border-radius:12px;padding:12px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.kbd{font-family:ui-monospace,Menlo,Consolas,monospace;background:#0b0e1d;border:1px solid var(--line);border-radius:6px;padding:2px 6px}

/* Toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;background:#0b0e1d;border:1px solid var(--line);border-radius:10px;padding:10px 12px;box-shadow:var(--shadow)}

/* Accessibility */
.sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Scene 2 helpers */
.s2-item{background:#10132a;border:1px solid var(--line);border-radius:10px;padding:10px;cursor:grab}
.s2-item.dragging{opacity:.7;outline:2px dashed var(--accent)}
/* ================================
   INTRO SCENE (Scene 0) STYLES
   ================================ */

/* Container */
.intro-wrapper {
  text-align: center;
  padding: 20px 10px 30px;
  animation: introFadeIn 0.8s ease-out forwards;
  opacity: 0;
}

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

/* Hero Image */
.intro-image {
  max-width: 420px;
  width: 90%;
  margin: 0 auto 18px;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}

/* Typewriter Effect */
.typewriter {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--muted);
  display: inline-block;
  border-right: 2px solid var(--accent);
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation:
    typing 3s steps(40, end) forwards,
    blinkCursor 0.8s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blinkCursor {
  0%, 100% { border-color: transparent; }
  50%      { border-color: var(--accent); }
}

/* Start Mission Button */
.start-mission-btn {
  margin-top: 24px;
  padding: 14px 20px;
  font-size: 1.1rem;
  background: var(--accent);
  border: none;
  color: #001018;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 255, 255, .25);
  animation: pulseBtn 1.8s ease-in-out infinite;
}

@keyframes pulseBtn {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}