/* ====================================================================
   table.css  —  테이블 위에 올라가는 그림들 (펠트 · 리본 · 주사위)

   여러 게임이 같이 쓰는 것만 둡니다. 한 게임에서만 쓰는 모양(식보의 텀블러,
   룰렛 휠 등)은 css/games/<게임>.css 로 가세요.

   ※ 아직 안 옮긴 게임만 쓰는 그림은 그 게임을 옮길 때 이 파일에 추가합니다.
   ==================================================================== */


/* ────────────────────────────────────────────────────────────
   펠트 — 인터랙티브 그림이 올라가는 녹색(보라) 보드
   ──────────────────────────────────────────────────────────── */

.felt {
  margin-bottom: 12px;
  padding: 16px 14px;
  border-radius: var(--radius-felt);
  background: radial-gradient(circle at 30% 8%, var(--brand-800), var(--brand-900) 78%);
  box-shadow: var(--shadow-felt);
}
.felt-cap {                                /* 보드 맨 위의 작은 캡션 */
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
  color: var(--felt-cap-ink);
}

/* 보드 아래에서 지금 단계를 말해주는 띠 */
.ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin-top: 11px;
  padding: 8px 10px;
  border-radius: var(--radius-ribbon);
  background: var(--ribbon-bg);
  color: var(--ribbon-ink);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

/* 펠트 위에 나오는 큰 숫자 (예: 주사위 합계) */
.roll-total {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--paper);
}


/* ────────────────────────────────────────────────────────────
   주사위 — 정지 상태의 면(.die) 과 굴러가는 3D 큐브(.cube)
   JS: js/shared/dice.js
   ──────────────────────────────────────────────────────────── */

.die {
  position: relative;
  border-radius: var(--radius-die);
  background: var(--paper);
  box-shadow: var(--shadow-die);
  flex-shrink: 0;
}
.pip {                                     /* 눈 — 위치는 JS 가 % 로 지정 */
  position: absolute;
  border-radius: 50%;
  background: var(--suit-ink);
  transform: translate(-50%, -50%);
}

/* 큐브: 6면이 3D 로 붙어 있다. 면마다 밝기를 고정하면 멈춘 앞면(3~6)이 회색으로 보여서 모든 면을 같은 흰색으로 둔다. */
.cube-wrap { position: relative; perspective: 480px; flex-shrink: 0; }
.cube      { position: relative; transform-style: preserve-3d; }
.cube-face {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 20%;
  background: var(--paper);
  box-shadow: inset 0 -2px 3px oklch(20% 0.06 300 / 0.12), inset 0 0 0 1px oklch(20% 0.06 300 / 0.08);   /* 안쪽 그림자 + 굴러갈 때 모서리가 보이게 얇은 테 */
  backface-visibility: hidden;
}


/* ────────────────────────────────────────────────────────────
   숫자 카드 — 눈금 모양으로 무늬가 박힌 카드
   JS: js/shared/playing-cards.js  (크기·무늬 위치는 거기 SIZES / LAYOUTS)
   색은 글자색(currentColor)을 따라가서, 숫자와 무늬가 같은 색이다.
   ──────────────────────────────────────────────────────────── */

.pip-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--paper);
}
.pip-card--md { width: 38px; height: 52px; border-radius: 6px; }
.pip-card--sm { width: 34px; height: 47px; border-radius: 5px; }
.pip-card.is-red   { color: var(--suit-red); }
.pip-card.is-black { color: var(--suit-ink); }

.pip-card__rank {                          /* 왼쪽 위 숫자 */
  position: absolute;
  top: 2px;
  left: 3px;
  font-family: var(--font-display);
  font-weight: 700;
}
.pip-card--md .pip-card__rank { font-size: 9px; }
.pip-card--sm .pip-card__rank { font-size: 8px; }

.pip-card__pip {                           /* 무늬 하나 — 위치(left/top)는 JS 가 정함 */
  position: absolute;
  display: flex;                           /* 칸이 무늬 크기와 딱 맞게 (줄 높이가 끼어들면 가운데 기준이 어긋난다) */
  transform: translate(-50%, -50%);
}
.pip-card__pip.is-flipped { transform: translate(-50%, -50%) rotate(180deg); }


/* ── 숫자 카드 (왼쪽 위 숫자형: 블랙잭) ──────────────────────────────────
   크기·글자 크기·무늬 위치는 js/shared/playing-cards.js 의 INDEX_SIZES 가 style 로 넣는다.
   여기는 모든 크기가 같이 쓰는 "생김새"만. 무늬 안쪽 칸은 flex 로 무늬 크기에 딱 맞춘다
   (원본은 doctype 이 없어 줄 높이가 안 끼었다). */
.idx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--paper);
}
.idx-card.is-drawn  { border: none; background: var(--brand-700); }          /* 새로 뽑은 카드 */
.idx-card.is-upcard { border: 1.5px solid var(--brand-700); }                /* 강조한 딜러 카드 */

.idx-card__rank {                          /* 왼쪽 위 숫자 */
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
}
.idx-card__corner { position: absolute; display: flex; }                     /* 숫자 밑 작은 무늬 */
.idx-card__pip {                           /* 눈금 무늬 하나 */
  position: absolute;
  display: flex;
  transform: translate(-50%, -50%);
}
.idx-card__pip.is-flipped { transform: translate(-50%, -50%) rotate(180deg); }


/* ────────────────────────────────────────────────────────────
   그림 카드 — 가운데에 큰 숫자와 무늬 (3 카드 포커 · 스터드 포커)
   JS: js/shared/playing-cards.js 의 faceCard / faceCards (크기는 JS 가 너비에 비례해 정한다)
   ──────────────────────────────────────────────────────────── */

.face-cards { display: flex; }                /* 여러 장 한 줄 (간격은 JS) */
.face-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 1px 3px oklch(20% 0.06 300 / 0.2);
}
.face-card__rank { font-family: var(--font-display); font-weight: 700; line-height: 1; }
.face-card.is-red   .face-card__rank { color: var(--suit-red); }
.face-card.is-black .face-card__rank { color: var(--suit-ink); }
.face-card--back {                         /* 엎어 둔 카드: 사선 줄무늬 */
  border-color: var(--brand-900);
  background: repeating-linear-gradient(45deg, var(--brand-800) 0 4px, var(--brand-900) 4px 8px);
}
.face-card--slot {                         /* 아직 카드가 없는 자리 */
  border: 1.5px dashed oklch(90% 0.02 305 / 0.35);
  background: oklch(99% 0 0 / 0.07);
  box-shadow: none;
}

/* 카드가 한 장씩 차례로 나타난다 (faceCards 의 staggerMs) */
.card-deal { display: inline-block; animation: card-deal-in 0.32s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes card-deal-in {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.85) rotate(-6deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .card-deal { animation: none; } }


/* ────────────────────────────────────────────────────────────
   펠트 위 베팅 자리 · 칩 · 줄 이름 (카드 게임의 단계 그림)
   ──────────────────────────────────────────────────────────── */

.spot {                                    /* 베팅 자리 하나. 지금 단계에서 쓰이면 .is-lit (노란 테두리) */
  padding: 8px 6px;
  border: 1.5px solid var(--felt-spot-line);
  border-radius: 10px;
  background: var(--felt-spot);
  text-align: center;
}
.spot__name { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-200); }
.spot.is-lit { border-color: var(--lit); background: oklch(45% 0.06 305 / 0.7); box-shadow: var(--shadow-lit); }
.spot.is-lit .spot__name { color: var(--lit-ink); }

.felt-chip {                               /* 자리 안의 금색 칩 (걸렸을 때 .is-on) */
  width: 18px;
  height: 18px;
  margin: 6px auto 9px;
  border: 2px dashed oklch(96% 0.05 95 / 0.85);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, oklch(80% 0.15 95), oklch(56% 0.14 60));
  box-shadow: 2.5px 3px 0 -0.5px oklch(50% 0.12 60), 2.5px 3px 3px oklch(20% 0.06 300 / 0.4);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.felt-chip.is-on { opacity: 1; }

.felt-tag {                                /* 펠트 줄 왼쪽 이름 ("DEALER" · "YOU") */
  flex-shrink: 0;
  width: 52px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
  color: oklch(85% 0.03 305 / 0.62);
}