/* 참가자 화면 — 휴대폰 세로. 네 겹: 영상 · 무대 · 자막 · 입력창. */
html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body > main {
  display: none;
}

body[data-view='entry'] #entry,
body[data-view='loading'] #entry,
body[data-view='queue'] #queue,
body[data-view='replaced'] #replaced {
  display: flex;
}

body[data-view='room'] #room {
  display: flex;
}

/* ───────── 입장 · 대기 줄 ───────── */
.entry {
  flex-direction: column;
  justify-content: space-between;
  height: var(--vvh, 100dvh);
  padding: calc(20px + env(safe-area-inset-top)) var(--gutter) calc(24px + env(safe-area-inset-bottom));
  max-width: 560px;
  margin: 0 auto;
}

.cue {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}

.cue .dot.is-on + span,
.question .cue {
  color: var(--live-ink);
}

.entry h1 {
  font-size: clamp(40px, 6.2dvh, 56px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.facts {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-2);
}

.facts li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.entry-go {
  width: 100%;
  min-height: 60px;
  margin-top: 32px;
  font-size: 20px;
  font-weight: 700;
  border-radius: 16px;
}

.fine {
  margin-top: 14px;
  font-size: 15px;
  color: var(--text-2);
}

.queue-pos {
  margin-top: 24px;
  font-size: 22px;
  font-weight: 600;
}

.queue-pos b {
  font-size: 56px;
  line-height: 1;
  margin: 0 4px;
}

/* ───────── 방 ───────── */
.room {
  flex-direction: column;
  height: var(--vvh, 100dvh);
  max-width: 560px;
  margin: 0 auto;
  padding-top: env(safe-area-inset-top);
}

.top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 8px 0 var(--gutter);
}

.room-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}

.on {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
}

.on b {
  font-size: 20px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}

.chip svg,
.send svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chip[aria-pressed='true'] {
  background: var(--live-tint);
  color: var(--live-ink);
  box-shadow: inset 0 0 0 1px var(--live-edge);
}

.link-note {
  padding: 8px var(--gutter);
  font-size: 15px;
  color: var(--warn-ink);
  background: var(--warn-tint);
}

/* 영상 — 가장자리까지. 영상이 없을 때는 같은 자리에 한 줄 안내. */
.video {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 9;
  max-height: calc(var(--vvh, 100dvh) * 0.34);
  width: 100%;
  background: #000;
  overflow: hidden;
}

.video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.video-note {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #9b988f;
  font-size: 15px;
  text-align: center;
}

.video[data-state='playing'] .video-note {
  display: none;
}

.video[data-state='idle'] video,
.video[data-state='connecting'] video,
.video[data-state='full'] video,
.video[data-state='failed'] video {
  visibility: hidden;
}

/* 소리만 듣기: 영상 자리를 한 줄로 접어 무대에 자리를 내준다. */
body[data-audio-only='1'] .video {
  aspect-ratio: auto;
  height: 48px;
  background: var(--surface);
}

body[data-audio-only='1'] .video video {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

body[data-audio-only='1'] .video-note {
  display: flex;
  flex-direction: row;
  color: var(--text-2);
}

/* 무대 */
.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wait-note,
.end-note {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
}

body[data-scene='wait'] .wait-note,
body[data-scene='end'] .end-note {
  display: flex;
}

.question {
  position: absolute;
  top: 14px;
  left: var(--gutter);
  right: var(--gutter);
  visibility: hidden;
  transform-origin: 50% 0;
  will-change: transform, opacity;
}

body[data-scene='reveal'] .question,
body[data-scene='answer'] .question,
body[data-scene='done'] .question {
  visibility: visible;
}

.question-text {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.question[data-size='m'] .question-text {
  font-size: 25px;
}

.question[data-size='s'] .question-text {
  font-size: 21px;
  line-height: 1.3;
}

.done-mark {
  position: absolute;
  top: 18px;
  left: var(--gutter);
  right: var(--gutter);
  visibility: hidden;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  will-change: transform, opacity;
}

body[data-scene='done'] .done-mark {
  visibility: visible;
}

.count {
  position: absolute;
  left: var(--gutter);
  bottom: 10px;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.2;
}

.count b {
  font-size: 28px;
  color: var(--text);
}

body[data-scene='wait'] .count,
body[data-scene='end'] .count {
  display: none;
}

/* 자막 — 두 줄을 유지한다. 윗줄은 방금 확정된 문장, 아랫줄은 지금 말하는 중인 문장. */
.caption {
  padding: 8px var(--gutter) 10px;
  border-top: 1px solid var(--line);
  min-height: 66px;
}

.caption[data-state='off'] {
  display: none;
}

.cap-line {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  min-height: 25px;
}

.cap-line span {
  flex: none;
}

/* 한 줄을 넘치면 방금 한 말(끝쪽)이 보이도록 오른쪽에 붙이고, 왼쪽은 흐리게 지운다. */
.cap-line.is-over {
  justify-content: flex-end;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px);
  mask-image: linear-gradient(to right, transparent, #000 28px);
}

.cap-final {
  font-size: 16px;
  color: var(--text-2);
}

.cap-now {
  font-size: 18px;
  font-weight: 600;
}

.cap-paused {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  font-size: 15px;
  color: var(--text-2);
}

.caption[data-state='paused'] .cap-line {
  display: none;
}

.caption[data-state='paused'] .cap-paused {
  display: flex;
}

/* 입력창 */
.composer {
  padding: 6px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-radius: 22px 22px 0 0;
}

.composer-note {
  min-height: 22px;
  font-size: 15px;
  color: var(--text-2);
}

.composer-note.is-warn {
  color: var(--warn-ink);
}

.composer-row {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.composer input {
  width: 100%;
  height: 52px;
  padding: 0 58px 0 14px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 17px;
}

.composer input::placeholder {
  color: var(--text-2);
}

.composer input:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--text);
}

.counter {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--text-2);
  pointer-events: none;
}

.send {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--text);
  color: var(--bg);
  display: grid;
  place-items: center;
}

.send:disabled {
  background: var(--surface-2);
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

.send-wait {
  position: absolute;
  font-size: 24px;
}

.send.is-cooling svg {
  visibility: hidden;
}

.send:not(.is-cooling) .send-wait {
  display: none;
}

body[data-preview='1'] .composer {
  display: none;
}

.noscript {
  padding: 24px;
}

/* 낮은 화면(작은 휴대폰 · 자판이 올라온 때): 배치만 좁힌다. 글자는 줄이지 않는다. */
@media (max-height: 600px) {
  .top {
    min-height: 44px;
  }
  .video {
    max-height: calc(var(--vvh, 100dvh) * 0.26);
  }
  .caption {
    min-height: 58px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .question-text {
    font-size: 24px;
  }
  .done-mark {
    font-size: 32px;
  }
}

@media (max-height: 420px) {
  .video {
    display: none;
  }
}