/* OBS 브라우저 소스용 방송 화면. 배경은 투명, 카드는 화면 아래 가운데 (OBS에서 위치·크기를 옮기면 된다). */
html:has(body.is-overlay),
body.is-overlay { background: transparent; }
body.is-overlay { min-height: 100vh; overflow: hidden; }
body.is-overlay.is-preview { background: repeating-conic-gradient(#d9dee5 0% 25%, #eef1f5 0% 50%) 50% / 32px 32px; }

.ov {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 24px 48px;
  pointer-events: none;
}
.ov__stage { width: min(980px, 100%); display: grid; }
.ov__screen { display: grid; place-items: center; }
.ov__screen.is-in { animation: ov-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
@keyframes ov-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* 방송에서 작게 보여도 읽히게: 선택지·질문은 굵은 글꼴로 크게, 칸 테두리는 진하게 */
.ov .card__title { font-size: 42px; }
.ov .vs__side { border-width: 3px; border-color: var(--sky-300); background: var(--sky-50); }
.ov .vs__side p { font-family: var(--font-head); font-size: 36px; line-height: 1.3; color: var(--ink); }
.ov .vs__label { transform: scale(1.2); }
.ov .card__tag,
.ov .card__balloon { font-size: 19px; }
.ov .vote__hint { font-size: 20px; color: var(--ink); }
.ov .vs__count { font-size: 20px; }

/* 어떤 방송 배경 위에서도 보이게 그림자를 진하게 */
.ov .card { width: 100%; border-color: var(--sky-300); box-shadow: 0 18px 50px rgba(20, 60, 100, 0.32); }

/* 조작용 요소는 방송에 안 보이게 */
.ov .card__actions,
.ov .fortune__form,
.ov .fortune__hint,
.ov .card__empty,
.ov .vote__hint.is-error { display: none !important; }

/* 미리보기에서만: 카드가 없을 때 이유 (OBS 화면에는 안 나온다) */
.ov__empty {
  margin: 0 0 40px;
  max-width: 720px;
  padding: 18px 28px;
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.92);
  border: 3px dashed var(--sky-300);
  border-radius: 20px;
  word-break: keep-all;
}

@media (prefers-reduced-motion: reduce) {
  .ov__screen.is-in { animation: none !important; }
}

/* ---------- 방송 화면 운세: 조작 화면 카드를 그대로 쓰지 않고 작게 (밸런스·토크 카드 정도) ---------- */
.ov [data-screen='fortune'] .card { width: min(760px, 100%); padding: 26px 30px 24px; gap: 10px; }
.ov .card--fortune .card__title { font-size: 34px; }
.ov .card--fortune .fortune-result { gap: 10px; }
.ov .card--fortune .grade-stamp { width: 64px; height: 64px; font-size: 20px; top: -10px; right: -6px; }
.ov .card--fortune .stars { font-size: 26px; }
/* 따스히 운세: 총운 한 줄 + 세부운 세 칸을 나란히 + 용돈 줄. 한마디는 뺀다 */
.ov .card--fortune .fortune__overall { font-size: 21px; line-height: 1.45; }
.ov .card--fortune .fortune__advice { display: none; }
.ov .card--fortune .fortune__rows { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ov .card--fortune .fortune__rows > div { grid-template-columns: 1fr; gap: 4px; padding: 10px 12px; align-content: start; text-align: center; }
.ov .card--fortune .fortune__rows dt { align-items: center; font-size: 17px; }
.ov .card--fortune .fortune__rows dd { font-size: 16px; line-height: 1.4; }
.ov .card--fortune .fortune__lucky li { font-size: 16px; padding: 4px 12px; }
/* 시청자 운세: 한마디 + 네 항목 2×2. 총운 문단·날짜는 뺀다 */
.ov .card--fortune .fv__date,
.ov .card--fortune .fv__overall { display: none; }
.ov .card--fortune .fv__headline { font-size: 26px; margin: 0; }
.ov .card--fortune .fv__rows { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ov .card--fortune .fv__rows > div { grid-template-columns: 1fr; gap: 4px; padding: 8px 12px; text-align: left; }
.ov .card--fortune .fv__rows dd { font-size: 16px; line-height: 1.4; }
/* 뽑기 연출(통 흔들기)도 작게 */
.ov .card--fortune .omikuji { transform: scale(0.8); margin: -14px 0 -2px; }
.ov .card--fortune .fortune-draw__sub { margin-top: 6px; }

/* ---------- 방송 화면 퀴즈: 밸런스·토크 카드 크기, 글씨는 굵고 크게 ---------- */
.ov [data-screen='quiz'] .card { width: min(860px, 100%); padding: 30px 34px 28px; gap: 12px; }
.ov .card--quiz .quiz__q { font-family: var(--font-head); font-size: 38px; line-height: 1.35; }
.ov .card--quiz .choice { font-size: 24px; pointer-events: none; }
.ov .card--quiz .quiz__hint,
.ov .card--quiz .quiz__note { font-size: 20px; color: var(--ink); }
.ov .card--quiz .quiz__answer { font-size: 34px; }
.ov .card__corner { font-size: 18px; }
/* 방송 화면 퀴즈: 비어 있는 힌트·해설 줄은 자리도 차지하지 않게 */
.ov .card--quiz .quiz__hint:empty,
.ov .card--quiz .quiz__note:empty { display: none; }
/* 따스히의 선택: 방송 화면에서도 테두리를 진하게 (위 .ov .vs__side 규칙보다 뒤에) */
.ov .vs__side.is-chosen { border-width: 5px; border-color: var(--sky-500); background: var(--sky-100); }