/* theme.css — 색 토큰과 게임별 정체성. 다른 css 뒤에 로드되어 필요한 곳만 덮어쓴다. */
:root {
  --bg: #1a1d23;
  --panel: #22262e;
  --panel-2: #2c313a;
  --line: #333a45;
  --line-2: #3a4150;
  --ink: #e8eaed;
  --ink-dim: #9aa0a6;
  --ink-faint: #565f89;

  --blue: #7aa2f7;
  --green: #9ece6a;
  --red: #f7768e;
  --gold: #e0af68;
  --purple: #bb9af7;
  --cyan: #7dcfff;
  --orange: #ff9e64;

  /* 카드 크기 — 카드게임은 손패가 주인공이라 큼직하게 */
  --card-w: 64px;
  --card-h: 92px;
  --card-font: 23px;

  /* 게임 탭이 각자 덮어쓴다 */
  --accent: var(--blue);
  --felt-top: #2a5d47;
  --felt-bottom: #1f4635;
  --felt-edge: #17342a;
}

/* 게임마다 색이 하나씩 — 탭을 옮기면 화면 색이 바뀌어 지금 어디인지 바로 안다 */
#tab-roulette { --accent: var(--gold); }
#tab-ladder   { --accent: var(--cyan); }
#tab-react    { --accent: var(--red); }
#tab-snake    { --accent: var(--green); }
#tab-g2048    { --accent: var(--purple); }
#tab-catch    { --accent: var(--blue); }
#tab-liar     { --accent: var(--orange); }
#tab-bj       { --accent: var(--gold); }
#tab-oc       { --accent: var(--cyan); }
#tab-jk       { --accent: var(--red); }
#tab-coin     { --accent: var(--green); }
#tab-board    { --accent: var(--gold); }
#tab-admin    { --accent: var(--red); }

/* 제목: 왼쪽 악센트 바 — 게임마다 색이 다르다 */
.game-wrap h2 {
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
}
.game-wrap h2::before {
  content: '';
  width: 3px;
  height: 17px;
  border-radius: 2px;
  background: var(--accent);
  flex: none;
}
.hint { max-width: 620px; line-height: 1.65; }

/* 도금통이 걸린 탭은 헤더 버튼에 금색 점을 달아 구분한다 */
.tab-btn[data-tab="bj"]::after,
.tab-btn[data-tab="oc"]::after,
.tab-btn[data-tab="jk"]::after,
.tab-btn[data-tab="coin"]::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: 2px;
}
.tab-btn.active { color: var(--accent, var(--blue)); }
#admin-tab-btn { color: var(--red); }
#admin-tab-btn.active { background: #3a2b2f; color: #ffb3c0; }

/* 상태 줄·타이머는 그 게임의 색을 쓴다 */
#cm-status, #lg-status, .cg-status { color: var(--accent); }
#lg-timerfill, .cg-fill, #cm-timerfill { background: var(--accent); }
#lg-timerbar.warn .cg-fill, .cg-bar.warn .cg-fill, #lg-timerbar.warn #lg-timerfill { background: var(--red); }

/* 숫자가 흔들리지 않게 (타이머·점수·코인) */
#hdr-cash, .cash, .cg-status, .cg-table td, .result-big,
#cm-status, #lg-status, .coin-row .price, .coin-row .mine, #g2048-score, #g2048-best {
  font-variant-numeric: tabular-nums;
}

/* 게임 안의 주요 버튼은 그 게임 색을 입는다 (채팅·개인톡의 파란 버튼은 그대로).
   매수/매도는 초록·빨강이 뜻을 담고 있으므로 악센트로 덮지 않는다. */
.game-wrap button.primary:not(.buy):not(.sell) { background: var(--accent); }
.game-wrap button.primary:not(.buy):not(.sell):hover { filter: brightness(1.12); background: var(--accent); }

/* 매수/매도 버튼 색은 cards.css 의 --side 하나가 정한다 (매수 빨강 · 매도 파랑,
   국내 증권사 관례). 여기서 덮으면 그 한 곳이 두 곳이 되므로 두지 않는다. */

/* 클래스 없는 보조 버튼(전량매도·취소·턴 넘기기 …)이 밝은 기본 버튼으로 튀지 않게 */
.game-wrap button:not([class]) {
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.game-wrap button:not([class]):hover { background: #3a4150; }
.game-wrap button.primary:disabled { filter: grayscale(.6) brightness(.75); cursor: default; }
.game-wrap button.primary:focus-visible,
.tab-btn:focus-visible,
#hdr-right button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== 카드게임: 손패가 주인공이라 크게 ===== */
.card {
  width: var(--card-w);
  height: var(--card-h);
  font-size: var(--card-font);
  border-radius: 9px;
}
/* 랭크가 크고 무늬는 한 단계 작게 — 큰 카드에서 위계가 생긴다 */
.card > span:first-child { line-height: 1; }
.card > span:last-child { font-size: .78em; opacity: .9; }
.card.back { font-size: calc(var(--card-font) * .6); }
.card.joker { font-size: calc(var(--card-font) * .52); }
.hand { gap: 9px; min-height: var(--card-h); }
.card.pick:hover { transform: translateY(-9px); }

/* 카드가 놓이는 자리는 초록 펠트 — 카드게임 세 개가 한 눈에 카드판으로 보인다 */
#tab-bj .hand,
#tab-oc .hand,
#tab-jk .hand {
  background: linear-gradient(180deg, var(--felt-top), var(--felt-bottom));
  border: 1px solid var(--felt-edge);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: inset 0 2px 20px rgba(0, 0, 0, .45);
  min-width: min(92vw, 300px);
}
/* 펠트 위에서는 카드가 살짝 떠 보이게 */
#tab-bj .card, #tab-oc .card, #tab-jk .card { box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }

/* 좌석·상태·버튼도 카드에 맞춰 한 치수 크게 */
#tab-bj .cg-seat, #tab-oc .cg-seat, #tab-jk .cg-seat { font-size: 14px; padding: 8px 15px; }
/* 좌석에 붙는 판돈·장수는 읽혀야 하는 정보다 — 흐린 회색이면 안 보인다 */
#tab-bj .cg-seat .n, #tab-oc .cg-seat .n, #tab-jk .cg-seat .n { color: var(--ink-dim); font-size: 12px; }
#tab-bj .cg-status, #tab-oc .cg-status, #tab-jk .cg-status { font-size: 17px; }
#tab-bj .cg-label, #tab-oc .cg-label, #tab-jk .cg-label { font-size: 13px; }
#tab-bj .game-wrap button, #tab-oc .game-wrap button, #tab-jk .game-wrap button {
  font-size: 14px;
  padding: 9px 16px;
}
#tab-bj .cg-bar, #tab-oc .cg-bar, #tab-jk .cg-bar { height: 8px; border-radius: 4px; }
.suit-btn { width: 46px; height: 46px; font-size: 23px; }

/* 좁은 화면에서는 카드를 줄여 한 줄에 더 들어가게 */
@media (max-width: 700px) {
  :root { --card-w: 50px; --card-h: 72px; --card-font: 18px; }
  #tab-bj .hand, #tab-oc .hand, #tab-jk .hand { padding: 11px 12px; }
}

/* 게임 안의 작은 라벨 */
.cg-label { letter-spacing: .01em; }

/* 리더보드 카드도 게임 색을 따라간다 */
.lb-card h3 { color: var(--accent); }

@media (max-width: 650px) {
  .game-wrap { padding: 14px 12px; gap: 12px; }
  .game-wrap h2 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}