/* ===================================== */
/* PROLOGUE: CSS AS ATMOSPHERE */
/* ------------------------------------- */
/* CSS controls the mood, tone, and visual style. */
/* Linguistics analogy: CSS is like register — formal, poetic, cozy, cosmic. */
/* UX analogy: CSS reduces cognitive load by making the interface readable. */


/* ===================================== */
/* SCENE 1: THE WHOLE PAGE */
/* ------------------------------------- */
/* The body is the entire browser page. */
/* We remove default spacing and create the cosmic background. */

body {
  margin: 0;

  font-family: Georgia, serif;

  background: radial-gradient(
    circle at top,
    #242447,
    #0f0f1a
  );

  color: #eee;
}


/* ===================================== */
/* SCENE 2: THE APP CONTAINER */
/* ------------------------------------- */
/* This centers the lesson card on the screen. */
/* UX reason: the learner sees one clear focus point. */

#app {
  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 100vh;

  padding: 20px;
}


/* ===================================== */
/* SCENE 3: THE LESSON CARD */
/* ------------------------------------- */
/* This is the visible "page" of our microlearning module. */
/* It should feel soft, readable, and slightly magical. */

#card {
  width: 100%;

  max-width: 560px;

  padding: 32px;

  border-radius: 22px;

  background: rgba(255, 255, 255, 0.07);

  box-shadow: 0 0 40px rgba(180, 170, 255, 0.18);

  backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.14);
}


/* ===================================== */
/* SCENE 4: TITLE STYLE */
/* ------------------------------------- */
/* The title is the thematic anchor of each card. */
/* It tells the learner: "This is the concept now." */

#title {
  margin-top: 0;

  margin-bottom: 18px;

  font-size: 28px;

  line-height: 1.2;

  color: #f4eaff;
}

#subtitle {
  font-size: 14px;
  color: #bfb8d9;
  margin-bottom: 10px;
}

/* ===================================== */
/* SCENE 5: MAIN TEXT STYLE */
/* ------------------------------------- */
/* This is the reading passage. */
/* We keep line-height generous because humanities texts need breathing room. */

#text {
  font-size: 18px;

  line-height: 1.7;

  color: #e8e3f5;
}


/* ===================================== */
/* SCENE 6: CHOICE AREA */
/* ------------------------------------- */
/* This area holds interpretive choices. */
/* Each choice becomes a button created by JavaScript. */

#choices {
  margin-top: 24px;
}


/* ===================================== */
/* SCENE 7: ALL BUTTONS */
/* ------------------------------------- */
/* Buttons are the learner's actions. */
/* UX analogy: they are affordances — they show what can be clicked. */

button {
  font-family: Georgia, serif;

  font-size: 16px;

  padding: 12px 16px;

  border: none;

  border-radius: 14px;

  cursor: pointer;

  background: #8c7ae6;

  color: white;

  transition: 0.2s ease;
}


/* ===================================== */
/* SCENE 8: BUTTON HOVER STATE */
/* ------------------------------------- */
/* Hover gives feedback. */
/* UX reason: the learner knows the button is alive. */

button:hover {
  background: #a99cff;

  transform: translateY(-1px);
}


/* ===================================== */
/* SCENE 9: CHOICE BUTTONS */
/* ------------------------------------- */
/* Choice buttons should be stacked vertically. */
/* This reduces cognitive load: one choice per line. */

#choices button {
  display: block;

  width: 100%;

  margin-bottom: 12px;

  text-align: left;

  background: rgba(255, 255, 255, 0.12);

  border: 1px solid rgba(255, 255, 255, 0.18);
}


/* ===================================== */
/* SCENE 10: CHOICE BUTTON HOVER */
/* ------------------------------------- */
/* This creates a soft interactive glow. */

#choices button:hover {
  background: rgba(255, 255, 255, 0.22);
}


/* ===================================== */
/* SCENE 11: CONTINUE BUTTON */
/* ------------------------------------- */
/* This button is for moving forward when no interpretation choice is needed. */

#nextBtn {
  margin-top: 24px;
}