/*
 * Het beamerscherm, nagebouwd.
 *
 * Dit is de stilte in "luid buiten, stil binnen": overal om dit blok heen staat de
 * pagina te schreeuwen, en hierbinnen gebeurt precies niets bijzonders. Dat is geen
 * gemiste kans maar het argument — zo ziet het er in de zaal ook uit.
 *
 * Bewust een nábouw en geen kopie van public/css/beamer.css: de echte beamer vult
 * een heel scherm en mag nooit scrollen (100vh, overflow hidden), wat op een
 * webpagina juist averechts werkt. Kleuren, verhoudingen en data zijn wel dezelfde.
 */

.scherm-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--r4);
  margin-bottom: var(--r4);
}

.scherm-kop .waar {
  font-size: 0.875rem;
  color: var(--grijs);
}

.scherm-kop .waar b {
  color: var(--wit);
  font-weight: 600;
}

.bediening {
  display: flex;
  align-items: center;
  gap: var(--r2);
}

.bediening button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font: inherit;
  color: var(--zacht);
  background: var(--ink-kaart);
  border: 1px solid var(--lijn-fel);
  border-radius: var(--rond);
  cursor: pointer;
  transition:
    color var(--snel) ease,
    border-color var(--snel) ease;
}

.bediening button:hover {
  color: var(--wit);
  border-color: var(--oranje);
}

.bediening svg {
  width: 18px;
  height: 18px;
}

.stippen {
  display: flex;
  gap: var(--r2);
  margin-inline: var(--r2);
}

.stippen button {
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* Het bolletje is klein, het aanraakvlak eromheen niet. */
.stippen button::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lijn-fel);
  transition: background-color var(--snel) ease;
}

.stippen button[aria-current='true']::after {
  background: var(--oranje);
}

/*
 * De gloed eromheen is wat een projector in een donkere ruimte doet: het licht
 * valt buiten het beeld. Vandaar warm, en vandaar zo zacht.
 */
.beamer {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: clamp(var(--r4), 2.4vw, var(--r8));
  border-radius: var(--rond);
  background: var(--s-bg);
  color: var(--s-tekst);
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 40%),
    0 0 100px -24px rgb(244 241 234 / 34%),
    0 34px 80px -34px rgb(0 0 0 / 85%);
}

@media (max-width: 680px) {
  .beamer {
    aspect-ratio: auto;
    min-height: 27rem;
  }
}

.beamer-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--r4);
  flex: none;
  padding-bottom: var(--r2);
  margin-bottom: clamp(var(--r3), 1.8vw, var(--r6));
  border-bottom: 2px solid var(--s-lijn);
}

.beamer-kop .naam {
  font-weight: 800;
  font-size: clamp(0.95rem, 1.9vw, 1.5rem);
  letter-spacing: -0.02em;
}

.beamer-kop .fase {
  font-size: clamp(0.65rem, 1.1vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-tekst-zacht);
  text-align: right;
}

.beeld {
  display: none;
}

/*
 * Op de echte beamer schaalt alles met de schermhoogte zodat het beeld de muur
 * vult. Dat kan hier niet met vh — dit is maar een deel van de pagina — dus vult
 * de inhoud de hoogte in plaats van bovenaan te blijven hangen.
 */
.beeld[data-actief='true'] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
}

.beeld > * {
  flex: 1 1 auto;
}

/* --- borden --------------------------------------------------------------- */

.borden {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(0.4rem, 1.3vw, 0.9rem);
}

.bord {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--s-vlak);
  border: 1px solid var(--s-lijn);
  border-radius: 4px;
}

/*
 * De kopbalk is groen omdat er gespeeld wordt — dat is wat groen op dit scherm
 * betekent. De poulekleur hoort daar dus niet ook nog op: poule A is diezelfde
 * groentint en zou onzichtbaar worden. Die badge staat in de kaart zelf.
 */
.bord-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r2);
  padding: 0.28rem 0.65rem;
  background: var(--poule-a);
  color: #fff;
  font-weight: 800;
  font-size: clamp(0.65rem, 1.3vw, 0.95rem);
  letter-spacing: 0.04em;
}

.bord-kop .bezig {
  font-size: 0.8em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}

.bord-lijf {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding: clamp(0.45rem, 1.2vw, 0.9rem);
}

.bord-lijf .poule {
  align-self: start;
  margin-bottom: 0.45rem;
  padding: 0.1em 0.55em;
  border-radius: 0.3em;
  background: var(--poule);
  color: #fff;
  font-weight: 800;
  font-size: clamp(0.58rem, 1.05vw, 0.8rem);
}

.partij {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 0.6rem;
  align-items: center;
  font-size: clamp(0.82rem, 1.8vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.partij .legs {
  color: var(--s-tekst-zacht);
  font-variant-numeric: tabular-nums;
}

.hierna {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--s-lijn);
  font-size: clamp(0.62rem, 1.15vw, 0.88rem);
  color: var(--s-tekst-zacht);
}

.hierna .letter {
  color: var(--poule);
  font-weight: 800;
}

/* --- standen -------------------------------------------------------------- */

.standen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.6rem, 2vw, 1.5rem);
  align-items: stretch;
}

.standen > section {
  display: flex;
  flex-direction: column;
}

/* De rijen rekken mee, zodat een poule van vijf en een van zes even hoog worden. */
.standen table {
  flex: 1;
}

.stand-kop {
  display: flex;
  align-items: center;
  gap: var(--r2);
  margin-bottom: 0.45rem;
  font-size: clamp(0.75rem, 1.45vw, 1.1rem);
  font-weight: 800;
}

.stand-kop .poule {
  padding: 0.05em 0.55em;
  border-radius: 0.3em;
  background: var(--poule);
  color: #fff;
}

.beamer table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.72rem, 1.55vw, 1.15rem);
  font-variant-numeric: tabular-nums;
}

.beamer th {
  padding: 0.15rem 0.3rem;
  text-align: right;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s-tekst-zacht);
}

.beamer th:first-child {
  text-align: left;
}

.beamer td {
  padding: 0.3rem;
  text-align: right;
  border-top: 1px solid var(--s-lijn);
}

.beamer td:first-child {
  text-align: left;
  font-weight: 700;
}

.beamer tr[data-door='true'] td {
  background: var(--s-door);
}

.beamer td.punten {
  font-weight: 800;
}

/* --- knock-out ------------------------------------------------------------ */

.schema {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(0.4rem, 1.5vw, 1.1rem);
}

.schema > section {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ronde-naam {
  margin-bottom: 0.45rem;
  font-size: clamp(0.58rem, 1.05vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s-tekst-zacht);
}

/* De partijen verdelen de hoogte: vier kwartfinales naast één finale. */
.ko-lijst {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
}

.ko {
  padding: 0.45rem 0.65rem;
  background: var(--s-vlak);
  border: 1px solid var(--s-lijn);
  border-left: 4px solid var(--s-lijn);
  border-radius: 4px;
  font-size: clamp(0.7rem, 1.5vw, 1.1rem);
}

.ko--finale {
  border-left-color: var(--poule-a);
}

.ko-regel {
  display: flex;
  justify-content: space-between;
  gap: var(--r3);
  font-variant-numeric: tabular-nums;
}

.ko-regel[data-winnaar='true'] {
  font-weight: 800;
}

.ko-regel[data-winnaar='false'] {
  color: var(--s-tekst-zacht);
}

/* --- podium --------------------------------------------------------------- */

/*
 * De treden zijn een percentage van de beschikbare hoogte, niet van het lettertype:
 * zo blijft de verhouding 1–2–3 kloppen op elk formaat.
 */
.podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.35rem, 1.3vw, 0.9rem);
  align-items: stretch;
  width: 100%;
  border-bottom: 2px solid var(--s-lijn);
}

.trede {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  text-align: center;
}

.trede .wie {
  margin-bottom: 0.4rem;
  font-size: clamp(0.82rem, 2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.trede .blok {
  display: grid;
  place-items: center;
  background: var(--s-vlak-op);
  border: 1px solid var(--s-lijn);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  font-size: clamp(1.1rem, 3.4vw, 2.6rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--s-tekst-zacht);
}

.trede[data-plaats='1'] .blok {
  height: 74%;
  background: var(--poule-a);
  border-color: var(--poule-a);
  color: #fff;
}

.trede[data-plaats='2'] .blok {
  height: 54%;
}

.trede[data-plaats='3'] .blok {
  height: 38%;
}

/* --- onderschrift --------------------------------------------------------- */

.scherm-uitleg {
  margin-top: var(--r4);
  max-width: 68ch;
  font-size: 0.9375rem;
  color: var(--grijs);
}