/* 화면 전체를 채우는 레이아웃: 상단바 + (팀 격자 | 판돈 패널) */
body {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar { padding: 10px 20px; flex: none; }

.title-wrap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}
.title-wrap h1 {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.mode {
  color: var(--muted);
  font-size: 0.95rem;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.clock { color: var(--muted); font-size: 1.05rem; }

.board {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: clamp(8px, 1.2vmin, 18px);
  padding: clamp(8px, 1.2vmin, 18px);
}

/*
 * 팀 격자. 줄 수(--rows)·칸 수(--cols)·채우는 방향(--flow)은 display.js 가 팀 수에 맞춰 넣는다.
 *   세로 우선(column): 1 3 5 7 / 2 4 6 8
 *   가로 우선(row)   : 1 2 3 4 / 5 6 7 8
 */
.grid {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr));
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  grid-auto-flow: var(--flow, column);
  gap: clamp(8px, 1.2vmin, 18px);
}

/*
 * 카드 안의 글자 크기는 카드 크기에 비례한다 (cqi = 카드 폭의 1%, cqh = 카드 높이의 1%).
 * 폭과 높이 중 더 빡빡한 쪽에 맞춰 넘치지 않게 min() 을 쓴다.
 */
.card {
  container-type: size;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: clamp(4px, 0.6vmin, 8px) solid var(--team);
  border-radius: var(--radius);
  padding: clamp(10px, 2vmin, 32px) clamp(12px, 2.4vmin, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2vmin, 18px);
}

.card-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  min-width: 0;
}
.card-head h2 {
  margin: 0;
  font-size: clamp(14px, min(8cqi, 13cqh), 96px);
  line-height: 1.1;
  color: var(--team);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 팀 시간: 카드의 가운데 공간을 채운다. 8글자 "00:00:00" 이 폭에 맞게 */
.time-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
}
.total {
  font-size: clamp(22px, min(19.5cqi, 42cqh), 600px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.card.paused .total,
.card.done .total { color: var(--muted); }
.card.fast .total { color: var(--fast); }
.card.slow .total { color: var(--slow); }

/* 팀원 이름 (최대 두 줄) */
.names {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  max-height: 3.4em;
  overflow: hidden;
  font-size: clamp(10px, min(3.6cqi, 6cqh), 40px);
}
.name {
  padding: 0.15em 0.7em;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  white-space: nowrap;
}

.badge {
  flex: none;
  font-size: clamp(10px, min(3.6cqi, 6.5cqh), 40px);
  padding: 0.25em 0.8em;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  white-space: nowrap;
}
.badge.running { color: var(--ok); }
.badge.running::before {
  content: "● ";
  animation: pulse 1s ease-in-out infinite;
}
.badge.fast { background: var(--fast); color: #1d1300; font-weight: 700; }
.badge.slow { background: var(--slow); color: #00182b; font-weight: 700; }
.badge.done { background: var(--danger); color: #fff; font-weight: 700; }

@keyframes pulse {
  50% { opacity: 0.3; }
}

.empty {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-self: center;
  text-align: center;
  color: var(--muted);
  font-size: 1.5rem;
}
.empty .hint { font-size: 1rem; }

/* ---------- 판돈 패널 (배팅판일 때 오른쪽) ---------- */

.pot {
  container-type: size;
  flex: none;
  width: clamp(240px, 24vw, 520px);
  min-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--bet) 7%, var(--panel));
  border: 2px solid var(--bet);
  border-radius: var(--radius);
  padding: clamp(14px, 2.4vmin, 40px) clamp(14px, 2vmin, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.4vmin, 20px);
}
.pot-label {
  align-self: flex-start;
  font-size: clamp(14px, min(9cqi, 5.5cqh), 60px);
  font-weight: 800;
  padding: 0.15em 0.8em;
  border-radius: 999px;
  background: var(--bet);
  color: #1d1300;
}
.pot-rule {
  font-size: clamp(12px, min(6.5cqi, 3.8cqh), 40px);
  color: var(--text);
}
.pot-caption {
  margin-top: auto;
  font-size: clamp(12px, min(7cqi, 4.2cqh), 44px);
  color: var(--muted);
}
/* 판돈 총액: 8글자 "00:00:00" 이 패널 폭에 맞게 */
.pot-total {
  font-size: clamp(24px, min(19cqi, 16cqh), 200px);
  font-weight: 800;
  line-height: 1;
  color: var(--bet);
  letter-spacing: -0.02em;
}
.pot-note {
  font-size: clamp(10px, min(4.5cqi, 2.8cqh), 26px);
  color: var(--muted);
}
.pot-split {
  display: grid;
  gap: 0.3em;
  font-size: clamp(12px, min(6.5cqi, 4cqh), 40px);
  padding-top: 0.5em;
  border-top: 1px solid color-mix(in srgb, var(--bet) 35%, transparent);
}
.pot-split div { display: flex; justify-content: space-between; gap: 0.5em; }
.pot-split span { color: var(--muted); }
.payouts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25em;
  font-size: clamp(12px, min(6.5cqi, 4cqh), 40px);
  overflow: hidden;
}
.payouts li { display: flex; justify-content: space-between; gap: 0.5em; }
.p-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.p-ms { color: var(--ok); font-weight: 700; }
/* 총액 블록을 세로 가운데쯤에 둔다 */
.pot > :last-child { margin-bottom: auto; }

/* 휴대폰처럼 좁은 화면: 판돈 위, 팀은 한 줄에 하나씩 스크롤 */
@media (max-width: 600px) {
  body { height: auto; overflow: auto; }
  .topbar { padding: 10px 16px; }
  .board { flex-direction: column-reverse; padding: 12px 16px; }
  .pot { width: auto; height: max(260px, 70vw); }
  .grid {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-auto-rows: max(260px, 60vw);
  }
}