:root {
  --bg: #1d2433;
  --surface: #f7f7f2;
  --surface-2: #ffffff;
  --ink: #20242c;
  --ink-soft: #5c6470;
  --accent: #d7263d;
  --accent-soft: #fbe3e6;
  --ok: #1f8a52;
  --ok-soft: #e2f3e9;
  --line: #e3e3da;
  --radius: 16px;
  --gap: clamp(10px, 2.2vmin, 22px);
  --pad: clamp(14px, 3vmin, 30px);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* Atrybut hidden musi wygrywać z regułami display:flex/grid (.loader, .voice-row, .screen…),
   inaczej style autora nadpisują UA [hidden]{display:none} i element zostaje widoczny. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  /* Bez przewijania całej strony — przewija się tylko treść wewnątrz sceny. */
  overflow: hidden;
}

/* === Rotacja / ratio ===
   Landscape: scena = 16:9, max do okna, wyśrodkowana (letterbox).
   Portrait : scena = 9:16. Ta sama treść, inny układ. */
.stage {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  padding: var(--gap);
  background: var(--surface);
  overflow: hidden;
  /* 16:9 wpisane w okno */
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  border-radius: clamp(0px, 1.6vmin, 22px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

@media (orientation: portrait) {
  .stage {
    flex-direction: column;
    /* 9:16 wpisane w okno */
    width: min(100vw, calc(100vh * 9 / 16));
    height: min(100vh, calc(100vw * 16 / 9));
  }
}

/* === Panel nauczyciela === */
.teacher {
  position: relative; /* kotwica dla dymka-warstwy na dole ramki */
  flex: 0 0 36%;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--pad);
  background: var(--teacher-bg, #dce8e1);
  border-radius: var(--radius);
  min-height: 0;
}

@media (orientation: portrait) {
  .teacher {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  /* W pionie dymek wraca do normalnego flow (pełna szerokość pod awatarem). */
  .teacher .speech-bubble {
    position: static;
    flex-basis: 100%;
    max-height: 40vh;
  }
}

.teacher-avatar {
  width: clamp(48px, 9vmin, 96px);
  height: clamp(48px, 9vmin, 96px);
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: clamp(20px, 4vmin, 40px);
  font-weight: 700;
  flex: 0 0 auto;
}

.teacher-meta { min-width: 0; }
.teacher-name { margin: 0; font-size: clamp(16px, 2.6vmin, 24px); font-weight: 700; }
.teacher-tagline { margin: 2px 0 0; color: var(--ink-soft); font-size: clamp(11px, 1.7vmin, 15px); }

/* Dymek nauczyciela = warstwa zakotwiczona na dole ramki avatara (nad nim).
   Mieści instrukcje i feedback; przewija się, gdy treść dłuższa. */
.speech-bubble {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: var(--pad);
  z-index: 2;
  max-height: 65%;
  overflow-y: auto;
  background: var(--surface-2);
  border-radius: 14px;
  padding: clamp(10px, 1.8vmin, 16px);
  font-size: clamp(13px, 2vmin, 18px);
  line-height: 1.4;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}
.speech-bubble[data-ok="true"] { background: var(--ok-soft); color: var(--ok); }
.speech-bubble[data-ok="false"] { background: var(--accent-soft); color: var(--accent); }
.speech-bubble ul { margin: 6px 0 0; padding-left: 18px; }
.speech-bubble li { margin: 3px 0; }
.speech-bubble .pron-note { margin: 8px 0 0; }

/* === Panel treści === */
.content {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: var(--pad);
  overflow-y: auto;
}

.screen { display: none; flex-direction: column; gap: var(--gap); }
.screen[data-active="true"] { display: flex; }

.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(10px, 1.5vmin, 13px);
  color: var(--accent);
  font-weight: 700;
}
.screen-title { margin: 0; font-size: clamp(20px, 3.4vmin, 32px); }
.activity-title { margin: 0; font-size: clamp(18px, 3vmin, 28px); }
.activity-instruction { margin: 0; color: var(--ink-soft); font-size: clamp(13px, 2vmin, 18px); line-height: 1.45; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: clamp(12px, 1.8vmin, 15px); font-weight: 600; border: 0; padding: 0; margin: 0; }
.field legend { padding: 0; margin-bottom: 6px; font-weight: 600; }

select, textarea {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  resize: none;
}
select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font: inherit; font-weight: 700;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
}
.chip[data-selected="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }

button.primary {
  font: inherit; font-weight: 700;
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
button.primary:disabled { opacity: 0.5; cursor: default; }
button.ghost { font: inherit; border: 0; background: none; color: var(--ink-soft); cursor: pointer; padding: 6px 0; }

.activity-target {
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: clamp(10px, 1.8vmin, 16px);
  font-size: clamp(18px, 3vmin, 28px);
  font-weight: 700;
}
.activity-support { white-space: pre-line; color: var(--ink); font-size: clamp(13px, 2vmin, 17px); line-height: 1.5; }
.activity-support ul { margin: 0; padding-left: 18px; }
.activity-support li { margin: 4px 0; }

.lesson-topbar { display: flex; align-items: center; gap: var(--gap); }
.progress { flex: 1 1 auto; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.25s ease; }
.step-counter { font-size: clamp(11px, 1.6vmin, 14px); color: var(--ink-soft); font-weight: 700; }

.lesson-actions { display: flex; gap: 10px; margin-top: auto; }
.lesson-actions .primary { flex: 1 1 auto; }

.voice-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.record-btn {
  font: inherit; font-weight: 700;
  padding: 10px 16px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--accent);
  cursor: pointer;
  /* Push-to-talk na przytrzymanie: blokujemy zaznaczanie i gesty dotyku. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.record-btn:disabled { opacity: 0.6; cursor: default; }
.record-btn[data-state="processing"] { background: var(--line); color: var(--ink-soft); border-color: var(--line); }
.record-btn[data-recording="true"] {
  background: var(--accent);
  color: #fff;
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(215,38,61,0.45); } 50% { box-shadow: 0 0 0 8px rgba(215,38,61,0); } }
.voice-status { font-size: clamp(11px, 1.7vmin, 14px); color: var(--ink-soft); flex: 1 1 160px; }

.feedback { border-radius: 10px; padding: 12px; font-size: clamp(12px, 1.9vmin, 16px); line-height: 1.45; }
.feedback[data-ok="true"] { background: var(--ok-soft); color: var(--ok); }
.feedback[data-ok="false"] { background: var(--accent-soft); color: var(--accent); }
.feedback ul { margin: 6px 0 0; padding-left: 18px; }
.feedback .pron-note { margin: 8px 0 0; }

.review-summary { margin: 0; color: var(--ink-soft); line-height: 1.5; font-size: clamp(13px, 2vmin, 17px); }
.review-blocks { display: flex; flex-direction: column; gap: var(--gap); }
.review-block h3 { margin: 0 0 6px; font-size: clamp(14px, 2.2vmin, 19px); }
.review-block ul { margin: 0; padding-left: 18px; }
.review-block li { margin: 3px 0; font-size: clamp(12px, 1.9vmin, 16px); line-height: 1.4; }
.review-block .pl { font-weight: 700; }
.review-block .es { color: var(--ink-soft); }

.form-error { color: var(--accent); font-weight: 600; margin: 0; }

.loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.75);
  font-weight: 700;
  color: var(--ink-soft);
}
.spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }