/*
  뿌셔뿌셔 리듬게임 — 모바일 세로 우선.

  게임 소스(/js/rhythm/)의 원본 index.html 은 #game 을 화면 전체(position: fixed)에 깔고
  body 에 touch-action: none 을 걸었다. 여기서는 그걸 전부 .bw-rhythm-stage 박스 안으로 좁힌다.
  공통 헤더·푸터·방명록·자동 광고와 같은 페이지에 살아야 하기 때문이다.

  #game #hud #rotate #pause-overlay 와 버튼 id 는 게임 소스가 그대로 찾는다. 이름을 바꾸지 않는다.
*/

.bw-rhythm-shell {
  width: min(960px, calc(100% - 1rem));
  margin: 0 auto;
  padding: 0.65rem 0 1.75rem;
}

/* ── 게임 박스 ──
   세로 9:16 게임이라 높이를 기준으로 잡고 폭은 게임이 비율에 맞춰 정한다 (main.js designWidth).
   화면을 꽉 채우지 않는다 — 자동 광고가 들어갈 여백을 남긴다. */
.bw-rhythm-stage {
  position: relative;
  width: 100%;
  /* 높이: 위아래로 스크롤을 잡을 여백을 항상 남긴다.
     vh 는 iOS 사파리에서 주소창 포함 큰 화면 기준이라 실제보다 커서 박스가 화면을 꽉 채웠다.
     dvh(보이는 높이)로 바꾸고 값도 낮춰, 아이폰처럼 세로 짧은 폰에서 박스 밖 스크롤 띠를 확보한다.
     박스는 touch-action:none 이라 그 위를 끌어선 페이지가 안 내려가므로, 이 여백이 유일한 스크롤 손잡이다. */
  height: min(72vh, 720px);
  height: min(72dvh, 720px);
  min-height: 380px;
  margin: 0.75rem 0 1rem;
  overflow: hidden;
  border: 1px solid var(--bw-border);
  border-radius: 1rem;
  background: #1c1a24;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

/* 전체화면이면 박스 장식을 빼고 꽉 채운다 */
.bw-rhythm-stage:fullscreen,
.bw-rhythm-stage:-webkit-full-screen {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.bw-rhythm-stage #game {
  position: absolute;
  inset: 0;
}

.bw-rhythm-stage #game canvas {
  display: block;
}

/* ── HUD (원본 index.html 의 스타일을 박스 기준으로 옮김) ── */
.bw-rhythm-stage #hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bw-rhythm-stage #hud button {
  pointer-events: auto;
  font: inherit;
  font-weight: 800;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}

.bw-rhythm-stage #btn-full,
.bw-rhythm-stage #btn-pause {
  position: absolute;
  top: 10px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.85);
  color: #2b2733;
  font-size: 18px;
}

.bw-rhythm-stage #btn-full { right: 64px; }
.bw-rhythm-stage #btn-full.hidden { display: none; }
.bw-rhythm-stage #btn-pause { right: 12px; display: none; }

.bw-rhythm-stage:fullscreen #btn-full,
.bw-rhythm-stage:fullscreen #btn-pause {
  top: calc(10px + env(safe-area-inset-top));
}

.bw-rhythm-stage #pause-overlay {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(20, 16, 28, 0.72);
  pointer-events: auto;
}

.bw-rhythm-stage #pause-overlay h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 32px;
}

.bw-rhythm-stage #pause-overlay button {
  min-width: 220px;
  padding: 16px;
  background: #ffb400;
  color: #2b2733;
  font-size: 20px;
  box-shadow: 0 5px 0 #b07a00;
}

.bw-rhythm-stage #pause-overlay button.sub {
  background: #fff;
  box-shadow: 0 5px 0 #bbb;
}

/* 터치 기기가 가로일 때: 세로로 돌려 달라고 안내 (세로 전용 게임) */
.bw-rhythm-stage #rotate {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: #1c1a24;
  color: #fff;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
}

@media (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
  .bw-rhythm-stage #rotate { display: flex; }
}

/* ── 공유 ── */
.bw-rhythm-share {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}

/* ── 설명 본문 ── */
.bw-rhythm-help {
  padding: 1rem 1.1rem;
  border: 1px solid var(--bw-border);
  border-radius: 0.9rem;
  background: var(--bw-surface);
  color: var(--bw-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.bw-rhythm-help h2 {
  margin: 0 0 0.4rem;
  color: var(--bw-text);
  font-size: 1rem;
}

.bw-rhythm-help h2 + p,
.bw-rhythm-help h2 + ol {
  margin-top: 0;
}

.bw-rhythm-help p + h2,
.bw-rhythm-help ol + h2 {
  margin-top: 1rem;
}

.bw-rhythm-help ol {
  padding-left: 1.2rem;
}

.bw-rhythm-help li + li {
  margin-top: 0.3rem;
}

.bw-rhythm-help strong {
  color: var(--bw-text);
}

@media (min-width: 640px) {
  .bw-rhythm-stage {
    /* 넓은 화면(태블릿·PC)은 세로 여유가 있어 더 크게. 여기도 dvh 로. */
    height: min(80vh, 820px);
    height: min(80dvh, 820px);
  }
}