/* PoolCoach TV (bàn giao 15) — layout nhìn xa 2–3 m, nền tối, chữ to.
   Class RIÊNG toàn bộ — trang TV không nạp style.css của app (không mượn
   class có event binding; bài học .btn-play 04/08). Đơn vị chữ theo vmin
   để cùng một tỉ lệ trên TV 32" lẫn cửa sổ dev nhỏ. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0b0f13;
  --text: #e8edf2;
  --muted: #93a1ad;
  --green: #17a35a;
  --card: #141a21;
  --card-b: #2a333d;
}

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, "Segoe UI", sans-serif;
  overflow: hidden;
}

.hidden { display: none !important; }

.scr { height: 100vh; width: 100vw; }

/* ------------------------------------------------ màn pair / màn chờ */

#scr-pair, #scr-wait { display: flex; align-items: center; justify-content: center; }

.center-box { text-align: center; }

.brand {
  font-size: 6vmin;
  font-weight: 650;
  color: var(--muted);
  margin-bottom: 4vmin;
}

.pair-code {
  font-size: 22vmin;
  font-weight: 800;
  letter-spacing: 2.5vmin;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-shadow: 0 0 4vmin rgba(23, 163, 90, .35);
  margin-bottom: 4vmin;
}

.wait-ok {
  font-size: 9vmin;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 4vmin;
}

.hint { font-size: 3.6vmin; line-height: 1.5; color: var(--muted); }
.hint b { color: var(--text); }

/* --------------------------------------------------- màn cú đánh (bước 4) */

#scr-shot {
  display: grid;
  grid-template-columns: 1fr minmax(24vw, 30vw);
  gap: 1.5vmin;
  padding: 1.5vmin;
}

#tv-table-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.tv-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5vmin;
  padding: 2vmin;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: 1.5vmin;
  overflow: hidden;
}

.tv-describe {
  font-size: 2.7vmin;
  line-height: 1.45;
  white-space: pre-wrap;
}

.tv-viz { display: flex; align-items: center; gap: 2vmin; }

#tv-spin { width: 11vmin; height: 11vmin; flex: none; }

.tv-chips { display: flex; flex-direction: column; gap: 1.2vmin; min-width: 0; }

.tv-chip {
  font-size: 3.2vmin;
  font-weight: 700;
  padding: 1vmin 1.8vmin;
  background: #1d242c;
  border: 1px solid var(--card-b);
  border-radius: 1.2vmin;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tv-alts { display: flex; flex-direction: column; gap: 1vmin; margin-top: auto; }

.tv-alt {
  font-size: 2.2vmin;
  color: var(--muted);
  padding: 1vmin 1.4vmin;
  border: 1px dashed var(--card-b);
  border-radius: 1vmin;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tv-alt b { color: var(--text); }

/* ------------------------------------------------------- góc màn hình */

.tv-corner {
  position: fixed;
  right: 1.8vmin;
  bottom: 1.4vmin;
  display: flex;
  gap: 2vmin;
  font-size: 2.4vmin;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* chỗ confidence CV — ĐỂ TRỐNG có chủ đích (chưa có CV, bàn giao sau) */
.tv-cv { opacity: .35; }

.ws-down {
  position: fixed;
  left: 50%;
  bottom: 3vmin;
  transform: translateX(-50%);
  padding: 1.4vmin 3vmin;
  font-size: 2.8vmin;
  color: #ffd9d9;
  background: rgba(120, 25, 25, .92);
  border-radius: 1.2vmin;
}