:root {
  --bg: #0b0d10;
  --fg: #f4f5f7;
  --dim: #5b6270;
  --faint: #1b1f26;
  --shot: #ffb020;
  --warn: #ff4d4f;
  --badge: min(30vh, 24vw);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  overflow: hidden;
  cursor: default;
  user-select: none;
}

body.idle { cursor: none; }

.board {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 4vh 4vw;
  gap: 2vw;
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vh;
}

.badge {
  width: var(--badge);
  height: var(--badge);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11%;
  box-shadow: inset 0 0 0 0.3vh rgba(255, 255, 255, 0.14);
  transition: background-color 0.3s, box-shadow 0.3s;
}

/* Possession: a clean white ring around the circle. */
.badge.has-ball {
  box-shadow: 0 0 0 1vh var(--bg), 0 0 0 1.6vh var(--fg);
}

.name {
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: keep-all;
}

.score {
  font-size: 30vh;
  font-weight: 600;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}

.score.bump { animation: bump 0.35s ease-out; }

@keyframes bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.fouls {
  display: flex;
  gap: 1.4vh;
  height: 4vh;
  align-items: center;
}

.fouls i {
  width: 1.8vh;
  height: 1.8vh;
  border-radius: 50%;
  background: var(--faint);
}

.fouls i.on { background: var(--fg); }
.fouls.bonus i.on { background: var(--shot); }
.fouls b {
  font-size: 2.6vh;
  font-weight: 600;
  color: var(--shot);
  margin-left: 0.4vh;
}

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vh;
  min-width: 34vw;
}

.clock {
  font-size: 22vh;
  font-weight: 600;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.clock.stopped { color: #c9ced6; }
.clock.final { color: var(--warn); }

.period {
  font-size: 7vh;
  font-weight: 500;
  color: var(--dim);
  letter-spacing: 0.12em;
}

.shot {
  margin-top: 3vh;
  font-size: 13vh;
  font-weight: 600;
  line-height: 0.9;
  color: var(--shot);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: center;
}

.shot.low { color: var(--warn); }
.shot[hidden] { display: block; visibility: hidden; }

/* Pairing card in the corner */
.pair {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2.5vh;
  display: flex;
  align-items: center;
  gap: 1.6vh;
  padding: 1.4vh;
  border-radius: 1.6vh;
  background: #15181e;
}

.pair[hidden] { display: none; }

.qr { background: #fff; border-radius: 0.8vh; padding: 0.8vh; line-height: 0; }
.qr svg { display: block; width: 100%; height: 100%; }
#qr-small { width: 15vh; height: 15vh; }

.pair-label { font-size: 2.4vh; color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; }
.pair-code { font-size: 4.6vh; font-weight: 700; letter-spacing: 0.14em; }

.status {
  position: fixed;
  left: 2.5vh;
  bottom: 2.5vh;
  width: 1.2vh;
  height: 1.2vh;
  border-radius: 50%;
  background: var(--dim);
  opacity: 0.6;
}

.status.online { background: #3a6; }
.status.offline { background: var(--warn); }

/* Start overlay */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 13, 16, 0.92);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.overlay[hidden] { display: none; }

.start-card { text-align: center; max-width: 80vw; }
.qr-big { width: 38vh; height: 38vh; margin: 0 auto 4vh; padding: 1.6vh; border-radius: 1.6vh; }
.start-card h1 { font-size: 5vh; font-weight: 600; margin: 0 0 1.5vh; }
.start-card .url { font-size: 3.4vh; color: #9aa2ae; margin: 0 0 4vh; letter-spacing: 0.02em; }
.tv-icons {
  position: fixed;
  top: 2.5vh;
  right: 2.5vh;
  display: flex;
  gap: 1.2vh;
  z-index: 10;
}
.tv-icon {
  width: 6vh;
  height: 6vh;
  padding: 1.4vh;
  border: 0;
  border-radius: 50%;
  background: #15181e;
  color: var(--dim);
  cursor: pointer;
}
.tv-icon svg { width: 100%; height: 100%; display: block; }
.tv-icon:hover, .tv-icon:focus { color: var(--fg); background: #1d2129; outline: none; }
.tv-icon[hidden] { display: none; }

.fouls .role {
  font-size: 3.2vh;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--dim);
  margin-right: 0.8vh;
}

.fouls .pending {
  font-size: 4vh;
  font-weight: 600;
  color: var(--shot);
  font-variant-numeric: tabular-nums;
}