/* Opmaak van de schermen. Kleuren en maten komen uit theme.css. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--zwart); color: var(--geel);
  font-family: var(--font); font-weight: 300;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  cursor: default;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
img { display: block; }

#app { position: fixed; inset: 0; overflow: hidden; }
.view { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--u) * 3.2) calc(var(--u) * 3.6); }
.fade-in { animation: fadeIn .7s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Schermnummer (tijdens een test) ─────────────────────── */
.badge {
  position: absolute; top: calc(var(--u) * 2.4); right: calc(var(--u) * 2.6); z-index: 3;
  width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: calc(var(--u) * 3.2); font-variant-numeric: tabular-nums;
  border: var(--rand) solid var(--geel); color: var(--geel);
}
.is-active .badge { background: var(--zwart); border-color: var(--zwart); color: var(--geel); }

/* ── Screensaver: tijdlijnslide ──────────────────────────── */
.slide { display: grid; grid-template-columns: 44fr 56fr; grid-template-rows: 1fr auto; column-gap: calc(var(--u) * 3.6); }
.slide .txt { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 1.6); min-width: 0; }
.slide .year { font-weight: 700; font-size: calc(var(--u) * 12.5); line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.slide h2 { font-weight: 500; font-size: calc(var(--u) * 4.2); line-height: 1.12; text-wrap: balance; }
.slide p { font-size: calc(var(--u) * 2.6); line-height: 1.38; max-width: 30ch; color: var(--geel); opacity: .86; }
.slide .pic { min-height: 0; display: flex; align-items: center; justify-content: center; }
.slide .pic img { max-width: 100%; max-height: calc(100vh - var(--u) * 16); object-fit: contain; border-radius: calc(var(--u) * .5); }

/* tijdas onderaan: 1930–2030 met markering op het jaartal */
.axis { grid-column: 1 / -1; position: relative; height: calc(var(--u) * 4.2); margin-top: calc(var(--u) * 2.4); }
.axis .line { position: absolute; left: 0; right: 0; top: calc(var(--u) * 1.1); height: var(--rand); background: var(--geel-lijn); }
.axis .tick { position: absolute; top: calc(var(--u) * 2); transform: translateX(-50%); font-size: calc(var(--u) * 1.35); font-weight: 500; color: var(--geel-zacht); font-variant-numeric: tabular-nums; }
.axis .dot { position: absolute; top: calc(var(--u) * .35); width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); transform: translateX(-50%); border-radius: 50%; background: var(--geel); box-shadow: 0 0 0 calc(var(--u) * .6) var(--zwart); }

/* scherm 1 in rust: titel van de ronde */
.saver-title { justify-content: space-between; }
.saver-title .kicker { font-weight: 500; font-size: calc(var(--u) * 2); letter-spacing: .14em; text-transform: uppercase; color: var(--geel-zacht); }
.saver-title h1 { font-weight: 700; font-size: calc(var(--u) * 9); line-height: .98; letter-spacing: -.015em; text-wrap: balance; }
.saver-title .years { font-weight: 300; font-size: calc(var(--u) * 6); margin-top: calc(var(--u) * 1.2); font-variant-numeric: tabular-nums; }
.rounds { display: flex; gap: calc(var(--u) * 1.2); align-items: center; }
.rounds i { width: calc(var(--u) * 5); height: var(--rand); background: var(--geel-lijn); }
.rounds i.on { background: var(--geel); }
.foot { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(var(--u) * 2); }
.logo { height: calc(var(--u) * 5.4); width: auto; opacity: .95; }

/* scherm 10 in rust: oproep */
.saver-cta { justify-content: center; gap: calc(var(--u) * 3); }
.saver-cta h1 { font-weight: 700; font-size: calc(var(--u) * 8.4); line-height: 1; letter-spacing: -.015em; text-wrap: balance; max-width: 14ch; }
.tap { display: flex; align-items: center; gap: calc(var(--u) * 2.4); font-weight: 500; font-size: calc(var(--u) * 3.2); }
.ring { position: relative; width: calc(var(--u) * 6); height: calc(var(--u) * 6); flex: none; }
.ring::before, .ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: var(--rand) solid var(--geel); }
.ring::after { animation: ring 2.2s ease-out infinite; }
@keyframes ring { from { transform: scale(.55); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* ── Actief scherm: geel, vraagt aandacht ────────────────── */
.is-active { background: var(--geel); color: var(--zwart); }
.is-active::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 0 calc(var(--u) * .9) var(--zwart);
  animation: edge 1.6s ease-in-out infinite;
}
@keyframes edge { 50% { box-shadow: inset 0 0 0 calc(var(--u) * .2) var(--zwart); } }

.q { gap: calc(var(--u) * 1.6); }
.q .meta { font-weight: 500; font-size: calc(var(--u) * 1.9); letter-spacing: .12em; text-transform: uppercase; padding-right: calc(var(--u) * 8); }
.q h1 { font-weight: 700; font-size: calc(var(--u) * 4.3); line-height: 1.1; text-wrap: balance; padding-right: calc(var(--u) * 6); }
.q .hint { font-size: calc(var(--u) * 2.1); margin-top: calc(var(--u) * -.6); }
.options { display: flex; flex-direction: column; gap: calc(var(--u) * 1.15); margin-top: auto; }
.opt {
  display: flex; align-items: center; gap: calc(var(--u) * 1.6); width: 100%; text-align: left;
  min-height: calc(var(--u) * 7.6);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 2.2);
  border: var(--rand) solid var(--zwart); border-radius: var(--radius);
  font-size: calc(var(--u) * 2.55); font-weight: 500; line-height: 1.15; color: var(--zwart);
  transition: background .15s, color .15s, transform .1s;
}
.opt:active { transform: scale(.985); }
.opt .mark { flex: none; width: calc(var(--u) * 3); height: calc(var(--u) * 3); border-radius: 50%; border: var(--rand) solid currentColor; display: grid; place-items: center; font-size: calc(var(--u) * 1.9); }
.opt.picked { background: var(--zwart); color: var(--geel); }
.opt.picked .mark { background: var(--geel); border-color: var(--geel); color: var(--zwart); }
.opt.picked .mark::before { content: "✓"; font-weight: 700; }
.options.locked .opt:not(.picked) { opacity: .35; }

/* taalkeuze op scherm 1 */
.lang { justify-content: center; gap: calc(var(--u) * 3); }
.lang h1 { font-weight: 700; font-size: calc(var(--u) * 6.4); line-height: 1.02; text-wrap: balance; max-width: 16ch; }
.lang .sub { font-weight: 500; font-size: calc(var(--u) * 2.4); }
.langs { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 22), 1fr)); gap: calc(var(--u) * 1.6); }
.langs .opt { justify-content: center; font-size: calc(var(--u) * 3.2); font-weight: 700; min-height: calc(var(--u) * 9); }

/* ── Wachtende en beantwoorde schermen: zwart met geel ───── */
.wait, .done { align-items: center; justify-content: center; text-align: center; gap: calc(var(--u) * 2.4); }
.wait .num { font-weight: 700; font-size: calc(var(--u) * 22); line-height: .85; color: transparent; -webkit-text-stroke: calc(var(--u) * .3) var(--geel); font-variant-numeric: tabular-nums; }
.wait p, .done p { font-size: calc(var(--u) * 3); font-weight: 500; line-height: 1.2; max-width: 24ch; text-wrap: balance; }
.wait p + p { font-size: calc(var(--u) * 2.4); font-weight: 300; opacity: .8; margin-top: calc(var(--u) * -1.2); }
.done .check { width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; border: calc(var(--u) * .5) solid var(--geel); display: grid; place-items: center; font-size: calc(var(--u) * 8); font-weight: 700; }
.done.next p { font-size: calc(var(--u) * 4.2); font-weight: 700; }
.arrow { font-size: calc(var(--u) * 9); font-weight: 700; line-height: 1; animation: nudge 1.1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(calc(var(--u) * 2)); } }

/* ── Uitslag (scherm 10) ─────────────────────────────────── */
.result { display: grid; grid-template-columns: 31fr 39fr 30fr; grid-template-rows: 1fr auto; gap: calc(var(--u) * 2.2) calc(var(--u) * 3.4); padding-top: calc(var(--u) * 3.6); }
.result .col { display: flex; flex-direction: column; min-width: 0; gap: calc(var(--u) * 1.4); }
.result .label { font-weight: 500; font-size: calc(var(--u) * 1.7); letter-spacing: .12em; text-transform: uppercase; }
.lvl-num { font-weight: 700; font-size: calc(var(--u) * 17); line-height: .82; font-variant-numeric: tabular-nums; }
.lvl-name { font-weight: 700; font-size: calc(var(--u) * 3.9); line-height: 1.05; overflow-wrap: anywhere; hyphens: auto; }
.lvl-of { font-weight: 500; font-size: calc(var(--u) * 1.9); }
.lvl-text { font-size: calc(var(--u) * 2.15); line-height: 1.35; max-width: 28ch; }
.profile { margin-top: auto; font-size: calc(var(--u) * 1.8); }

.bars { display: flex; flex-direction: column; gap: calc(var(--u) * 1.35); margin-top: calc(var(--u) * .6); }
.bar { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * .5) calc(var(--u) * 1.2); align-items: end; }
.bar .n { font-weight: 500; font-size: calc(var(--u) * 2); }
.bar .v { font-weight: 700; font-size: calc(var(--u) * 2); font-variant-numeric: tabular-nums; }
.bar .track { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * .35); }
.bar .track i { height: calc(var(--u) * 1.7); border: var(--rand) solid var(--zwart); border-radius: calc(var(--u) * .3); }
.bar .track i.on { background: var(--zwart); }
.bar.top .n::after { content: "  ★"; }

.step { background: var(--zwart); color: var(--geel); border-radius: var(--radius); padding: calc(var(--u) * 2.4); display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.step .pillar { font-weight: 700; font-size: calc(var(--u) * 2.6); }
.step p { font-size: calc(var(--u) * 2.2); line-height: 1.3; }
.qr { display: flex; gap: calc(var(--u) * 1.8); align-items: center; margin-top: auto; }
.qr .code { flex: none; width: calc(var(--u) * 15); height: calc(var(--u) * 15); background: #fff; padding: calc(var(--u) * .9); border-radius: calc(var(--u) * .6); }
.qr .code svg { width: 100%; height: 100%; display: block; }
.qr p { font-weight: 500; font-size: calc(var(--u) * 2); line-height: 1.25; }
.result .foot { grid-column: 1 / -1; font-size: calc(var(--u) * 1.6); border-top: var(--rand) solid var(--zwart); padding-top: calc(var(--u) * 1.2); }

/* ── Meldingen ───────────────────────────────────────────── */
.toast {
  position: absolute; left: 50%; bottom: calc(var(--u) * 3); transform: translateX(-50%); z-index: 5;
  background: var(--geel); color: var(--zwart); border-radius: var(--radius);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 2.6); font-weight: 700; font-size: calc(var(--u) * 2.6);
  max-width: 86%; text-align: center; animation: fadeIn .25s ease both;
}
.warn {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; text-align: center;
  background: rgba(11, 11, 10, .9); color: var(--geel); padding: calc(var(--u) * 6);
  animation: fadeIn .3s ease both;
}
.warn p { font-weight: 700; font-size: calc(var(--u) * 5); line-height: 1.1; max-width: 16ch; text-wrap: balance; }
.warn .count { font-weight: 300; font-size: calc(var(--u) * 3); margin-top: calc(var(--u) * 2); font-variant-numeric: tabular-nums; }
.offline { position: absolute; left: calc(var(--u) * 1.4); bottom: calc(var(--u) * 1.4); width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); border-radius: 50%; background: #d33; z-index: 6; }
.admin { position: absolute; left: calc(var(--u) * 1.2); top: calc(var(--u) * 1.2); z-index: 7; display: flex; gap: calc(var(--u) * 1); align-items: center; font-size: calc(var(--u) * 1.4); background: rgba(0,0,0,.75); color: #fff; padding: calc(var(--u) * .6) calc(var(--u) * 1); border-radius: calc(var(--u) * .6); }
.admin button { background: #d33; color: #fff; padding: calc(var(--u) * .4) calc(var(--u) * 1); border-radius: calc(var(--u) * .4); font-weight: 700; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.is-result .badge { display: none; }