:root {
  --mint: #19e3b1;
  --bar-h: 60px;
}

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

html, body {
  width: 100%; height: 100%;
  background: transparent;
  overflow: hidden;
  font-family: "Arial Black", Arial, Impact, sans-serif;
}

.stage {
  width: 100vw; height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20px;
}

/* ── scoreboard = klok + bar naast elkaar ── */
.scoreboard {
  display: flex;
  align-items: center;
  gap: 0;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.55));
}

/* ── klok: witte rounded rectangle, links ── */
.clock {
  position: relative;
  z-index: 1;
  height: var(--bar-h);
  padding: 0 42px 0 22px;
  display: grid;
  place-items: center;
  background: #fdfdfd;
  color: #141414;
  border-radius: 12px;
  font-size: 31px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  font-family: "Arial Black", Arial, sans-serif;
  margin-right: -16px;
}

/* ── zwarte bar: rounded rectangle (geen pill) ── */
.bar {
  position: relative;
  z-index: 2;
  height: var(--bar-h);
  display: flex;
  align-items: stretch;
  background: #0c0c0e;
  border-radius: 14px;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

/* ── team blokken ── */
.team {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #ffffff;
  text-transform: uppercase;
}

.team-home {
  padding-left: 26px;
}

.team-away {
  padding-right: 26px;
}

/* ── score: groot mintblok dat de zwarte balk volledig splitst ── */
.score {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: var(--mint);
  border-radius: 10px;
  overflow: hidden;
}

.score-cell {
  width: 54px;
  display: grid;
  place-items: center;
  color: #04241d;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.score-split {
  display: block;
  width: 3px;
  align-self: stretch;
  background: rgba(4, 36, 29, 0.38);
}

/* ── dots ── */
.dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-red  { background: #e8192c; }
.dot-blue { background: #2563eb; }

/* ── flags: normale vlagverhouding ── */
.flag {
  width: 36px;
  height: 24px;
  display: block;
  flex-shrink: 0;
  border-radius: 3px;
  overflow: hidden;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.9),
    inset 0 0 0 1px rgba(255,255,255,0.2);
}

/* NL: rood-wit-blauw horizontaal */
.flag-nl {
  background: linear-gradient(to bottom,
    #ae1c28 0 33.333%,
    #ffffff 33.333% 66.666%,
    #21468b 66.666%);
}

/* SWE: blauw met geel kruis */
.flag-se {
  background:
    linear-gradient(to right,  transparent 0 34%, #fecc00 34% 50%, transparent 50%),
    linear-gradient(to bottom, transparent 0 38%, #fecc00 38% 58%, transparent 58%),
    #006aa7;
}

/* ── status ── */
.status {
  position: fixed;
  left: 14px; bottom: 10px;
  color: rgba(255,255,255,0.8);
  font-family: Arial, sans-serif;
  font-size: 12px;
  text-shadow: 0 1px 3px #000;
}

@media (max-width: 900px) {
  .scoreboard { transform: scale(0.78); transform-origin: top center; }
}
@media (max-width: 600px) {
  .scoreboard { transform: scale(0.54); transform-origin: top center; }
}