/* 퍼즐걸스 — 실시간 테이블/당첨 피드 전용 스타일
 * (css/games.css는 다른 작업자 소유 — 이 파일에서만 테이블/피드 스타일을 정의한다) */

/* ---------- 공통 사이드 패널 ---------- */
.pg-side-panel {
  background: var(--color-surface, #151d27);
  border: 1px solid var(--color-line, #2a3542);
  border-radius: 12px;
  padding: 14px 16px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.pg-side-title {
  margin: 0 0 10px;
  font-size: var(--text-lg, 1.125rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-accent, #d4af37);
}

/* ---------- 좌석 목록 (룰렛·바카라) ---------- */
.seat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.seat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto auto;
  gap: 6px 14px;
  align-items: baseline;
  padding: 8px 10px;
  background: rgba(13, 17, 23, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.55;
}
.seat.seat-win { border-color: rgba(63, 185, 80, 0.5); }
.seat-nick {
  font-family: var(--font-num, ui-monospace, "SF Mono", Menlo, monospace);
  letter-spacing: 0.02em;
  color: var(--color-text, #e8edf2);
  overflow-wrap: anywhere;
}
.seat-bet { color: var(--color-text-muted, #9aa7b4); font-size: 0.82rem; white-space: nowrap; }
.seat-net { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seat-net.win  { color: var(--color-success, #3fb950); }
.seat-net.lose { color: var(--color-error, #f85149); }
.seat-net.push { color: var(--color-text-muted, #9aa7b4); }
.seat-bank {
  color: var(--color-text-faint, #6b7885);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 라운드 결과 로그 ---------- */
.table-log {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--color-line, #2a3542);
  max-height: 170px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.table-log:empty { display: none; }
.log-line { margin: 0; font-size: 0.83rem; line-height: 1.6; color: var(--color-text-muted, #9aa7b4); }
.log-line.win { color: var(--color-success, #3fb950); }
.log-line.lose { color: var(--color-text-faint, #6b7885); }
.log-line.voided { color: var(--color-warning, #d29922); }

/* ---------- 토스트 ---------- */
#pg-table-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  max-width: min(92vw, 340px);
  padding: 12px 16px;
  background: var(--color-surface-raised, #1b2531);
  border: 1px solid var(--color-accent, #d4af37);
  border-radius: 12px;
  color: var(--color-text, #e8edf2);
  font-size: 0.92rem;
  line-height: 1.55;
  word-break: keep-all;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
#pg-table-toast.show { opacity: 1; transform: translateY(0); }

/* ---------- 슬롯 당첨 피드 ---------- */
.feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.feed-item {
  padding: 8px 10px;
  border-left: 3px solid var(--color-accent, #d4af37);
  background: rgba(13, 17, 23, 0.55);
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text, #e8edf2);
  animation: pg-feed-in 0.3s ease;
}
.feed-item.jackpot {
  border-left-color: #ffd700;
  background: rgba(212, 175, 55, 0.12);
  font-weight: 700;
}
@keyframes pg-feed-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .feed-item { animation: none; }
  #pg-table-toast { transition: none; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 560px) {
  .seat { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .seat-bank { grid-column: 1 / -1; }
  .seat-bet { font-size: 0.78rem; }
  #pg-table-toast { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}