/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
* { word-break: keep-all; -webkit-tap-highlight-color: transparent; }
html {
  background: var(--ink);
  overflow: hidden;
  height: 100%;
}
body {
  font-family: 'Pretendard', system-ui, sans-serif;
  font-size: 16px;
  color: #fafafa;
  background: #050505;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  height: 100%;
}
.num { font-family: 'Space Grotesk', sans-serif; font-feature-settings: 'tnum'; }

/* ═══════════════════════════════════════
   APP SHELL
═══════════════════════════════════════ */
#app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  background: inherit;
}

/* ═══════════════════════════════════════
   SCREEN SYSTEM
═══════════════════════════════════════ */
.screen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  max-width: 430px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: transparent;
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--spring), transform .45s var(--spring);
  transform: translateX(32px);
}
.screen.active {
  opacity: 1; pointer-events: all;
  transform: translateX(0);
}
.screen.exit-left { opacity: 0; transform: translateX(-24px); }

.scroll-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.scroll-body::-webkit-scrollbar { display: none; }

/* ── 고정 배경 (팀 컬러 orb — 스크롤해도 제자리) ── */
#game-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ── 전역 타이틀바 (섹션 바뀔 때 제목만 교체) ── */
#game-titlebar {
  position: fixed;
  top: 0; left: 0; right: 0;
  max-width: 430px;
  margin: 0 auto;
  z-index: 100;
  height: calc(44px + var(--safe-top));
  padding-top: var(--safe-top);
  display: none;
  align-items: center;
  padding-left: 18px;
  padding-right: 18px;
  background: rgba(5,5,5,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  pointer-events: none;
}
#game-titlebar-text {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
}
#game-titlebar-text.title-exit {
  animation: title-exit .18s ease forwards;
}
#game-titlebar-text.title-enter {
  animation: title-enter .18s ease forwards;
}

/* ── 게임 컨테이너 (scroll-snap 풀스크린) ── */
.game-wrap {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
}
.game-section {
  flex-shrink: 0;
  height: 100dvh; /* standalone PWA에서 = screen.height = 스크롤포트, 하단 gap 제거 */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.game-section .scroll-body {
  position: relative;
  overscroll-behavior-y: contain;
}

/* ── 게임 섹션 orb 배경 (name 화면과 동일 스타일) ── */
.game-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.game-orb-a {
  position: absolute;
  top: -18%; left: -20%;
  width: 70%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.22) 0%, transparent 70%);
  filter: blur(40px);
  animation: orb-drift-a 12s ease-in-out infinite alternate;
}
.game-orb-b {
  position: absolute;
  top: 5%; right: -22%;
  width: 65%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192,132,252,.18) 0%, transparent 70%);
  filter: blur(40px);
  animation: orb-drift-b 14s ease-in-out infinite alternate;
}

/* ── ambient mesh ── */
.mesh-pacer {
  background:
    radial-gradient(60% 45% at 15% 5%, rgba(56,189,248,.14), transparent 55%),
    radial-gradient(50% 50% at 90% -5%, rgba(125,211,252,.07), transparent 50%),
    radial-gradient(70% 60% at 50% 100%, rgba(14,165,233,.06), transparent 60%);
}
.mesh-ghost {
  background:
    radial-gradient(60% 45% at 15% 5%, rgba(192,132,252,.16), transparent 55%),
    radial-gradient(50% 50% at 90% -5%, rgba(168,85,247,.08), transparent 50%),
    radial-gradient(70% 60% at 50% 100%, rgba(139,92,246,.06), transparent 60%);
}
.mesh-neutral {
  background:
    radial-gradient(60% 45% at 15% 5%, rgba(113,113,122,.10), transparent 55%);
}


/* ── noise grain ── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 999;
  pointer-events: none; opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════
   SAFE AREA HELPERS
═══════════════════════════════════════ */
.pt-safe { padding-top: calc(var(--safe-top) + 54px); }
.pb-safe { padding-bottom: 36px; }
/* 관리앱 패턴: 하단 safe-area를 더하지 않고 고정값 — 콘텐츠가 인디케이터까지 자연스럽게 확장 */
.pb-tab  { padding-bottom: 0; }

/* ── 하단 그라데이션 블러 (인스타 스타일 자연스러운 페이드 엣지) ── */
.bottom-fade-blur {
  position: fixed; bottom: calc(-1 * env(safe-area-inset-bottom, 0px)); left: 0; right: 0; z-index: 10;
  height: calc(24px + env(safe-area-inset-bottom, 0px));
  background: transparent;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, black 0%, black var(--safe-bottom), transparent 100%);
          mask-image: linear-gradient(to top, black 0%, black var(--safe-bottom), transparent 100%);
}