/* 플레이 환경 안내: 터치 전용 기기의 PC 안내 화면과 작은 창 안내. 로딩 화면과 같은 청록 톤. */
.play-gate {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); overflow-y: auto;
  background: radial-gradient(ellipse at 50% 38%, #28434a 0, #14252d 42%, #0c171f 85%);
  color: var(--entry-text); font-family: 'Jua', sans-serif; text-align: center; word-break: keep-all;
}
.play-gate > * { flex-shrink: 0; }
.mobile-gate-portrait {
  display: block; width: clamp(140px, 30dvh, 240px); max-width: 70vw; height: auto; margin-bottom: 8px;
}
.mobile-gate-brand { margin: 0 0 16px; font-size: 40px; line-height: 1.15; letter-spacing: -2px; text-shadow: 0 4px #08171f; }
.mobile-gate-brand span { color: var(--entry-green); }
#mobile-gate-title, #small-screen-title { margin: 0 0 12px; color: #f0b2a8; font-size: 28px; font-weight: 400; line-height: 1.3; }
.mobile-gate-detail { max-width: 340px; margin: 0 0 28px; color: var(--entry-muted); font: 15px/1.7 sans-serif; }
#mobile-gate-copy {
  width: min(320px, 100%); min-height: 56px; padding: 12px 24px; border: 0; border-radius: 16px;
  background: var(--entry-green); color: #26362c; font: 22px/1 'Jua', sans-serif; cursor: pointer;
}
/* 세로 화면: 안내는 가운데, CTA 는 화면 하단에 붙인다 */
@media (orientation: portrait) {
  #mobile-gate { justify-content: flex-start; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  #mobile-gate .mobile-gate-portrait { margin-top: auto; }
  #mobile-gate-copy { width: min(480px, 100%); min-height: 60px; margin-top: auto; }
}
#mobile-gate-copy:active { background: #a9d48e; }
#mobile-gate-copy:focus-visible { outline: 3px solid var(--entry-text); outline-offset: 3px; }
#mobile-gate-status { min-height: 1.6em; margin: 0 0 12px; color: var(--entry-green); font: 14px/1.6 sans-serif; }
@media (max-height: 480px) {
  .mobile-gate-portrait { width: 96px; margin-bottom: 0; }
  .mobile-gate-brand { margin-bottom: 8px; font-size: 30px; }
  #mobile-gate-title, #small-screen-title { margin-bottom: 6px; font-size: 24px; }
  .mobile-gate-detail { max-width: none; margin-bottom: 16px; }
}

#small-screen-gate { width: auto; max-width: none; height: auto; max-height: none; margin: 0; border: 0; }
#small-screen-gate:not([open]) { display: none; }
#small-screen-gate::backdrop { background: #0c171f; }