/* ====================================================================
   chrome.css  —  게임과 상관없이 모든 화면에 똑같이 붙는 "껍데기"

   hub (첫 화면)
     ┌ .app-header      워드마크 · 검색 · 언어
     │ .game-tabs       8개 게임 탭
     ├ .hero            게임 이름 + 사진
     └ .hub-sheet       소개 불릿 → "Explore" → .hub-item 들 → .cta-bar

   detail (섹션 화면)
     ┌ .back-bar        뒤로가기 + 빵부스러기
     │ .stepper         섹션 점
     └ .detail-body     패널(게임별) → .cta-bar

   게임마다 달라지는 내용(패널 안쪽)은 css/games/<게임>.css 에 둡니다.
   ==================================================================== */


/* ────────────────────────────────────────────────────────────
   hub · 헤더
   ──────────────────────────────────────────────────────────── */

.app-header { background: var(--paper); border-bottom: 1px solid var(--line); }

.app-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 10px 11px var(--gutter);
}

.wordmark { display: flex; flex-direction: column; gap: 1px; }
.wordmark__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.wordmark__sub {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.app-header__actions { display: flex; align-items: center; gap: 4px; }
.search-slot {                             /* 검색 아이콘 자리 (아직 동작 없음) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* ── 언어 선택 ── */
.lang { position: relative; }
.lang__btn {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  cursor: pointer;
}
.lang__label { font-size: 11px; font-weight: 700; color: var(--ink); }

.lang__menu {
  display: none;
  position: absolute;
  top: 46px;
  right: 0;
  z-index: 30;
  min-width: 128px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-row);
  background: var(--paper);
  box-shadow: var(--shadow-menu);
}
.lang__menu.is-open { display: block; }

.lang__option {
  display: flex;
  gap: 8px;
  padding: 11px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.lang__option span  { font-weight: 500; color: var(--ink-soft); }
.lang__option:hover { background: var(--brand-100); }


/* ────────────────────────────────────────────────────────────
   hub · 게임 탭 · 오프라인 띠
   ──────────────────────────────────────────────────────────── */

.game-tabs {
  display: flex;
  gap: 8px;
  padding: 0 var(--gutter) 13px;
  overflow-x: auto;
}
.game-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--radius-pill);
  background: var(--brand-100);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}
.game-tab.is-active { background: var(--brand-700); color: var(--paper); font-weight: 700; }

/* 인터넷이 끊겼을 때만 맨 위에 보이는 띠 (hub · detail 공통, index.html) */
.offline-notice {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px var(--gutter);
  background: var(--brand-100);
}
.offline-notice[hidden] { display: none; }
.offline-notice span:last-child { font-size: 11px; font-weight: 600; color: var(--brand-800); }
#offline-notice-icon { display: flex; }


/* ────────────────────────────────────────────────────────────
   hub · 히어로
   ──────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: 24px var(--hero-x) 34px;
  background: linear-gradient(155deg, var(--brand-900), var(--brand-700));
  overflow: hidden;
}
.hero__photo {                             /* 오른쪽 180px, 왼쪽으로 갈수록 투명 */
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 60%);
  mask-image: linear-gradient(90deg, transparent, black 60%);
  pointer-events: none;
}
/* 게임 정의의 hero.photoShape: 'disc' — 둥근 사진이 오른쪽 밖으로 걸친다 (룰렛 휠) */
.hero__photo--disc {
  top: 50%;
  right: -70px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  transform: translateY(-50%);
  object-position: center;
  opacity: 0.16;
  -webkit-mask-image: none;
  mask-image: none;
}
.hero__text { position: relative; z-index: 1; }
.hero__eyebrow {
  margin-bottom: 9px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-200);
  opacity: 0.9;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  /* 모든 게임 27px. 아주 좁은 폰(약 325px 미만)에서는 화면 폭에 맞춰 26px 까지 같이 줄어든다.
     기준은 가장 긴 이름(스리카드포커 일본어, 꺾을 곳 없는 10글자)이 한 줄에 들어가는 크기: (폭 − 좌우 여백) ÷ 10.3.
     그보다 넓으면 계산값이 27 을 넘으므로 항상 27px. */
  font-size: min(var(--hero-title-size, 27px), max(26px, calc((100vw - 2 * var(--hero-x)) / 10.3)));
  line-height: 1.05;
  color: var(--paper);
  word-break: keep-all;      /* 한·일·중 이름이 글자 중간에서 꺾이지 않게. 꺾을 곳은 띄어쓰기나 문구 안의 <wbr> (스터드 일본어) */
}


/* ────────────────────────────────────────────────────────────
   hub · 흰 시트 (히어로 위로 17px 올라온다)
   ──────────────────────────────────────────────────────────── */

.hub-sheet {
  position: relative;
  z-index: 2;
  display: flex;                           /* 남는 높이를 채우고, 다운로드 버튼은 맨 아래로 (base.css "화면 높이 채우기") */
  flex-direction: column;
  flex: 1 0 auto;
  margin-top: calc(-1 * var(--sheet-overlap));
  padding: var(--gutter) var(--gutter) 0;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--paper);
}
.hub-sheet__body { flex: 1 0 auto; }

.hub-list { display: flex; flex-direction: column; gap: var(--list-gap); margin-bottom: 12px; }   /* 아래 CTA 바와의 간격 (원본 "Chat with a host" 줄의 아래 여백과 같음) */

.hub-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--row-min);
  padding: var(--row-pad) var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hub-item:hover { background: var(--brand-100); border-color: var(--brand-500); }

.hub-item__icon {                          /* 40px 타일 위의 19px 아이콘 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-tile);
  height: var(--icon-tile);
  border-radius: var(--radius-control);
  background: var(--brand-100);
  flex-shrink: 0;
}
.mini-card {                               /* 메뉴 아이콘 타일 안의 작은 카드 (icons.menu.cardValue) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 26px;
  border: 1px solid var(--brand-200);
  border-radius: 3px;
  background: var(--paper);
}
.hub-item__text   { flex: 1; min-width: 0; }
.hub-item__title  { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.hub-item__desc   { margin-top: 2px; font-size: 11.5px; color: var(--ink-soft); }
.hub-item__status { flex-shrink: 0; }      /* 안 본 섹션: 꺾쇠 / 본 섹션: 체크 원 */
.hub-item__status svg { display: block; }

.visited-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-700);
}



/* ────────────────────────────────────────────────────────────
   하단 CTA 바 (hub, detail 공통)
   ──────────────────────────────────────────────────────────── */

.cta-bar {
  position: sticky;                        /* 화면 아래에 붙어서 스크롤을 따라온다 */
  bottom: 0;
  z-index: 1;
  padding: var(--card-pad) 0 28px;
  padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));   /* 홈 바가 있는 폰(아래 여백 34px)에서는 버튼이 그 위로 */
  border-top: 1px solid var(--line);
  background: var(--paper);                /* 아래로 지나가는 내용이 비치지 않게 */
  box-shadow: var(--shadow-cta-bar);
}
.cta-row { display: flex; gap: 8px; }
.cta-row > .cta { flex: 1; min-width: 0; }
.cta[hidden] { display: none; }
.cta.cta--ghost { background: var(--paper); color: var(--brand-900); box-shadow: inset 0 0 0 1.5px var(--brand-900); }   /* 마지막 섹션의 "앱 다운로드" (보조) */
.cta--home svg { width: 16px; height: 16px; flex-shrink: 0; }
.cta--home svg * { stroke: currentColor; }

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px;
  border-radius: var(--radius-card);
  background: var(--brand-900);
  color: var(--paper);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
}


/* ────────────────────────────────────────────────────────────
   detail · 뒤로가기 바
   ──────────────────────────────────────────────────────────── */

.detail-top-spacer { height: 22px; background: var(--paper); }

.back-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.back-btn:hover,
.back-btn:active { background: var(--brand-100); }

.breadcrumb {
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.breadcrumb__current { color: var(--ink); }


/* ────────────────────────────────────────────────────────────
   detail · 스테퍼 (섹션마다 점 하나)
   상태는 .is-current / .is-visited 클래스로만 바뀐다. 둘 다 없으면 "아직 안 봄".
   ──────────────────────────────────────────────────────────── */

/* 간격은 점 개수로 두 가지: 4개(기본) 바깥 여백 18 · 한 칸 66 · 선 44 / 5개(.stepper--5) 18 · 56 · 38 */
.stepper { position: relative; padding: 16px 18px 4px; }
.stepper::before {                         /* 점들을 잇는 가는 선 */
  content: "";
  position: absolute;
  top: 24px;
  left: 44px;
  right: 44px;
  height: 2px;
  background: var(--line);
}
.stepper--5::before { left: 38px; right: 38px; }
.stepper__row { position: relative; display: flex; justify-content: space-between; }

.stepper__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 66px;
  padding: 2px 0;
  border-radius: 8px;
  cursor: pointer;
}
.stepper--5 .stepper__item { width: 56px; }
.stepper__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--step-dot);
  height: var(--step-dot);
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
}
.stepper__label {
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: var(--ink-soft);
}

.stepper__item.is-visited .stepper__dot { border: none; background: var(--brand-700); }
.stepper__item.is-current .stepper__dot { border-color: var(--brand-700); background: var(--brand-100); }
.stepper__item.is-current .stepper__label { font-weight: 700; color: var(--brand-700); }

.detail-body  {                          /* 남는 높이를 채우고, 아래 버튼은 맨 아래로 (base.css "화면 높이 채우기") */
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  padding: var(--gutter) var(--gutter) 0;
}
.detail-body > .cta-bar { margin-top: auto; }
.detail-panel { padding-bottom: 6px; }       /* 패널 끝과 CTA 바 사이 */


/* ────────────────────────────────────────────────────────────
   detail · "Game Method" 단계 넘기기 (모든 게임의 첫 섹션이 씀)
   그림(펠트)은 게임마다 다르고, 아래 세 덩어리는 같다:
     .role-tabs   전체 / 딜러 / 나
     .spotlight   지금 단계 설명 카드
     .pager       이전 · 점 · 다음
   ──────────────────────────────────────────────────────────── */

.role-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
/* 좁은 폰(360 미만): 일본어 "ディーラー" 가 "ディーラ / ー" 처럼 꺾이지 않게 줄바꿈을 막고 옆 여백을 줄인다 */
@media (max-width: 359.98px) {
  .role-tabs .btn { padding-inline: 6px; white-space: nowrap; }
}

.spotlight {
  margin-bottom: 12px;
  padding: 18px 16px;
  border-radius: var(--radius-spotlight);
  background: var(--brand-100);
}
.spotlight.is-dealer { background: var(--dealer-soft); }

.spotlight__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.role-badge {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--brand-700);
  color: var(--paper);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.is-dealer .role-badge { background: var(--brand-200); color: var(--brand-800); }

.spotlight__counter { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }

.spotlight__row   { display: flex; align-items: baseline; gap: 9px; margin-bottom: 6px; }
.spotlight__num   { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--brand-700); flex-shrink: 0; }
.is-dealer .spotlight__num { color: var(--brand-500); }          /* 딜러 단계는 한 톤 연하게 */
.spotlight__title { font-weight: 700; font-size: 14.5px; color: var(--ink); }
/* 단계 그림(선택): 3:2 로 맞춰 자른다 */
.spotlight__image { display: block; width: 100%; aspect-ratio: 3 / 2; margin: 4px 0 10px; border-radius: 12px; object-fit: cover; background: var(--line); }
.spotlight__image[hidden] { display: none; }                  /* display:block 이 hidden 을 이기지 않게 (사진 없는 게임은 칸이 없어야 한다) */
.spotlight__desc  { margin-bottom: 8px; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.spotlight__note  {                                              /* 단계 아래 작은 참고 박스 */
  padding: 10px 12px;
  border-radius: var(--radius-control);
  background: var(--paper);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.pager__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: var(--touch-min);
  padding: 10px 6px;
  border: none;
  background: none;
  color: var(--brand-700);
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
}
.pager__btn.is-hidden { visibility: hidden; }     /* 첫 단계의 "이전", 끝 단계의 "다음" */

.pager__dots { display: flex; align-items: center; gap: 4px; }
.pager__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--brand-500);            /* 딜러 단계 */
  opacity: 0.35;
  transition: width 0.2s ease;
}
.pager__dot.is-player { background: var(--brand-700); }
.pager__dot.is-active { width: 16px; opacity: 1; }


/* ────────────────────────────────────────────────────────────
   "눌러 보세요" 안내 (js/ui/tap-hint.js)
   섹션을 처음 열면 누를 수 있는 곳 하나가 노랗게 깜빡이고 위에 말풍선이 뜬다.
   테두리는 outline 이라서, 말풍선은 body 에 따로 붙어서 화면 배치는 바뀌지 않는다.
   ──────────────────────────────────────────────────────────── */

.tap-hint {
  outline: 2.5px solid var(--lit);
  outline-offset: 2px;
  animation: tapHintGlow 1.3s ease-in-out infinite;
}
@keyframes tapHintGlow {
  0%, 100% { outline-color: var(--lit); outline-offset: 2px; }
  50%      { outline-color: oklch(88% 0.14 95 / 0.25); outline-offset: 5px; }
}

.tap-hint-bubble {
  position: absolute;
  z-index: 50;
  transform: translateX(-50%);
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  background: var(--brand-900);
  color: var(--paper);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;                      /* 아래 것을 누를 수 있게 */
  box-shadow: 0 4px 12px oklch(20% 0.06 300 / 0.25);
  animation: tapHintBob 1.3s ease-in-out infinite;
}
.tap-hint-bubble[hidden] { display: none; }
.tap-hint-bubble::after {                     /* 아래(가리키는 곳)를 향한 꼬리 */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.tap-hint-bubble.is-below::after { top: -5px; bottom: auto; }   /* 위에 자리가 없어 아래에 뜰 때 */
@keyframes tapHintBob {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -4px; }
}

/* 누를 곳이 아래 버튼에 가려 있거나 화면 아래에 있을 때: 아래 버튼 바로 위 가운데에 뜨는 띠 (누르면 그곳으로 스크롤) */
.tap-hint-cue {
  position: fixed;
  z-index: 50;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px 7px 11px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--brand-900);
  color: var(--paper);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 12px oklch(20% 0.06 300 / 0.3);
  transform: translateX(-50%);
  cursor: pointer;
}
.tap-hint-cue[hidden] { display: none; }
.tap-hint-cue__arrow { color: var(--lit); font-size: 13px; animation: tapHintArrow 1.1s ease-in-out infinite; }
@keyframes tapHintArrow {
  0%, 100% { transform: translateY(-1px); }
  50%      { transform: translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .tap-hint, .tap-hint-bubble, .tap-hint-cue__arrow { animation: none; }
}