/* =====================================================
   CODE BUCCANEERS — CHAPTER 2
   The Shipwright’s Passage
   FIXED: Interaction + layering
===================================================== */

/* -----------------------------
   Reset
----------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: #0b1016;
  color: #e7e3db;
  font-family: "Crimson Pro", serif;
}

body {
  overflow: hidden;
}

/* -----------------------------
   Background Layers (NON‑INTERACTIVE)
----------------------------- */
.bg,
.sparkles,
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;   /* ✅ critical */
}

.bg {
  z-index: 0;
}

.sparkles {
  z-index: 1;
}

.vignette {
  z-index: 2;
}

/* -----------------------------
   Screen System
----------------------------- */
.screen {
  position: relative;     /* ✅ establish stacking context */
  z-index: 10;            /* ✅ above all background layers */

  display: none;
  height: 100%;
  padding: 20px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.screen.show {
  display: block;
  opacity: 1;
}

/* -----------------------------
   Panel — Shipyard Surface
----------------------------- */
.panel {
  position: relative;
  z-index: 11;            /* ✅ above screen */

  max-width: 900px;
  margin: 0 auto;
  padding: 22px;

  background: #1a1f26;
  border: 2px solid #3b414a;
  border-radius: 14px;
}

/* Subtle structural beam */
.panel::before {
  content: "";
  display: block;
  height: 6px;
  width: 100%;
  margin-bottom: 16px;
  border-radius: 3px;

  background: linear-gradient(
    90deg,
    #5a4a2a,
    #b08a3c,
    #5a4a2a
  );
}

/* -----------------------------
   Typography
----------------------------- */
h1, h2, h3 {
  color: #e2b85c;
  margin-bottom: 12px;
}

p {
  line-height: 1.65;
  margin-bottom: 14px;
}

.muted {
  opacity: 0.78;
}

/* -----------------------------
   Buttons (INTERACTIVE)
----------------------------- */
.btn {
  position: relative;     /* ✅ ensure click target */
  z-index: 12;

  padding: 12px 18px;
  border-radius: 8px;
  border: 1px solid #4a515b;
  background: #121820;
  color: #e7e3db;
  margin-top: 12px;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(
    135deg,
    #c7a24a,
    #9f7f32
  );
  color: #1a1f26;
  font-weight: 700;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* -----------------------------
   Lesson Content Areas
----------------------------- */
#ch2-lesson1-content,
#ch2-lesson2-content,
#ch2-lesson3-content,
#ch2-lesson4-content,
#ch2-lesson5-content,
#ch2-lesson6-content,
#ch2-final-build-content {
  margin-top: 18px;
  padding: 18px;

  background: #121820;
  border: 1px dashed #4a515b;
  border-radius: 12px;
}

/* -----------------------------
   Layout Helpers
----------------------------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------
   Code + Output
----------------------------- */
.code-window {
  background: #0b1016;
  border: 1px solid #3b414a;
  border-radius: 10px;
  padding: 12px;
  overflow-x: auto;
}

textarea {
  width: 100%;
  background: #0b1016;
  color: #e7e3db;
  border: 1px solid #3b414a;
  border-radius: 10px;
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* -----------------------------
   Feedback States
----------------------------- */
.good {
  color: #98ff88;
  font-weight: 700;
}

.bad {
  color: #ff6b6b;
  font-weight: 700;
}

/* -----------------------------
   Cards / Status
----------------------------- */
.hint-box,
.output-panel,
.history-card,
.status-card {
  margin-top: 14px;
  padding: 14px;
  background: #121820;
  border: 1px solid #3b414a;
  border-radius: 12px;
}

/* -----------------------------
   Tablet / Chromebook
----------------------------- */
@media (max-width: 900px) {
  .panel {
    padding: 18px;
  }

  .btn {
    width: 100%;
  }
}
/* =====================================================
   Chapter 2 — Final Inspection (Launch Readiness)
   Visual language: dockyard checklist / shipwright approval
===================================================== */

/* Inspection header card */
.final-inspection {
  background: linear-gradient(
    180deg,
    #151b22,
    #10151b
  );
  border: 2px solid #6b5a2e; /* aged brass */
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
}

.final-inspection h4 {
  color: #e2b85c;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}

.final-inspection .muted {
  font-style: italic;
}

/* Checklist look for output */
.output-panel {
  background: #0d1218;
  border: 2px dashed #3b414a;
}

.output-panel h4 {
  color: #e2b85c;
  letter-spacing: 0.04em;
}

/* Code window feels like an inspection report */
.output-panel .code-window {
  background: #0b1016;
  border-left: 6px solid #6b5a2e; /* inspection stripe */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Status emphasis inside Python output */
.output-panel .code-window code {
  white-space: pre-wrap;
}

/* PASS / FAIL emphasis */
.code-window code:has-text("PASS") {
  color: #98ff88;
}

.code-window code:has-text("FAIL") {
  color: #ff6b6b;
}

/* Ship status snapshot on final screen */
#ch2-ship-status {
  border: 2px solid #3b414a;
  background: #111821;
}

#ch2-ship-status h3 {
  color: #e2b85c;
}

/* Launch button = ceremonial */
#btn-ch2-complete {
  margin-top: 22px;
  padding: 14px 22px;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#btn-ch2-complete:not(:disabled) {
  background: linear-gradient(
    135deg,
    #d6b25c,
    #9f7f32
  );
  color: #1a1f26;
  box-shadow: 0 0 0 2px rgba(214,178,92,0.25);
}

#btn-ch2-complete:disabled {
  background: #2a2f36;
  color: #8b8f94;
  border-color: #3b414a;
}

/* Small ceremony touch */
.screen#screen-ch2-final.show .panel {
  animation: inspectionFadeIn 0.4s ease-out;
}

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