/* GriGsi Prompter — teleprompter that follows your voice */
.pr-hero-note { opacity: .92; max-width: 52em; margin: 8px auto 0; line-height: 1.55; }

.pr-wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px 48px; }

.pr-layout {
  display: flex;
  gap: 18px;
  align-items: stretch;
  height: calc(100vh - 230px);
  min-height: 480px;
}

.pr-card {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  padding: 16px 18px 20px;
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.pr-card h2 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: rgba(255,255,255,.96);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pr-card h2 i { color: var(--liquid-accent-1, #FFC64B); }

.pr-controls {
  width: 340px;
  min-width: 300px;
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.pr-script-input {
  width: 100%;
  height: 130px;
  min-height: 110px;
  max-height: 50vh;
  flex-shrink: 0;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  color: rgba(255,255,255,.95);
  padding: 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  overflow-y: auto;
}

.pr-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  margin-bottom: 6px;
}

.pr-mic-select,
#pr-lang-select,
#pr-mic-select {
  width: 100%;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  color: rgba(255,255,255,.95);
  padding: 8px 10px;
  font-size: 0.9rem;
  font-family: inherit;
}

.pr-slider-row { display: flex; align-items: center; gap: 10px; }
.pr-slider-row input[type="range"] { flex: 1; }
.pr-slider-val { font-size: 0.8rem; color: rgba(255,255,255,.7); width: 50px; text-align: right; }

.pr-align-row { display: flex; gap: 8px; }

.pr-btn {
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s;
  flex: 1;
}
.pr-btn:hover { opacity: .9; }
.pr-btn--start { background: var(--liquid-accent-1, #FFC64B); color: #1a1a1a; }
.pr-btn--stop { background: rgba(255,255,255,.1); color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.22); }
.pr-btn--reset { background: transparent; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.22); width: 100%; }

.pr-row { display: flex; gap: 10px; }

.pr-align-btn {
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.22);
  font-size: 0.85rem;
}
.pr-align-btn.is-active {
  background: rgba(255,198,75,.18);
  color: var(--liquid-accent-1, #FFC64B);
  border-color: var(--liquid-accent-1, #FFC64B);
}

.pr-status {
  font-size: 0.8rem;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.75);
  min-height: 20px;
}
.pr-status.is-live { color: #4caf82; border-color: #4caf82; }

.pr-note {
  font-size: 0.78rem;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 10px;
}
.pr-note b { color: rgba(255,255,255,.95); }

.pr-stage {
  flex: 1;
  min-width: 0;
  display: flex;
  padding: 0;
  overflow: hidden;
}

.pr-prompter-wrap {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background: #0b0c0f;
  border-radius: 16px;
}
.pr-prompter-wrap::before,
.pr-prompter-wrap::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  z-index: 2;
  pointer-events: none;
}
.pr-prompter-wrap::before { top: 0; background: linear-gradient(to bottom, #0b0c0f, transparent); }
.pr-prompter-wrap::after { bottom: 0; background: linear-gradient(to top, #0b0c0f, transparent); }

.pr-reading-line { display: none; }

#pr-prompter-text {
  position: relative;
  z-index: 3;
  padding: 14vh 48px 45vh;
  text-align: center;
  line-height: 1.55;
  color: #eef0f3;
}
#pr-prompter-text .pr-word { cursor: pointer; }
#pr-prompter-text .pr-word.is-read { color: #3a3f4a; }
#pr-prompter-text .pr-word.is-active {
  color: var(--liquid-accent-1, #FFC64B);
  background: rgba(255,198,75,.14);
  border-radius: 4px;
  padding: 0 2px;
}
.pr-placeholder {
  color: rgba(255,255,255,.4);
  text-align: center;
  display: block;
  padding-top: 12vh;
  font-size: 15px;
}

@media (max-width: 860px) {
  .pr-layout { flex-direction: column; height: auto; }
  .pr-controls { width: 100%; flex: 0 0 auto; max-height: 50vh; }
  .pr-stage { height: 60vh; }
}

/* ---------- share: phone as microphone / show on another screen ---------- */
.pr-share-field { border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; }
.pr-note-small { font-size: 0.76rem; color: rgba(255,255,255,.65); line-height: 1.5; margin: 0 0 8px; }
.pr-btn--small { flex: 0 0 auto; padding: 7px 12px; font-size: 0.8rem; }
.pr-btn--ghost { background: transparent; color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.22); }

.pr-share { display: flex; gap: 12px; align-items: flex-start; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 10px; }
.pr-share__qr { background: #fff; padding: 6px; border-radius: 8px; line-height: 0; flex: 0 0 auto; }
.pr-share__qr img, .pr-share__qr canvas { display: block; width: 88px; height: 88px; }
.pr-share__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.pr-share__code { font-size: 1.2rem; font-weight: 700; letter-spacing: .12em; color: var(--liquid-accent-1, #FFC64B); }
.pr-share__row { display: flex; gap: 6px; }
.pr-share__row input {
  flex: 1;
  min-width: 0;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  color: rgba(255,255,255,.9);
  padding: 6px 8px;
  font-size: 0.78rem;
}

/* ---------- phone-mic page (prompter-mic.html) ---------- */
body.pr-mic-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0c0f;
  color: #eef0f3;
  font-family: "Inter", system-ui, sans-serif;
  padding: 24px;
}
.pr-mic-wrap { max-width: 420px; width: 100%; text-align: center; }
.pr-mic-title { font-size: 1.4rem; margin: 0 0 6px; }
.pr-mic-sub { opacity: .75; font-size: 0.92rem; margin: 0 0 18px; line-height: 1.5; }
.pr-mic-lang {
  width: 100%;
  margin-bottom: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  color: #eef0f3;
  padding: 10px;
  font-size: 1rem;
}
.pr-mic-btn {
  width: 100%;
  border: none;
  border-radius: 16px;
  padding: 28px 16px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a1a1a;
  background: var(--liquid-accent-1, #FFC64B);
  cursor: pointer;
}
.pr-mic-btn.is-live { background: #4caf82; color: #06150e; }
.pr-mic-status { margin-top: 16px; font-size: 0.88rem; opacity: .8; line-height: 1.5; min-height: 22px; }

/* ---------- remote-screen page (prompter-screen.html) ---------- */
/* Same font stack as the control page's body (website/style.css) — a different font here would
   wrap words at a different width even at the "same" proportional font size. */
body.pr-screen-page {
  margin: 0;
  background: #0b0c0f;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}
.pr-screen-wrap { position: fixed; inset: 0; border-radius: 0; }
.pr-screen-wrap #pr-prompter-text { font-size: 48px; }
.pr-screen-status {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  text-align: center;
  padding: 8px 16px;
  font-size: 0.8rem;
  color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.4);
  pointer-events: none;
}
.pr-screen-status:empty { display: none; }