/* Ported from "Rondebord Oliebollentocht 2024 [definitief].html" */
html, body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #000;
  color: #fff;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: default;
}
h1 {
  margin: 1.5vh 0 0;
  font-size: clamp(1.5rem, 5vh, 3rem);
  color: #fff;
}
.grid {
  flex: 1;
  display: grid;
  gap: 10px;
  padding: 0 1vw 1vh;
  min-height: 0;
}
.grid.n1 { grid-template: 1fr / 1fr; }
.grid.n2 { grid-template: 1fr / 1fr 1fr; }
.grid.n3, .grid.n4 { grid-template: 1fr 1fr / 1fr 1fr; }

.groep {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  container-type: inline-size;
}
/* Sizes depend only on the cell, never on the content, so nothing jumps. */
.titel {
  font-size: min(clamp(1.25rem, 6vh, 4rem), 5.5cqi);
  font-weight: bold;
  margin: 1vh 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ronde-box {
  flex: 1;
  min-height: 0;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ronde {
  font-weight: bold;
  line-height: 1;
  user-select: none;
  white-space: pre-line;
  font-size: min(85cqh, 52cqw);
  font-variant-numeric: tabular-nums;
}
.ronde.text {
  /* "we gaan door": much smaller than the numbers, fits one line in the same box */
  font-size: min(18cqh, 9cqw);
  line-height: 1.1;
  white-space: normal;
  max-width: 100cqw;
  text-wrap: balance;
}
.ronde.bump {
  animation: bump 600ms ease-out;
}
@keyframes bump {
  0% { transform: scale(1.12); filter: brightness(1.6); }
  100% { transform: scale(1); filter: none; }
}
.empty {
  grid-column: 1 / -1;
  align-self: center;
  font-size: 3rem;
  color: #666;
}

.dot {
  position: fixed;
  right: 8px;
  bottom: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c00;
  opacity: 0.7;
}
.dot.ok { background: #0a0; opacity: 0.35; }

.fs {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 10px 18px;
  font: inherit;
  color: #fff;
  background: #222;
  border: 1px solid #555;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 300ms;
}
body.idle .fs { opacity: 0; pointer-events: none; }
body.idle { cursor: none; }

.snowflake {
  position: fixed;
  top: -10vh;
  color: white;
  font-size: 4rem;
  pointer-events: none;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(115vh); }
}