:root {
  --room: #3a1114;
  --room-deep: #24090b;
  --gold: #d9a441;
  --gold-soft: rgba(217, 164, 65, 0.35);
  --cream: #fbf3e3;
  --muted: rgba(251, 243, 227, 0.62);
  --live: #e0463c;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* ONE SCREEN, NO SCROLL (Siddhant, 2026-10-17: "whatever appears should be on the screen frame"): the body is the viewport,
   the room fills it, and app.js sizes the stage to the height the other rows leave (its width follows, 16:9). */
body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(0.8rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  /* The banner's maroon, lit from the top like the veranda plate. */
  background:
    radial-gradient(70rem 40rem at 50% -10%, #5a1c20 0%, transparent 70%),
    linear-gradient(var(--room), var(--room-deep));
  color: var(--cream);
  font: 16px/1.5 ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
}

.room {
  width: min(96rem, 100%);
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  flex: 1;
  justify-content: center;
}

.head { text-align: center; margin: 0; }
.kicker {
  margin: 0 0 0.2rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
h1 {
  margin: 0;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.stage {
  position: relative;
  width: 100%;
  /* max-width is set by app.js fit(): the height the other rows leave, times 16/9 — the whole page stays on one screen. */
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--gold-soft),
    0 30px 80px -20px rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.3s;
}
.stage[data-mode="listening"] { box-shadow: 0 0 0 3px var(--live), 0 30px 80px -20px rgba(0, 0, 0, 0.7); }
/* While he speaks: an orange light on the frame, its strength following his voice (--glow, 0–1, set by app.js every frame). */
.stage.speaking {
  transition: none;
  box-shadow:
    0 0 0 calc(2px + var(--glow, 0) * 3px) rgba(255, 158, 48, calc(0.4 + 0.6 * var(--glow, 0))),
    0 0 calc(16px + var(--glow, 0) * 70px) calc(var(--glow, 0) * 10px) rgba(255, 140, 30, calc(0.2 + 0.7 * var(--glow, 0))),
    0 30px 80px -20px rgba(0, 0, 0, 0.7);
}

.stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

/* The layer is sized to the video, not the page. In the lesson it lets pointer events through to the native controls;
   in a doubt it takes them, so the video cannot be scrubbed or played under Gurudev's answer. */
.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.layer.busy { pointer-events: auto; }

/* THE START (index.html #begin): over the poster until the first tap; gone for the rest of the visit. */
.begin { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: linear-gradient(rgba(36, 9, 11, 0.3), rgba(36, 9, 11, 0.78)); }
.begin[hidden] { display: none; }
.begin-card { text-align: center; max-width: 30rem; padding: 1rem 1.2rem; display: grid; gap: 0.9rem; justify-items: center; }
.begin-card .kicker { margin: 0; }
.begin-btn { border: 0; border-radius: 99px; padding: 0.85rem 1.6rem; background: var(--gold); color: var(--room-deep); font: 700 1.05rem/1.2 inherit; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8); }
.begin-btn:hover { filter: brightness(1.06); } .begin-btn:disabled { opacity: 0.7; cursor: default; }
.begin-note { margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.45; }
@media (max-height: 420px) { .begin-note { display: none; } }

/* What is said — UNDER the frame, never over it (Siddhant, 2026-10-18: the band over the video hid too much): the class's own
   line while it plays, Gurudev's words while he answers, the student's while they ask, the room's hints in the quiet style.
   A slot of fixed height (two lines), so the stage does not resize as captions come and go. */
.caption {
  width: min(100%, 60rem);
  min-height: 3.6rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  padding: 2px 10px;
  text-align: center;
  font-size: clamp(14px, 1.4vw, 19px);
  line-height: 1.45;
  color: var(--cream);
  flex-shrink: 0;
}
.caption.empty { visibility: hidden; }

.caption .cap-who { flex: none; font-size: 12px; font-weight: 650; color: var(--gold); letter-spacing: 0.01em; }
.caption .cap-who:empty { display: none; }
.caption.you .cap-who { color: #8fd3ff; }
.caption .cap-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.caption.quiet .cap-text { color: var(--muted); font-style: italic; }

/* Where the answer came from — one line of links under the stage, present only during a doubt that drew on his talks.
   A FIXED SLOT: it is in the layout empty or full, so the dock never moves when it fills (it did, and pushed the mic
   button off the screen). One line, cut with an ellipsis if the titles run long. */
.sources {
  margin: 0;
  width: min(100%, 980px);
  height: 1.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.82rem;
  line-height: 1.5rem;
  color: var(--muted);
  text-align: center;
}
.sources.empty { visibility: hidden; }
.sources .src-lbl { color: var(--gold); font-weight: 650; margin-right: 8px; }
.sources .src + .src { margin-left: 16px; }
.sources a { color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--gold-soft); }
.sources a:hover { border-bottom-color: var(--gold); }
.sources a.at { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 6px; border-bottom-color: transparent; }
.sources a.at:hover { color: var(--cream); }

.dock { display: flex; align-items: center; gap: 12px; }
.mic {
  display: flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 20px 0 16px; border-radius: 24px; border: 0;
  background: var(--gold); color: #2a0e10; font: inherit; font-weight: 650; font-size: 14px; white-space: nowrap;
  cursor: pointer;
}
.mic:hover { background: #e7b559; }
.mic:active { transform: scale(0.97); }
.mic:disabled { opacity: 0.5; cursor: default; }
.mic.on { background: var(--live); color: #fff; box-shadow: 0 0 0 6px rgba(224, 70, 60, 0.25); animation: hand 1.2s ease-in-out infinite; }
@keyframes hand { 50% { box-shadow: 0 0 0 10px rgba(224, 70, 60, 0.12); } }
.back {
  height: 46px; padding: 0 18px; border-radius: 24px; border: 1px solid var(--gold-soft);
  background: transparent; color: var(--cream); font: inherit; font-size: 14px; cursor: pointer;
}
.back:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); }
.back:disabled { opacity: 0.35; cursor: default; }


@media (max-width: 640px) {
  body { padding-top: max(1rem, env(safe-area-inset-top)); }
  .mic .lbl { display: none; }
  .mic { padding: 0 14px; }
}