/* ── GameShell 공통 컴포넌트 ──────────────────────────────────
   in-the-dark, end-of-day 등 여러 미니 사이트가 공유하는
   "페이지 배경 위에 가운데 정렬 카드를 얹는" 기본 레이아웃.

   색상/크기는 전부 커스텀 프로퍼티로 빼뒀으니, 각 사이트는 자기 :root에서
   --gs-* 값만 다시 정의하면 톤을 맞출 수 있다.
   기본값은 in-the-dark의 다크 테마. */

:root {
  --gs-page-bg: #0d0c0a;
  --gs-card-bg: rgba(20, 18, 15, 0.97);
  --gs-card-border: rgba(255, 255, 255, 0.06);
  --gs-card-shadow: rgba(0, 0, 0, 0.5);
  --gs-card-radius: 24px;
  --gs-max-width: 480px;
  /* 카드 세로 크기를 방마다 다르게 두면 방을 옮겨다닐 때 화면이 덜컥거리는
     느낌을 준다. in-the-dark의 9:16 아레나가 가장 크므로 그걸 기준으로,
     고정 비율 콘텐츠가 없는 방(about 등)은 이 값을 calc(var(--gs-max-width) * 16 / 9)로
     맞춰 같은 카드 높이를 갖도록 한다. 기본은 auto(내용에 맞춤). */
  --gs-card-min-height: auto;
}

/* html에도 같은 배경을 깔아둔다: end-of-day처럼 body를 position:fixed로 쓰는
   방은 iOS Safari 고무줄 오버스크롤 구간이 body 바깥(캔버스)을 노출시키는데,
   거기엔 body 배경이 전파되지 않고 기본값(흰색)이 보이는 경우가 있다. */
html {
  background: var(--gs-page-bg);
}

body.gs-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gs-page-bg);
}

.game-shell {
  width: min(var(--gs-max-width), calc(100vw - 40px));
  margin: 0;
  padding: 18px 0 32px;
}

.game-card {
  width: 100%;
  min-height: var(--gs-card-min-height);
  margin: 10px auto 0;
  padding: 0;
  border-radius: var(--gs-card-radius);
  background: var(--gs-card-bg);
  border: 1px solid var(--gs-card-border);
  box-shadow: 0 16px 48px var(--gs-card-shadow);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 좁은 화면(폰)에서는 카드를 화면 폭 전체로 꽉 채운다(가장자리 40px 여백 제거).
   방마다 이 분기점을 각자 정의하면 방을 옮길 때 카드 폭이(그래서 --gs-card-min-height로
   맞춘 높이도) 어긋나므로, 여기 한 곳에서만 정의해 모든 방이 같은 폭/높이를 갖게 한다.
   각 방의 스타일시트는 이 파일 뒤에 로드되고 자기 :root에서 --gs-max-width를 다시
   선언하므로(예: about/style.css), !important 없이는 이 분기점이 항상 그 뒤에 오는
   방별 선언에 덮여써진다. */
@media (max-width: 560px) {
  :root {
    --gs-max-width: 100vw !important;
  }

  .game-shell {
    width: 100vw;
    padding: 0 0 calc(18px + env(safe-area-inset-bottom));
  }

  /* 모바일에서는 카드를 "셸"로만 남긴다: 배경/테두리/그림자/라운드를 모두 없애고
     화면을 꽉 채운다. 각 방의 실제 배경은 body.gs-page(--gs-page-bg)가 그대로
     보여준다.
     --gs-card-min-height(9:16 기준)와 실제 화면비가 다르면 카드 위/아래에
     빈틈이 남을 수 있는데, body.gs-page가 이미 수직/수평 center로 셸을
     띄우고 있으니 그 빈틈은 항상 --gs-page-bg로 자연스럽게 채워진다 —
     카드를 억지로 뷰포트 높이에 맞춰 늘이지 않는다(늘이면 home처럼 내용이
     한 화면보다 긴 방에서 .game-card의 overflow:hidden에 잘려 스크롤이
     막힌다). */
  .game-card {
    margin-top: 0;
    border-radius: 0;
    background: none;
    border: none;
    box-shadow: none;
  }
}