/* ====================================================================
   base.css  —  모든 게임이 같이 쓰는 기본 규칙

   들어있는 것
     1. 리셋 + 페이지 바깥 프레임 (OS 다크 모드를 따라가는 영역)
     2. 화면(hub / detail) 전환
     3. 공통 UI 부품: 탭 반응, 버튼, 불릿, 패널 제목, 힌트, 안내 박스, 표, 섹션 사진

   색은 tokens.css 의 변수(var(--…))로 씁니다. 반경·그림자·자주 반복되는 간격도 변수로 씁니다.
   토큰이 없는 한 번짜리 간격(예: 18px)은 숫자 그대로 적었습니다.
   두 곳 이상에서 쓰는 새 색·값이 생기면 CSS 에 적지 말고 tokens.json 에 먼저 추가하세요.
   (예외: 한 게임 전용 색은 그 게임 css 맨 위 ":root" 에 모아 둡니다 — css/games/sic-bo.css 참고)
   ==================================================================== */


/* ────────────────────────────────────────────────────────────
   1. 리셋 + 페이지 프레임
   ──────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

/* iOS 는 가로로 돌리면 글자를 제멋대로 키운다. 크기는 우리가 정한 대로 두고, 확대는 손가락(핀치)으로 한다. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page-bg);        /* 560px 컬럼 바깥 영역 — 다크 모드를 따라감 */
  color: var(--page-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* 가운데 정렬된 폰 폭 컬럼. 화면을 줄여 맞추지 않고, 길면 그냥 스크롤한다. */
.page   { display: flex; justify-content: center; }
.column { width: 100%; max-width: var(--column-max); }

/* 노치 · 상태바 자리 (safe area).
   홈 화면에 추가한 앱이나 전체 화면 웹뷰에서는 화면이 상태바 밑까지 올라온다 (index.html 의 viewport-fit=cover).
   그 높이만큼 맨 위에 띠를 깔아 헤더가 시계 · 노치에 가리지 않게 하고, 스크롤해도 띠는 위에 붙어 있다 (내용이 시계 밑으로 지나가지 않게).
   상태바 글자가 흰색(apple-mobile-web-app-status-bar-style: black-translucent)이라 띠는 진한 보라.
   일반 브라우저에서는 높이가 0 이라 아무것도 보이지 않는다. 아래쪽 홈 바는 .cta-bar 가 피한다 (chrome.css). */
.column::before {
  content: '';
  position: sticky;
  top: 0;
  z-index: 40;
  display: block;
  height: env(safe-area-inset-top, 0px);
  background: var(--brand-900);
}


/* ────────────────────────────────────────────────────────────
   2. 화면 전환 — hub 와 detail 중 하나만 보인다
   ──────────────────────────────────────────────────────────── */

.screen            { display: none; }

img.is-loading { opacity: 0; }        /* 새 사진을 받는 동안 이전 사진이 보이지 않게 (ui/images.js) */

/* 화면 높이 채우기: 내용이 짧아도 아래 버튼(.cta-bar)이 화면 맨 아래에 붙게, 컬럼 → 화면 → 시트가 남는 높이를 나눠 갖는다.
   (예전에는 바카라 · 룰렛처럼 짧은 hub 에서 버튼 아래가 비어 보였다. 시트 안쪽 배치는 chrome.css) */
.column {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;                  /* 주소창이 접히고 펴지는 폰 브라우저에서 실제 보이는 높이 */
}
.screen.is-active  { display: flex; flex-direction: column; flex: 1 0 auto; }

.screen--hub    { background: var(--bg); }
.screen--detail { background: var(--paper); }

.detail-panel[hidden] { display: none; }


/* ────────────────────────────────────────────────────────────
   3. 공통 UI 부품
   ──────────────────────────────────────────────────────────── */

/* 누를 수 있는 것: 눌렀을 때 살짝 작아진다 */
.tap {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.13s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.tap:active { transform: scale(0.97); }

/* 키보드로 이동할 때 지금 위치 표시 (디자인 시스템 권장: brand-700 아웃라인). 마우스·터치로 누를 때는 나타나지 않는다. */
:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; }

/* ── 버튼 ── */
.btn {
  min-height: var(--touch-min);
  padding: 10px 8px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--ink-soft);
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.btn.on { background: var(--brand-700); color: var(--paper); border-color: var(--brand-700); }

.btn-lg {                                  /* 화면 폭 꽉 찬 주 버튼 */
  width: 100%;
  min-height: var(--cta-min);
  border: none;
  border-radius: var(--radius-card);
  background: var(--brand-700);
  color: var(--paper);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.btn-lg[disabled] { background: var(--line); color: var(--ink-soft); cursor: default; }
.btn-ghost { border: 1.5px solid var(--brand-700); background: var(--paper); color: var(--brand-700); }   /* .btn-lg 와 함께: 테두리만 있는 버튼 */

/* ── 불릿 목록 (hub 소개 4줄, 패널 소개 2~3줄) ── */
.bullets { display: flex; flex-direction: column; gap: var(--bullet-gap); }
.bullets--hub   { margin-bottom: var(--section-gap); }   /* hub: 소개 불릿과 "Explore" 사이 */
.bullets--panel { margin-bottom: 18px; }                 /* 패널: 불릿과 본문 사이 */
.bullet { display: flex; align-items: baseline; gap: 9px; }
.bullet__dot {
  width: 4px;
  height: 4px;
  margin-bottom: 1px;
  border-radius: 50%;
  background: var(--brand-500);
  flex-shrink: 0;
}
.bullet__text { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* ── 글자 스타일 ── */
.section-label {                           /* "Explore This Game" 같은 작은 제목 */
  margin-bottom: 11px;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.panel-h {                                 /* 패널마다 한 번 */
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  color: var(--ink);
}
.hint { margin: 0 0 14px; font-size: 11px; line-height: 1.5; color: var(--ink-soft); }
.sub-label {                               /* 패널 안의 작은 소제목 ("TABLE RULES") */
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-700);
}

/* 모든 게임의 규칙 패널 맨 아래에 붙는 면책 문구 (위에 가는 선) */
.disclaimer { margin: 0 0 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.5; color: var(--ink-soft); }

/* ── 안내 박스 ── */
.flag {
  margin-bottom: 14px;
  padding: 12px 13px;
  border-radius: var(--radius-row);
  font-size: 12px;
  line-height: 1.55;
}
.flag-warn { background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn-ink); }
.flag-tip  { background: var(--brand-100); border: 1px solid var(--brand-200); color: var(--ink-soft); }

/* 결과가 한 박자 늦게 나타난다 (style 의 animation-delay 로 늦춘다) */
.reveal-in { opacity: 0; animation: reveal-in 0.3s ease both; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .reveal-in { animation: none; opacity: 1; } }

/* ── 섹션 맨 위 테이블 사진 (블랙잭 Free Bet · 3 카드 포커 Bets · 스터드 Bets · 식보 · 크랩스 Rules). 홀덤은 자기 .he-photo--table ── */
.section-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1000 / 558;
  object-fit: cover;
  margin-bottom: 16px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-menu);
  background: var(--brand-900);            /* 사진이 늦게 뜰 때 */
}

/* ── 카드 박스 + 안에 들어가는 표 ── */
.card-box {
  margin-bottom: 14px;
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
}

.card-box--tight { padding: 4px 14px; }       /* 줄(.ledger)만 들어가는 카드 */

.ledger {                                  /* "내 선택 ····· Big" 식의 한 줄 */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 12px;
  color: var(--ink);
}
.ledger:last-child { border-bottom: none; }
.ledger b { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.ledger .is-plus  { color: var(--win); }         /* 받은 금액 */
.ledger .is-minus { color: var(--suit-red); }    /* 잃은 금액 */
.ledger .is-even  { color: var(--ink-soft); }    /* 돌려받음 · 0 */

/* 족보 사다리: 한 줄 = 순위 · 이름 · 배당. 누르면 .on */
.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.rank-row.on { border-color: var(--brand-700); background: var(--brand-100); box-shadow: 0 0 0 1.5px var(--brand-700); }
.rank-row__n    { flex-shrink: 0; width: 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-align: center; color: var(--brand-700); }
.rank-row__name { flex: 1; min-width: 0; font-weight: 700; font-size: 12.5px; color: var(--ink); }
.rank-row__pay  { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--brand-700); font-variant-numeric: tabular-nums; }

.pay-row {                                 /* "베팅 이름 ····· 1 : 8" */
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.pay-row:last-child { border-bottom: none; }
.pay-bet { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.pay-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  color: var(--brand-700);
  font-variant-numeric: tabular-nums;
}