/* ── RoomIntro 공통 컴포넌트 ──────────────────────────────────
   방에 들어설 때 조작법을 알려주는 안내 패널. 이 패널을 닫는 한 번의 탭이 곧 오디오
   언락 제스처라서, 장식이 아니라 모바일에서 소리를 켜기 위한 필수 관문이다
   (shared/room-intro.js 참고).

   생김새의 원칙: 방을 가리지 않는다. 장막은 방이 그대로 비쳐 보일 만큼만 옅게 깔고,
   그 위에 이 방을 한 문장으로 여는 말과 들어가기 버튼만 둔다. 조작부를 따로 강조하지도,
   화살표로 짚어주지도 않는다 — 강조하는 순간 그게 화면에서 가장 밝은 것이 되어 정작
   읽어야 할 문장이 뒤로 밀린다.

   색/글꼴은 전부 --ri-*로 빼뒀으니 각 방은 자기 :root에서 값만 다시 정의한다.
   기본값은 in-the-dark의 어두운 톤. */

:root {
  --ri-veil: rgba(6, 5, 4, 0.6);
  --ri-font: var(--gh-font, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif);
  --ri-text-shadow: rgba(0, 0, 0, 0.8);
  --ri-line: rgba(255, 236, 190, 0.92);
  --ri-hint: rgba(255, 232, 168, 0.45);
  --ri-btn-bg: rgba(255, 232, 168, 0.92);
  --ri-btn-text: #17130c;
  --ri-btn-idle-bg: rgba(255, 232, 168, 0.14);
  --ri-btn-idle-text: rgba(255, 236, 190, 0.45);
}

/* 층이 셋이다: 장막(900) < 강조된 조작부(각 방이 950) < 문구(960).
   한 엘리먼트 안에 장막과 문구를 같이 담으면 문구가 부모의 z-index를 넘어설 수 없어서,
   장막 위로 끌어올린 조작부가 글자를 덮어버린다. 그래서 둘을 형제로 나눠 놓았다. */
.ri-veil {
  position: absolute;
  inset: 0;
  z-index: 900;
  background: var(--ri-veil);
  opacity: 1;
  transition: opacity 320ms ease;
}

.ri {
  position: absolute;
  inset: 0;
  z-index: 960;
  display: flex;
  /* 문구를 어디에 세울지는 방이 정한다 — 조작부를 가리지 않는 빈자리를 방이 안다. */
  align-items: var(--ri-align, center);
  justify-content: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  font-family: var(--ri-font);
  /* 문구 층은 클릭을 가로채지 않는다 — 실제로 눌러야 하는 건 시작하기 버튼뿐이고,
     나머지 자리는 아래 장막이 막는다. */
  pointer-events: none;
  opacity: 1;
  transition: opacity 320ms ease;
}

.ri.is-leaving,
.ri-veil.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.ri[hidden],
.ri-veil[hidden] {
  display: none;
}

/* 카드가 아니다. 문구는 상자 없이 장막 위에 그대로 얹힌다 — 테두리와 배경을 두르는 순간
   방 위에 앱 UI가 하나 더 올라온 것처럼 보이고, 그 무게가 "잠깐 알려주고 비켜준다"는
   이 화면의 성격과 맞지 않는다. 대신 글자에 옅은 그림자를 깔아, 밝은 종이(end-of-day)
   위에서도 어두운 방(in-the-dark) 위에서도 그대로 읽히게 한다. */
.ri-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 268px;
  text-align: center;
  text-shadow: 0 1px 10px var(--ri-text-shadow, rgba(0, 0, 0, 0.75));
  /* 방마다 화면에서 비어 있는 자리가 다르다 — 글자가 그림의 복잡한 부분 위에 걸치지
     않도록 방이 자기 사정에 맞춰 위아래로 밀어 쓴다. */
  margin-top: var(--ri-shift-y, 0px);
  /* 부모(.ri)가 클릭을 흘려보내므로 실제로 눌러야 하는 이 안쪽만 다시 받는다 */
  pointer-events: auto;
  animation: ri-rise 520ms ease both;
}

/* 글자 뒤에 깔리는 음영. 카드 대신 이걸 쓰는 이유는 가장자리가 없기 때문이다 — 테두리가
   생기는 순간 상자가 되고, 상자가 되면 방 위에 앱 UI가 하나 더 얹힌 것처럼 보인다.
   end-of-day처럼 종이가 밝은 방에서는 이 음영이 없으면 흰 종이 위 흰 글자가 된다. */
.ri-panel::before {
  content: "";
  position: absolute;
  inset: -34px -30px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--ri-text-halo, rgba(0, 0, 0, 0.4)), transparent);
}

/* 소리 안내는 귀엣말 크기로 맨 위에 — 시작하면 그때부터 소리가 나므로 버튼에 손이 가기
   전에 읽혀야 하지만, 읽는 사람에게는 지시가 아니라 곁들이는 한마디로 들려야 한다. */
.ri-sound {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  font-size: 0.72rem;
  line-height: 1.5;
  word-break: keep-all;
  color: var(--ri-hint);
}

.ri-sound svg {
  flex: none;
  width: 14px;
  height: 14px;
}

/* 이 화면에 남은 단 하나의 문장. 조작 설명을 다 걷어내고 이것만 두었으니 그만큼 크고
   또렷하게 — 방 그림 위에 얹혀도 눈이 먼저 여기에 닿아야 한다.
   한국어는 기본적으로 글자 단위로 줄바꿈돼 "그림/들이에요"처럼 단어가 잘리므로
   word-break: keep-all로 어절 단위 줄바꿈을 준다. 글자 크기는 뷰포트가 아니라 고정값이다 —
   폭이 268px로 묶여 있어 vw로 키우면 데스크톱에서만 줄바꿈이 늘어난다. */
.ri-line {
  margin: 0;
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: pre-line;
  word-break: keep-all;
  color: var(--ri-line);
}

/* 버튼도 알약 하나로 가볍게 — 폭을 꽉 채우지 않고 글자만큼만 차지한다.
   다만 최소 폭을 둔다: 기다리는 동안엔 안에 점 셋만 있어서, 그게 없으면 준비가 끝나는
   순간 버튼이 작았다가 갑자기 커진다. */
.ri-enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 40px;
  margin-top: 18px;
  padding: 11px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--ri-btn-bg);
  color: var(--ri-btn-text);
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-shadow: none;
  cursor: pointer;
  transition: background 240ms ease, color 240ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.ri-enter:active {
  transform: scale(0.97);
}

/* 소리가 아직 도착하지 않은 동안: 버튼 자리를 그대로 둔 채 잠긴 상태로만 바꾼다
   (자리를 비웠다가 채우면 화면이 덜컥거리고, 그 순간 오조작으로 눌리기도 한다). */
.ri-enter[disabled] {
  background: var(--ri-btn-idle-bg);
  color: var(--ri-btn-idle-text);
  cursor: default;
}

/* 기다리는 동안엔 "준비하는 중" 같은 글자 대신 점 셋이 차례로 부풀었다 가라앉는다
   (iMessage의 상대방 입력 중 표시와 같은 문법) — 읽어야 할 글자가 하나 줄고,
   무엇을 기다리는지 설명하지 않아도 "곧 온다"는 것만 전해진다. */
.ri-dots {
  display: none;
  align-items: center;
  gap: 5px;
}

.ri:not(.is-ready) .ri-dots {
  display: inline-flex;
}

.ri-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: ri-typing 1.35s ease-in-out infinite;
}

.ri-dots i:nth-child(2) { animation-delay: 0.18s; }
.ri-dots i:nth-child(3) { animation-delay: 0.36s; }

@keyframes ri-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ri-typing {
  0%, 55%, 100% { transform: translateY(0) scale(0.86); opacity: 0.4; }
  25% { transform: translateY(-3px) scale(1); opacity: 1; }
}

@keyframes ri-typing-fade {
  0%, 55%, 100% { opacity: 0.4; }
  25% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ri,
  .ri-veil,
  .ri-enter {
    transition: none;
  }

  .ri-panel {
    animation: none;
  }

  /* 점 셋은 남긴다 — 이게 없으면 기다리는 중이라는 걸 알 방법이 사라진다.
     대신 움직임 없이 밝기만 번갈아 바뀐다. */
  .ri-dots i {
    animation-name: ri-typing-fade;
  }
}