:root{
  --u: min(1vw, 1vh);

  --bgTop: rgba(0,0,0,0.92);
  --bgBot: rgba(0,0,0,0.80);

  --text: #fff;
  --muted: rgba(255,255,255,0.72);
  --muted2: rgba(255,255,255,0.58);

  --radius: 22px;
  --shadow: 0 10px 30px rgba(0,0,0,0.55);
}

*{ box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin: 0;
  background: #000;          /* key: stop Dakboard background washing us out */
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow: hidden;
}

.card{
  width: 100vw;
  height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: clamp(10px, calc(var(--u) * 1.6), 18px);

  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bgTop), var(--bgBot));
  box-shadow: var(--shadow);

  /* remove backdrop-filter — it’s what makes it look “grey/washed” on Dakboard */
  /* backdrop-filter: blur(10px); */
}

.toprow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: clamp(6px, calc(var(--u) * 0.8), 10px);
}

.teamname{
  font-weight: 600;
  letter-spacing: 0.2px;
  font-size: clamp(14px, calc(var(--u) * 2.1), 22px);
  color: var(--muted);
}

.pill{
  font-weight: 800;
  font-size: clamp(11px, calc(var(--u) * 1.7), 16px);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  line-height: 1;
}

.scorewrap, .nextwrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hidden{ display: none !important; }

.scoreline{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, calc(var(--u) * 1.4), 18px);
}

.side{
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, calc(var(--u) * 1.1), 14px);

  padding: clamp(8px, calc(var(--u) * 1.0), 12px) clamp(10px, calc(var(--u) * 1.2), 14px);
  border-radius: 18px;
  background: rgba(255,255,255,0.07);
}

.logo{
  width: clamp(42px, calc(var(--u) * 4.0), 75px);
  height: clamp42px, calc(var(--u) * 4.0), 75px);
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));
}

.abbr{
  font-weight: 900;
  letter-spacing: 0.10em;
  font-size: clamp(14px, calc(var(--u) * 2.4), 26px);
}

.num{
  font-weight: 900;
  font-size: clamp(22px, calc(var(--u) * 5.2), 62px);
  line-height: 1;
}

.dash{
  font-weight: 900;
  font-size: clamp(18px, calc(var(--u) * 3.2), 40px);
  color: rgba(255,255,255,0.82);
  transform: translateY(-2px);
}

.state{
  margin-top: clamp(4px, calc(var(--u) * 0.7), 8px);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(12px, calc(var(--u) * 1.7), 17px);
  color: rgba(255,255,255,0.95);
}

.sub{
  margin-top: 4px;
  font-size: clamp(12px, calc(var(--u) * 1.6), 17px);
  color: var(--muted2);
}

/* NEXT GAME */
.nexttitle{
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: clamp(12px, calc(var(--u) * 1.7), 17px);
  color: rgba(255,255,255,0.95);
  margin-bottom: clamp(6px, calc(var(--u) * 0.8), 10px);
}

.nextline{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, calc(var(--u) * 1.2), 16px);
}

.nextside{
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, calc(var(--u) * 1.0), 12px);

  padding: clamp(8px, calc(var(--u) * 1.0), 12px) clamp(10px, calc(var(--u) * 1.2), 14px);
  border-radius: 18px;
  background: rgba(255,255,255,0.07);
}

.nextvs{
  font-weight: 900;
  font-size: clamp(14px, calc(var(--u) * 2.5), 24px);
  color: rgba(255,255,255,0.88);
}

.nexttime{
  margin-top: clamp(6px, calc(var(--u) * 0.9), 12px);
  font-size: clamp(14px, calc(var(--u) * 2.1), 21px);
  color: rgba(255,255,255,0.88);
}