:root {
  --purple: #8e1cff;
  --purple-bright: #a64dff;
  --ink: #14101f;
  --white: #ffffff;
}

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

html,
body {
  height: 100%;
  overflow: hidden;
  font-family:
    "Poppins",
    system-ui,
    -apple-system,
    sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0f;
  overflow: hidden;
}

/* 4:3 stage, centered and letterboxed to fit any viewport. `container-type`
   lets the overlay scale with the stage via cqmin units. */
#stage {
  position: relative;
  aspect-ratio: 4 / 3;
  width: min(100vw, calc(100vh * 4 / 3));
  height: min(100vh, calc(100vw * 3 / 4));
  container-type: size;
  overflow: hidden;
}

.stage-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
.stage-frame.is-visible {
  opacity: 1;
}

/* Overlay: container passes taps through; only interactive children catch them. */
#ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#ui > * {
  pointer-events: auto;
}

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2cqmin;
  font-family: inherit;
  font-weight: 800;
  font-size: 4.2cqmin;
  letter-spacing: 0.2px;
  color: var(--white);
  border: none;
  border-radius: 4cqmin;
  padding: 3.2cqmin 6cqmin;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}
/* smaller variant (the bottom-right "I'm done" button) */
.btn--sm {
  font-size: 3.1cqmin;
  padding: 2.2cqmin 3.6cqmin;
  border-radius: 3cqmin;
}
.rec-square {
  width: 2.4cqmin;
  height: 2.4cqmin;
  border-radius: 0.5cqmin;
  background: #ff4d4d;
  flex: none;
}
.btn:hover {
  transform: scale(1.05);
}
.btn:active {
  transform: scale(0.97);
}
.btn--primary {
  background: var(--purple);
  box-shadow: 0 1.5cqmin 5cqmin rgba(142, 28, 255, 0.45);
}
.btn--primary:hover {
  background: var(--purple-bright);
}
.btn--ghost {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover {
  background: rgba(0, 0, 0, 0.6);
}

/* ---- language dropdown (intro screen) ---- */
.lang-select {
  appearance: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 3.1cqmin;
  color: var(--white);
  background-color: rgba(0, 0, 0, 0.45);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='white'><path d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 3cqmin center;
  background-size: 2.4cqmin;
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 3cqmin;
  padding: 2.2cqmin 8cqmin 2.2cqmin 3.6cqmin;
  cursor: pointer;
}
.lang-select:hover {
  background-color: rgba(0, 0, 0, 0.6);
}
.lang-select option {
  color: #000;
  background: #fff;
}

/* ---- UGC mode (scripted questions) ---- */
.ugc-section {
  width: min(78cqw, 100cqmin);
  max-height: 52cqh;
  overflow: auto;
  color: var(--white);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  border-radius: 3cqmin;
  padding: 2.6cqmin 3cqmin;
  text-align: left;
  font-size: 3cqmin;
}
.ugc-section__summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 3.4cqmin;
  list-style: none;
  margin-bottom: 1.2cqmin;
}
.ugc-section__summary::-webkit-details-marker {
  display: none;
}
.ugc-section__summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 1.4cqmin;
  transition: transform 120ms ease;
}
.ugc-section[open] > .ugc-section__summary::before {
  transform: rotate(90deg);
}
.ugc-section__hint {
  color: rgba(255, 255, 255, 0.75);
  font-size: 2.6cqmin;
  margin-bottom: 2cqmin;
}
.ugc-slot {
  display: flex;
  flex-direction: column;
  gap: 1.4cqmin;
  padding: 2cqmin;
  margin-bottom: 1.6cqmin;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 2cqmin;
}
.ugc-slot:last-child {
  margin-bottom: 0;
}
.ugc-slot__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2cqmin;
}
.ugc-slot__label {
  font-weight: 700;
  font-size: 3.1cqmin;
}
.ugc-slot__type {
  display: inline-flex;
  align-items: center;
  gap: 0.6cqmin;
  font-size: 2.8cqmin;
  cursor: pointer;
}
.ugc-slot__type input[type="radio"] {
  accent-color: var(--white);
}
.ugc-slot__text {
  appearance: none;
  font-family: inherit;
  font-size: 3cqmin;
  color: var(--white);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1.6cqmin;
  padding: 1.6cqmin 2cqmin;
  width: 100%;
}
.ugc-slot__text::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.ugc-slot__text:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ugc-slot__student {
  display: flex;
  align-items: center;
  gap: 1.2cqmin;
  font-size: 2.8cqmin;
}
.ugc-slot__select {
  appearance: none;
  font-family: inherit;
  font-size: 2.8cqmin;
  color: var(--white);
  background-color: rgba(0, 0, 0, 0.55);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='white'><path d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2cqmin center;
  background-size: 2cqmin;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1.6cqmin;
  padding: 1.4cqmin 6cqmin 1.4cqmin 2cqmin;
  cursor: pointer;
}
.ugc-slot__select option {
  color: #000;
  background: #fff;
}

/* ---- centered card (intro / outro) ---- */
.panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3cqmin;
  padding: 8cqmin;
  text-align: center;
  background: rgba(8, 6, 16, 0.6);
  backdrop-filter: blur(3px);
}
.title {
  color: var(--white);
  font-size: 9cqmin;
  font-weight: 800;
  text-shadow: 0 0.5cqmin 2cqmin rgba(0, 0, 0, 0.6);
}
.subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 4cqmin;
  font-weight: 500;
  max-width: 70cqw;
  line-height: 1.4;
  margin-bottom: 2cqmin;
}
.panel--summary {
  justify-content: center;
  gap: 2cqmin;
}
.panel--summary .title {
  font-size: 7cqmin;
}
.panel--summary .subtitle {
  font-size: 3.2cqmin;
  margin-bottom: 0;
}
.recap {
  width: min(78cqw, 92cqmin);
  max-height: 42cqh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1.8cqmin;
  padding: 0.4cqmin 1cqmin 0.4cqmin 0;
  text-align: left;
  scrollbar-color: rgba(255, 255, 255, 0.55) rgba(255, 255, 255, 0.12);
}
.recap-round {
  border-radius: 2cqmin;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  padding: 2cqmin;
  box-shadow: 0 1cqmin 3cqmin rgba(0, 0, 0, 0.25);
}
.recap-round__title {
  font-size: 2.6cqmin;
  line-height: 1.2;
  margin-bottom: 1.4cqmin;
}
.recap-round__label {
  color: rgba(20, 16, 31, 0.68);
  font-size: 1.7cqmin;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}
.recap-round__text {
  font-size: 2.1cqmin;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.recap-round__text + .recap-round__label {
  margin-top: 1.5cqmin;
}
.recap-empty {
  color: rgba(255, 255, 255, 0.86);
  font-size: 3cqmin;
  font-weight: 600;
  text-align: center;
}
.summary-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2cqmin;
}

/* ---- teaching HUD + footer ---- */
.hud {
  position: absolute;
  top: 3cqmin;
  left: 3cqmin;
  right: 3cqmin;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 1.5cqmin;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  color: var(--white);
  font-size: 3.2cqmin;
  font-weight: 700;
  padding: 1.8cqmin 3.2cqmin;
  border-radius: 5cqmin;
}
.badge--live .dot {
  width: 2.2cqmin;
  height: 2.2cqmin;
  border-radius: 50%;
  background: #ff4d4d;
  animation: pulse 1.4s ease-in-out infinite;
}
/* lips scale with the live mic level (--level set on #ui each frame) — this is
   the always-on "your audio is being captured" indicator */
.badge__icon {
  width: 4.2cqmin;
  height: 4.2cqmin;
  object-fit: contain;
  transform: scale(calc(1 + var(--level, 0) * 0.5));
  transition: transform 0.06s linear;
}

/* circular icon button (top-right: end lesson) */
.icon-btn {
  position: absolute;
  top: 3cqmin;
  right: 3cqmin;
  width: 9cqmin;
  height: 9cqmin;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.25cqmin solid var(--white);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background-color 0.15s ease;
}
.icon-btn:hover {
  background: rgba(0, 0, 0, 0.6);
  transform: scale(1.08);
}
.icon-btn:active {
  transform: scale(0.95);
}
.icon-btn__img {
  width: 62%;
  height: 62%;
  object-fit: contain;
  transform: rotate(12deg);
  transition: transform 0.18s ease;
}
.icon-btn:hover .icon-btn__img {
  transform: rotate(22deg) scale(1.15);
}

.footer {
  position: absolute;
  bottom: 4cqmin;
  left: 4cqmin;
  right: 4cqmin;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3cqmin;
}
.footer--center {
  justify-content: center;
}
.footer--end {
  justify-content: flex-end;
}

/* ---- mic gate: blocking "microphone required" modal ---- */
.mic-gate {
  position: absolute;
  inset: 0;
  z-index: 10;
}
.mic-gate .panel {
  background: rgba(8, 6, 16, 0.82);
}

/* ---- ?debug=mic playback box (dev only) ---- */
#mic-debug {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-family: monospace;
  font-size: 12px;
}
#mic-debug audio {
  height: 32px;
}
#mic-debug a {
  color: #ffd640;
}

/* ---- waiting: teacher done, question + voice loading ---- */
.waiting {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ---- asking: neutral question card in the top-left; text types in and the
   card grows to fit as the student "speaks" (no tail — not tied to a student) */
.bubble {
  position: absolute;
  top: 4cqmin;
  left: 4cqmin;
  max-width: 28cqw;
  background: var(--white);
  color: var(--ink);
  border-radius: 2.4cqmin;
  padding: 1.6cqmin 2cqmin;
  box-shadow: 0 1.5cqmin 5cqmin rgba(0, 0, 0, 0.45);
  transform-origin: top left;
  animation: pop 0.2s ease;
}
.bubble__text {
  font-size: 1.6cqmin;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@keyframes pop {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-frame,
  .badge--live .dot,
  .badge__icon,
  .bubble {
    animation: none !important;
    transition: none !important;
  }
}