/*
 * Paint Your Idol — the frame around the canvas, in the Painted Idols house style
 * of 2026. Tokens and fonts come from huisstijl/huisstijl.css; the rules for using
 * them from the design handover (§3 colours, §4 type, §6 graphics, §7.2 components):
 * Nacht as the base, one accent, Athelas Italic for statements and numbers, Yanone
 * Kaffeesatz 600 for buttons and labels, Outfit for reading. Straight corners, no
 * gradients, no shadows.
 *
 * What happens inside the canvas keeps its meaning (the ramp per cube, gold for a
 * flawless band, red for a miss) and lives in weergave.mjs. UITERLIJK.md has both.
 *
 * What does NOT change here is any size that drives the layout: padding, margin,
 * font size and line height of everything above and below .doekhouder. That
 * holder gets the remaining height through flex and pas() measures it, so the
 * canvas must not change size while a value in the bar grows. BRIEFING.md §9.
 */

* {
  box-sizing: border-box;
}
html {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  margin: 0;
  background: var(--nacht);
  color: var(--linnen);
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  padding: 18px 16px 40px;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
}

/* Athelas Italic with one emphasis in Yanone and the paint stroke under it — the
   heading pattern of handover §4. Line height 0.98 stays: it sets how much height
   the title takes in the game view. */
h1 {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(44px, 8vw, 76px);
  line-height: 0.98;
  color: var(--linnen);
  margin: 0 0 2px;
}
/* Inline with no line height of its own: Yanone has other ascenders than Athelas,
   and as an inline-block it made the title 2 px taller and the canvas smaller. */
.nadruk {
  position: relative;
  line-height: 0;
  font-family: var(--font-sub);
  font-style: normal;
  font-weight: 600;
}
/* The stroke is an image, never a CSS line (handover §6.1). Absolute, so it adds
   no height to the title. */
.nadruk::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -5%;
  bottom: -0.08em;
  height: 0.13em;
  background: url("huisstijl/verfstreep.png") center / 100% 100% no-repeat;
}

.lead {
  color: var(--text-soft);
  margin: 0 0 18px;
  max-width: 62ch;
}

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 760px) {
  .stage {
    grid-template-columns: 1fr;
  }
}

/* ---------- the playing field ---------- */
.frame {
  background: var(--nacht);
  border: 1px solid var(--line);
  padding: 12px;
}

/* The bar with time, score, reveal. Labels in Yanone on text-muted, numbers in
   Athelas on Linnen. The label keeps a line height below the number's, so it can
   never be what sets the height of the bar. */
.hud {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0 0 8px;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Outside a run the five fields say nothing (0:00, 0, "-", 0%, 1x) and would push
   the bar onto three lines on a phone; only the buttons mean something then. */
.hud:not(.speelt) .tijdens {
  display: none;
}
/* During a run everything that does nothing goes, so the bar stays on ONE line and
   the height goes to the canvas (Willem, 16-09). */
.hud.speelt .et,
.hud.speelt .zuiver,
.hud.speelt #creditBtn {
  display: none;
}

.hud b {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  color: var(--linnen);
  display: inline-block;
  text-align: left;
}
/* Every field carries its widest value in data-max and this shadow line reserves
   that width, so a growing value never adds a line to the bar mid-run. Measured
   with test/opmaak.mjs. BRIEFING.md §9. */
.hud b::before {
  content: attr(data-max);
  display: block;
  height: 0;
  visibility: hidden;
  white-space: nowrap;
}
.hud .urgent b {
  color: var(--accent);
}

/* The time bar: the line colour as the track, the accent as the fill. */
.balk {
  height: 7px;
  background: var(--line);
  overflow: hidden;
  margin: 0 0 10px;
}
.balk i {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.12s linear;
}

canvas {
  display: block;
  margin: 0 auto;
  image-rendering: pixelated;
  touch-action: none;
  background: var(--nacht);
}

/* ---------- buttons ----------
   Primary: a Linnen block with Nacht text, hover to the accent (handover §7.2).
   Secondary: an outline on Nacht. Both Yanone, straight corners, and each the
   same height as the button it replaces. */
button {
  font: inherit;
  cursor: pointer;
}

.primary {
  background: var(--linnen);
  color: var(--nacht);
  border: 0;
  font-family: var(--font-sub);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  padding: 13px 30px;
  transition: background 120ms ease-out;
}
.primary:hover {
  background: var(--accent);
}

.tweede,
.knoppen button,
.doeken button,
.note button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-soft);
  font-family: var(--font-sub);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  padding: 9px 18px;
  transition:
    border-color 120ms ease-out,
    color 120ms ease-out;
}
.tweede:hover,
.knoppen button:hover,
.doeken button:hover,
.note button:hover {
  color: var(--accent);
  border-color: var(--accent);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The credit and stand buttons in the bar. Sizes unchanged: this is the tallest
   element in the bar and sets its height outside a run. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--accent);
  padding: 3px 6px 3px 11px;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 21px;
  transition: border-color 120ms ease-out;
}
.chip:hover {
  border-color: var(--accent);
}
.chip b {
  color: var(--accent) !important;
  font-size: 17px !important;
  line-height: 21px !important;
}
/* Round like the cart badge in the shop header, the one round mark in the design. */
.chip i {
  font-style: normal;
  background: var(--accent);
  color: var(--nacht);
  border-radius: 50%;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}
.chip:disabled {
  opacity: 0.45;
}

/* ---------- the screens over the canvas ----------
   Start, e-mail, credits, the standings and the end. They lie absolutely over
   .doekhouder, so nothing here touches the layout of the canvas. */
.doekhouder {
  position: relative;
}
.scherm {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* A flat veil of Nacht itself; the canvas stays visible underneath. */
  background: rgba(27, 28, 29, 0.94);
  padding: 16px;
  text-align: center;
}
.scherm[hidden] {
  display: none;
}

/* The countdown after the last stone covers the whole holder so a tap lands
   anywhere, but only the band at the bottom is veiled. */
.afloop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
}
.afloop[hidden] {
  display: none;
}
.afloopband {
  width: 100%;
  padding: 14px 16px 16px;
  background: rgba(27, 28, 29, 0.9);
  text-align: center;
}
.afloopkop {
  margin: 0;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.afloopregel {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.afloopregel b {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  font-variant-numeric: lining-nums;
  color: var(--linnen);
}
/* margin:auto and not align-items:center on .scherm: centred while it fits, and
   scrolling from the top once it does not. */
.schermbinnen {
  max-width: 340px;
  width: 100%;
  margin: auto;
}
.scherm h2 {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 7.4vw, 42px);
  line-height: 1;
  color: var(--linnen);
  margin: 0 0 10px;
}
.scherm .uitleg {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0 0 14px;
}
/* The promise on the start screen (Willem, 16-09): a statement, so Athelas, and
   the one accent moment on this screen. Which sentence it is hangs on the stand
   (`belofte` in server/src/config.mjs). */
.scherm .slogan {
  margin: 0 0 12px;
}
.scherm .slogan b {
  display: block;
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.05;
  color: var(--accent);
}
.scherm .slogan span {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  margin-top: 3px;
}
/* Why the run stopped: a side note, so a small label. */
.scherm .reden {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.scherm .reden:empty {
  display: none;
}
.scherm .klein {
  font-size: 12px;
  color: var(--text-muted);
  margin: 12px 0 0;
}
/* The final score is the number you look back on, and it stands still. */
.scherm .groot {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: 68px;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--linnen);
  margin: 0 0 2px;
}
/* An eyebrow (handover §4): Outfit, capitals, 0.18em, the accent. */
.scherm .schaal,
.scherm .volgende,
.top {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.scherm .schaal {
  margin: 0;
}
.scherm .schaal:empty {
  display: none;
}
.scherm .runs,
.runs {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.scherm .volgende {
  margin: 0 0 14px;
}
.schermknoppen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* The figures under the final score. */
.tally {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.tally[hidden] {
  display: none !important;
}
.tally div {
  display: flex;
  flex-direction: column;
}
.tally b {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--linnen);
}
.tally span {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.scherm .tally {
  justify-content: center;
  gap: 18px;
  margin: 10px 0 12px;
}
.scherm .tally b {
  font-size: 24px;
}

/* What this canvas paid out: a message, so the reading type. */
.scherm .tegoed {
  font-size: 14px;
  color: var(--linnen);
  margin: 0 0 8px;
}
.scherm .tegoed[hidden] {
  display: none;
}
.scherm .tegoed b {
  font-weight: 600;
  color: var(--accent);
}

.top {
  margin: 0 0 6px;
}

/* The three levels, and the same box for the credit bundels: the numbered list of
   handover §7.2 — number in Athelas, text in Yanone — on nacht-2. */
.niveaus {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.niveau {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  width: 100%;
  background: var(--nacht-2);
  border: 1px solid var(--line);
  color: var(--linnen);
  padding: 12px 14px;
  font: inherit;
  transition: border-color 120ms ease-out;
}
.niveau:hover {
  border-color: var(--accent);
}
/* A bundle can only be bought once the box below is ticked (LEK-TEGOED.md §10).
   Out by aria-disabled rather than disabled: it looks out, but a click or a tab
   onto it still arrives and gets the reason instead of nothing. */
.niveau:disabled,
.niveau[aria-disabled="true"] {
  opacity: 0.45;
}
.niveau:disabled:hover,
.niveau[aria-disabled="true"]:hover {
  border-color: var(--line);
}
/* The tick box that message points at: the accent frame, twice, then it stays. */
.vink.wijs {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  color: var(--linnen);
  animation: wijs 0.6s ease-out 2;
}
@keyframes wijs {
  50% {
    outline-color: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vink.wijs {
    animation: none;
  }
}

/* "Uitleg opnieuw", under the practice level: belongs to the block above it. */
.uitleg-opnieuw {
  align-self: flex-end;
  margin-top: -4px;
  padding: 5px 12px;
  font-size: 15px;
}
.niveau .nr {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--accent);
  min-width: 26px;
}
.niveau .tx {
  flex: 1;
}
.niveau .tt {
  display: block;
  font-family: var(--font-sub);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--linnen);
}
.niveau .st {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}
/* Two marks, not two colours: what counts carries the accent. */
.niveau .badge {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.badge.gratis {
  color: var(--text-muted);
}
.badge.prijs {
  color: var(--accent);
  border-color: var(--accent);
}

/* The picture of what you played free, at the top of the end screen. */
.mini {
  display: block;
  margin: 0 auto 10px;
  width: 88px;
  height: auto;
  image-rendering: pixelated;
}

/* The e-mail field. 16px so iOS does not zoom in on focus. */
.veld {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--linnen);
  padding: 13px 15px;
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 16px;
  margin: 0 0 8px;
  text-align: center;
}
.veld::placeholder {
  color: var(--text-dim);
}
.veld:focus {
  outline: none;
  border-color: var(--accent);
}
/* An error says what to do, in the accent: red exists in this game only inside
   the canvas, where it marks a miss. */
.fout {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 0 0 8px;
}
.vink {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.vink input {
  margin-top: 3px;
  accent-color: var(--accent);
}

/* ---------- the scoreboard inside the game ----------
   Rows walk to their place instead of jumping (PLAN taak 7): each row keeps its
   element and gets a new translateY. The row height is written once, in
   --bord-rij; bord.mjs reads it from the style. */
.bord {
  --bord-rij: 30px;
  position: relative;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  width: 100%;
  transition: height 0.45s ease-out;
}
.bord.leeg {
  margin: 0;
}
.bord .regel,
.bord .gat {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--bord-rij);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease-out,
    background-color 0.45s ease-out;
}
.bord .regel.komt {
  opacity: 0;
  transform: translateY(24px);
}
.bord .regel.weg {
  opacity: 0;
}
.bord .regel.licht {
  background: rgba(201, 164, 102, 0.16);
}
.bord .pl {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  font-variant-numeric: lining-nums;
  color: var(--text-dim);
  width: 2.2em;
  text-align: right;
  flex: none;
}
.bord .nm {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--linnen);
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bord .sc {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--linnen);
  flex: none;
}
/* Your own row carries the accent: that is the row you look for. */
.bord .regel.ik {
  border-left: 2px solid var(--accent);
}
.bord .regel.ik .nm,
.bord .regel.ik .sc,
.bord .regel.ik .pl {
  color: var(--accent);
}
.bord .gat {
  justify-content: center;
  height: 18px;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.3em;
}
#standScherm .schermbinnen {
  max-width: 380px;
}
#standScherm h2 {
  margin-bottom: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .bord,
  .bord .regel,
  .bord .gat {
    transition: none;
  }
}

/* ---------- test view: the panel on the right and the briefing ----------
   Off in the game view (body.live .test). Same tokens, so no second design. */
.zij {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kaart {
  background: var(--nacht-2);
  border: 1px solid var(--line);
  padding: 14px;
}
.kaart h3 {
  font-family: var(--font-sub);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pigs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pig {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--linnen);
  padding: 6px 12px 6px 6px;
  font-family: var(--font-text);
  font-size: 12px;
}
.pig i {
  width: 16px;
  height: 16px;
  display: block;
}
.pig span {
  color: var(--text-muted);
  font-size: 11px;
}
.pig[aria-pressed='true'] {
  border-color: var(--linnen);
}
.doeken {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.doeken button {
  text-align: left;
}
.doeken button[aria-pressed='true'] {
  color: var(--nacht);
  background: var(--linnen);
  border-color: var(--linnen);
}

.note {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 70ch;
  margin: 16px 0 0;
}
.note b {
  color: var(--linnen);
  font-weight: 400;
}

.briefing {
  margin-top: 26px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  font-size: 14px;
  color: var(--text-soft);
  -webkit-user-select: text;
  user-select: text;
}
.briefing h3 {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  color: var(--linnen);
  margin: 0 0 8px;
}
.briefing ul {
  margin: 0;
  padding-left: 18px;
}
.briefing li {
  margin-bottom: 7px;
}
.briefing b {
  color: var(--linnen);
  font-weight: 600;
}

/* The two switches: sound, and test or game view. */
.modus {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 9;
  background: var(--nacht);
  border: 1px solid var(--line);
  color: var(--text-muted);
  padding: 5px 14px;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    border-color 120ms ease-out,
    color 120ms ease-out;
}
.modus:hover {
  color: var(--accent);
  border-color: var(--accent);
}
#geluidBtn {
  right: auto;
  left: 12px;
}

/* ---------- game view ----------
   The whole game fits the screen and never scrolls. Every size in this block is
   the prototype's: .doekhouder gets what is left, and pas() works out the cell
   size from it. */
body.live .test {
  display: none !important;
}
body.live .lead {
  display: none;
}
body.live .briefing {
  display: none;
}
/* Willem, 16-09: the painting almost against the edge of the screen, so 4 px at
   the sides in the game view. */
body.live {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding: 8px 4px 6px;
  display: flex;
  flex-direction: column;
}
body.live .wrap {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-width: 760px;
  margin: 0 auto;
}
body.live h1 {
  font-size: clamp(26px, 7vw, 40px);
  margin: 0 0 4px;
}
body.live .stage {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  grid-template-columns: none;
  gap: 0;
  align-items: stretch;
}
body.live .frame {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 9px 9px 6px;
}
body.live .hud {
  margin: 0 0 6px;
  gap: 10px 12px;
}
body.live .hud b {
  font-size: 21px;
}
body.live .balk {
  margin: 0 0 8px;
}
/* The rule from the briefing: this holder gets the remaining height through flex,
   and pas() measures it. */
body.live .doekhouder {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.live canvas {
  max-width: 100%;
}
body.live .scherm {
  overflow-y: auto;
}
/* In the game view the switches sit small at the top right, out of the canvas' way. */
body.live .modus {
  top: 10px;
  bottom: auto;
  padding: 3px 10px;
  font-size: 13px;
  opacity: 0.8;
}
body.live #geluidBtn {
  left: auto;
  right: 10px;
}

@media (max-height: 700px) {
  body.live .scherm h2 {
    font-size: clamp(26px, 6.2vw, 32px);
    margin-bottom: 6px;
  }
  body.live .scherm .slogan {
    margin-bottom: 8px;
  }
  body.live .scherm .slogan b {
    font-size: 21px;
  }
  body.live .scherm .uitleg {
    font-size: 12.5px;
    margin-bottom: 10px;
  }
  body.live .scherm .groot {
    font-size: 44px;
  }
  body.live .mini {
    width: 62px;
    margin-bottom: 6px;
  }
  body.live .niveau {
    padding: 9px 12px;
  }
}

/* The link to the fair rulebook on the sign-up screen, in the accent instead of browser blue. */
#reglementNoot a {
  color: var(--accent);
  text-underline-offset: 2px;
}