/* 게임 페이지 (한·영 공용). 크레딧 세계 그대로, 한 게임의 크레딧 카드를 한 페이지로 펼친다. */
[hidden] { display: none !important; }

/* ── 첫 화면: 제목 → 장면 ───────────────────────── */
.card {
  min-height: 100svh;
  display: grid; align-content: center; justify-items: center; text-align: center;
  padding: 80px var(--gutter) 64px;
}
.card > * { animation: rise 1400ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 260ms + 200ms); }
@keyframes rise { from { transform: translateY(14px); filter: blur(6px); } to { transform: none; filter: none; } }
.card h1 {
  margin: 0 0 12px; text-wrap: balance;
  font: 900 clamp(40px, min(5.6vw, 9svh), 88px)/1 var(--f-latin); font-stretch: 125%; letter-spacing: -0.02em;
}
.card .tag { margin: 0 0 20px; font-size: clamp(17px, 1.6vw, 20px); color: var(--role); }
/* 장면이 첫 화면을 이끈다: 높이에 맞추되 화면 폭의 76% 아래로는 줄지 않는다. */
.card .still { width: min(1180px, 100%, max(calc((100svh - 340px) * 16 / 9), 76vw)); margin: 0; }
.card .go { margin-bottom: 24px; }
/* 낮은 화면에선 높이를 잘라 하늘을 덜어낸다: 호수와 여행자, 캡션이 하단 줄 위 첫 화면 안에 남는다 */
.card .frames img { max-height: max(240px, calc(100svh - 316px - min(5.6vw, 9svh))); object-fit: cover; object-position: 50% 75%; }

/* 알약 버튼: 바깥선만, 머물 땐 색 없음 */
.go { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 36px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  background: none; color: var(--credit); border: 1px solid var(--role); border-radius: 999px;
  font: 600 14px/1 var(--f-body); text-decoration: none; cursor: pointer;
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.pill.main { border-color: var(--credit); }
.pill:hover { border-color: var(--willow); color: var(--willow); }
.pill svg { width: 11px; height: 11px; flex: none; }

/* ── 장면 스틸: 실제 게임 화면이 같은 자리에서 겹쳐 바뀐다 ───────────────────────── */
.frames { display: grid; }
.frames img {
  grid-row: 1; grid-column: 1; width: 100%; height: auto; aspect-ratio: 16 / 9;
  opacity: 0; transition: opacity 1400ms var(--ease-out);
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, var(--screen) 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, var(--screen) 62%, transparent 100%);
}
.frames img.on { opacity: 1; }
.still figcaption { margin-top: 10px; }

/* ── 크레딧 블록 ───────────────────────── */
.block { padding: 22vh var(--gutter) 0; max-width: 820px; margin: 0 auto; text-align: center; }
.block h2 { text-wrap: balance; margin: 0 0 48px; font: 400 clamp(34px, 4.6vw, 56px)/1.1 var(--f-display); }
.block .still { margin: 0 0 40px; }
.block .lede { margin: -28px auto 24px; max-width: 30em; color: var(--role); }
.block .body { margin: 0 auto 48px; max-width: 30em; text-wrap: pretty; }
@media (min-width: 900px) {
  .block .still, .player { width: min(1180px, calc(100vw - 2 * var(--gutter))); margin-left: 50%; transform: translateX(-50%); }
  .frames.pair { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* 트레일러: 누르기 전에는 장면 위의 재생 알약뿐, 누르면 그 자리에서 YouTube가 열린다 */
.player { aspect-ratio: 16 / 9; }
.player button { display: block; position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.player button img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, var(--screen) 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, var(--screen) 62%, transparent 100%);
}
.player .pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(12, 12, 11, 0.72); }
.player button:hover .pill { border-color: var(--willow); color: var(--willow); }
.player iframe { display: block; width: 100%; height: 100%; border: 0; }
.player + .role { margin: 14px 0 0; }

/* ── 엔딩 ───────────────────────── */
.ending {
  min-height: 100svh; display: grid; place-content: center; justify-items: center; text-align: center;
  padding: 22vh var(--gutter) 64px;
}
.ending hr { width: 48px; margin: 0 0 56px; border: 0; border-top: 1px solid var(--role); opacity: 0.5; }
.ending .thanks { text-wrap: balance; margin: 0 0 40px; font: 400 clamp(30px, 4.4vw, 52px)/1.2 var(--f-display); }
.ending .go { margin-bottom: 40px; }
.docs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; margin: 0 0 40px; font-size: 14px; }
.docs a { display: inline-flex; align-items: center; min-height: 40px; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .card > * { animation: none; } }

/* 영어판: 라틴 제목은 Archivo (Script Split 규칙) */
:lang(en) .block h2 { font-family: var(--f-latin); font-weight: 800; font-stretch: 112%; }
:lang(en) .ending .thanks { font: 800 clamp(28px, 4vw, 46px)/1.2 var(--f-latin); font-stretch: 112%; }
:lang(en) .block .lede, :lang(en) .block .body { max-width: 34em; }