/* QuizX Kiosk, spelkant. Ongewijzigd verplaatst uit index.html v3.7 (regels 56 tot 925, zonder de Studio-regels). */
:root{
  --k-bg:#1b0a30;--k-bg2:#0c0417;--k-spot:#3a1f66;--k-surface:#2b1749;--k-panel:rgba(255,255,255,.06);--k-panel-solid:#22123d;--k-ink:#f7f2ff;--k-muted:rgba(247,242,255,.7);--k-line:rgba(255,255,255,.16);
  --k-primary:#c9a227;--k-primary-ink:#1b0a30;--k-accent:#ffd77a;--k-accent-ink:#1b0a30;--k-ok:#3ddc84;--k-err:#ff6b6b;
  --k-a:#3b82f6;--k-b:#d62839;--k-c:#f2b705;--k-d:#2ec27e;--k-a-ink:#151515;--k-b-ink:#ffffff;--k-c-ink:#151515;--k-d-ink:#151515;
  --k-font-head:'Sora',sans-serif;--k-font-body:'Plus Jakarta Sans',sans-serif;--k-head-weight:700;--k-head-track:-.02em;--k-upper:none;
  --k-radius:24px;--k-radius-btn:999px;--k-stripe:transparent;--k-stripe-h:0px;--k-logo-color:#f7f2ff;
  --k-dur:.4s;--k-dur-fb:.6s;--k-ease:cubic-bezier(.2,.9,.2,1.1);--k-tint:16%;
  --k-shadow-a:.45;--k-rim:rgba(255,255,255,.14);--k-vignette:rgba(0,0,0,.45);--k-shadow:0 14px 36px rgba(0,0,0,var(--k-shadow-a));
}
/* ---------- kiosk stage ---------- */
#kioskWrap{position:relative;height:calc(100vh - var(--barH,48px));min-height:420px;overflow:hidden;background:#07040d;display:flex;align-items:center;justify-content:center}
.stage{position:absolute;left:0;top:0;transform-origin:top left;color:var(--k-ink);font-family:var(--k-font-body);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation;
  background:radial-gradient(1400px 800px at 50% -20%,var(--k-spot),transparent 65%),linear-gradient(180deg,var(--k-bg) 0%,var(--k-bg2) 100%)}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,var(--k-vignette))}
.stage::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--k-stripe-h);background:var(--k-stripe);pointer-events:none;z-index:4}
.stage.land{width:1920px;height:1080px}
.stage.port{width:1080px;height:1920px}
.stage *{box-sizing:border-box}
.mode-dark{--k-shadow-a:.45;--k-rim:rgba(255,255,255,.14);--k-vignette:rgba(0,0,0,.45)}
.mode-light{--k-shadow-a:.10;--k-rim:rgba(255,255,255,.95);--k-vignette:rgba(0,0,0,.05)}
.play-low{--k-dur:.15s;--k-dur-fb:.2s;--k-ease:ease;--k-tint:6%}
.play-mid{--k-dur:.25s;--k-dur-fb:.45s;--k-ease:cubic-bezier(.2,.7,.2,1);--k-tint:10%}
.play-high{--k-dur:.4s;--k-dur-fb:.6s;--k-ease:cubic-bezier(.2,.9,.2,1.1);--k-tint:16%}
.k-top{position:absolute;left:0;right:0;top:0;height:150px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 72px;z-index:2}
.k-top .l{justify-self:start;display:flex;align-items:center;gap:24px}
.k-top .r{justify-self:end}
.port .k-top{padding:0 48px}
.port .k-prog i{width:52px}
.port .k-top .k-meta{display:none}
.port .k-logo{font-size:30px}
.k-prog{display:flex;gap:12px}
.k-prog i{display:block;width:80px;height:12px;border-radius:999px;background:var(--k-line)}
.k-prog i.done{background:var(--k-accent)}
.k-prog i.cur{background:var(--k-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--k-ink) 18%,transparent)}
.k-meta{font-size:24px;color:var(--k-muted);font-weight:600;display:flex;align-items:center;gap:24px}
.k-logo{display:flex;align-items:center;gap:14px;font-family:var(--k-font-head);font-weight:700;font-size:36px;letter-spacing:-.01em;text-transform:var(--k-upper);color:var(--k-logo-color);line-height:1}
.k-logo .mark{width:52px;height:52px;border-radius:14px;background:var(--k-primary);display:grid;place-items:center;color:var(--k-primary-ink);font-size:30px;font-family:'Sora',sans-serif;font-weight:700}
.k-logo .block{background:var(--k-primary);color:var(--k-primary-ink);padding:8px 18px;border-radius:6px;letter-spacing:.02em;font-size:34px}
.k-logo svg.star{width:34px;height:34px;flex:none}
/* timer */
.k-timer{position:relative;width:140px;height:140px;display:grid;place-items:center}
.k-timer svg{position:absolute;inset:0;width:140px;height:140px;transform:rotate(-90deg)}
.k-timer circle{fill:none;stroke-width:12;stroke-linecap:round}
.k-timer .trk{stroke:var(--k-line)}
.k-timer .arc{stroke:var(--k-accent);stroke-dasharray:377;transition:stroke-dashoffset 1s linear,stroke .3s}
.k-timer .n{font-family:var(--k-font-head);font-size:56px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.k-timer.low .arc{stroke:var(--k-err)}
.k-timer.low .n{color:var(--k-err);animation:tick 1s ease-in-out infinite}
.play-high .k-timer.low{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--k-err) 60%,transparent))}
.play-high .k-timer:not(.low){filter:drop-shadow(0 0 14px color-mix(in srgb,var(--k-accent) 45%,transparent))}
@keyframes tick{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.k-timer.bar{width:420px;height:110px;display:flex;flex-direction:column;align-items:center;gap:8px}
.k-timer.bar svg{display:none}
.k-timer.bar .n{font-size:64px}
.k-timer.bar .b{width:100%;height:12px;border-radius:999px;background:var(--k-line);overflow:hidden}
.k-timer.bar .b i{display:block;height:100%;background:var(--k-accent);width:100%;transition:width 1s linear}
.k-timer.bar.low .b i{background:var(--k-err)}
/* body */
.k-body{position:absolute;left:0;right:0;top:150px;bottom:0;display:flex;flex-direction:column;align-items:center;padding:12px 120px 44px;gap:26px;z-index:1}
.port .k-body{padding:12px 72px 60px;gap:32px}
.k-frame{padding:20px 48px;border-radius:calc(var(--k-radius) + 6px);background:var(--k-panel);box-shadow:var(--k-shadow),inset 0 1px 0 var(--k-rim);border:1px solid var(--k-line);max-width:1520px;backdrop-filter:blur(8px)}
.play-low .k-frame{box-shadow:none;background:transparent;border:0;border-top:4px solid var(--k-primary);border-radius:0;padding:20px 0 0}
.k-q{font-family:var(--k-font-head);font-weight:var(--k-head-weight);font-size:50px;line-height:1.12;text-align:center;text-transform:var(--k-upper);letter-spacing:var(--k-head-track);text-wrap:balance}
.port .k-q{font-size:58px}
.k-h1{font-family:var(--k-font-head);font-weight:var(--k-head-weight);font-size:116px;line-height:1.02;text-align:center;letter-spacing:var(--k-head-track);text-transform:var(--k-upper);text-wrap:balance;text-shadow:0 2px 0 var(--k-rim)}
.port .k-h1{font-size:104px}
.k-h2{font-family:var(--k-font-head);font-weight:var(--k-head-weight);font-size:64px;line-height:1.1;text-align:center;text-transform:var(--k-upper);letter-spacing:var(--k-head-track);text-wrap:balance}
.k-p{font-size:34px;line-height:1.4;text-align:center;color:var(--k-muted);max-width:1200px}
.k-btn{border:0;border-radius:var(--k-radius-btn);background:linear-gradient(180deg,color-mix(in srgb,var(--k-primary) 88%,white),var(--k-primary));color:var(--k-primary-ink);font-family:var(--k-font-head);font-weight:700;font-size:36px;height:104px;min-width:360px;padding:0 64px;text-transform:var(--k-upper);letter-spacing:var(--k-head-track);box-shadow:0 12px 30px color-mix(in srgb,var(--k-primary) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.35);transition:transform var(--k-dur) var(--k-ease),opacity .15s,box-shadow var(--k-dur)}
.k-btn:active{transform:scale(.97)}
.k-btn[disabled]{opacity:.35;cursor:default;box-shadow:none}
.k-btn.ghost{background:transparent;color:var(--k-ink);border:3px solid var(--k-line);box-shadow:none}
.play-low .k-btn{box-shadow:none;background:var(--k-primary)}
.k-actions{margin-top:auto;display:flex;gap:24px;align-items:center}
/* answer cards, each carries its own colour in --c */
.k-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%;max-width:1440px}
.k-cards.one{grid-template-columns:1fr;max-width:1100px}
.k-card{--c:var(--k-primary);--c-ink:var(--k-primary-ink);position:relative;border:2px solid color-mix(in srgb,var(--c) 60%,var(--k-line));border-radius:var(--k-radius);background:linear-gradient(180deg,color-mix(in srgb,var(--c) var(--k-tint),var(--k-surface)),var(--k-surface));color:var(--k-ink);min-height:116px;padding:22px 32px;font-size:34px;font-weight:600;display:flex;align-items:center;gap:24px;text-align:left;box-shadow:var(--k-shadow),inset 0 1px 0 var(--k-rim);transition:transform var(--k-dur) var(--k-ease),background var(--k-dur),border-color var(--k-dur),box-shadow var(--k-dur),opacity var(--k-dur)}
.k-card .key{width:60px;height:60px;border-radius:max(6px,calc(var(--k-radius) - 8px));background:var(--c);color:var(--c-ink);display:grid;place-items:center;font-family:var(--k-font-head);font-size:28px;font-weight:700;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 10px color-mix(in srgb,var(--c) 40%,transparent)}
.k-card:active{transform:scale(.985)}
.k-card.sel{background:var(--c);color:var(--c-ink);border-color:var(--c);box-shadow:0 14px 40px color-mix(in srgb,var(--c) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.play-high .k-card.sel{transform:translateY(-4px) scale(1.02)}
.k-card.sel .key{background:rgba(0,0,0,.22);color:#fff;box-shadow:none}
.k-card.ok{border-color:var(--k-ok);box-shadow:0 0 0 6px color-mix(in srgb,var(--k-ok) 45%,transparent),0 18px 50px color-mix(in srgb,var(--k-ok) 35%,transparent);animation:swell var(--k-dur-fb) var(--k-ease) both;z-index:1}
.k-card.ok::after,.k-card.err::after{content:"";position:absolute;right:20px;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;background-position:center;background-size:60%;background-repeat:no-repeat;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.k-card.ok::after{background-color:var(--k-ok);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052e16' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E")}
.k-card.err{border-color:var(--k-err);animation:shake .5s both}
.k-card.err::after{background-color:var(--k-err);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23450a0a' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.k-card.dim{opacity:.4}
.play-low .k-card{box-shadow:none;background:var(--k-surface)}
.play-low .k-card.ok{animation:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--k-ok) 45%,transparent)}
.play-low .k-card.err{animation:none}
@keyframes swell{0%{transform:scale(1)}45%{transform:scale(1.05)}100%{transform:scale(1.02)}}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.k-tf{display:grid;grid-template-columns:1fr 1fr;gap:32px;width:100%;max-width:1440px}
.k-tf .k-card{min-height:260px;justify-content:center;font-size:56px;font-family:var(--k-font-head);text-transform:var(--k-upper)}
.k-img{width:100%;max-width:1100px;aspect-ratio:16/7;border-radius:var(--k-radius);overflow:hidden;border:2px solid var(--k-line);background:var(--k-surface);box-shadow:var(--k-shadow)}
.k-img svg{width:100%;height:100%;display:block}
.k-imgs{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%;max-width:960px}
.port .k-imgs{max-width:100%}
.k-imgs .k-card{padding:0;overflow:hidden;flex-direction:column;align-items:stretch;gap:0;min-height:0}
.k-imgs .k-card svg{width:100%;aspect-ratio:16/7;display:block;object-fit:cover}
.k-imgs .k-card b{padding:14px 24px;font-size:30px;display:flex;align-items:center;gap:16px;background:color-mix(in srgb,var(--c) 22%,var(--k-surface))}
.k-imgs .k-card b .key{width:44px;height:44px;font-size:22px}
.k-imgs .k-card.sel b{background:var(--c);color:var(--c-ink)}
.k-slider{width:100%;max-width:1300px;display:flex;flex-direction:column;align-items:center;gap:20px}
.k-slider .val{font-family:var(--k-font-head);font-size:132px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.k-slider .val small{font-size:44px;color:var(--k-muted);margin-left:8px;letter-spacing:0}
.k-slider input[type=range]{width:100%;height:80px;-webkit-appearance:none;appearance:none;background:transparent}
.k-slider input[type=range]::-webkit-slider-runnable-track{height:22px;border-radius:999px;background:linear-gradient(90deg,var(--k-a),var(--k-c),var(--k-b));box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}
.k-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:84px;height:84px;border-radius:50%;background:var(--k-primary);border:6px solid var(--k-ink);margin-top:-31px;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.k-slider input[type=range]::-moz-range-track{height:22px;border-radius:999px;background:linear-gradient(90deg,var(--k-a),var(--k-c),var(--k-b))}
.k-slider input[type=range]::-moz-range-thumb{width:84px;height:84px;border-radius:50%;background:var(--k-primary);border:6px solid var(--k-ink);cursor:pointer}
.k-slider .scale{display:flex;justify-content:space-between;width:100%;font-size:26px;color:var(--k-muted);font-weight:600}
.k-order{display:flex;flex-direction:column;gap:12px;width:100%;max-width:1100px}
.k-order .lbl{font-size:22px;color:var(--k-muted);text-transform:uppercase;letter-spacing:.12em;font-weight:700;text-align:center}
.k-order .k-card{min-height:84px;padding:14px 28px}
.k-order+.k-p,.k-hot+.k-p{font-size:26px}
.k-order .k-card .grip{margin-left:auto;font-size:30px;color:var(--k-muted);letter-spacing:-4px}
.k-order .k-card.pick{border-color:var(--k-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--k-accent) 45%,transparent),var(--k-shadow)}
.k-match{display:grid;grid-template-columns:1fr 120px 1fr;gap:20px;width:100%;max-width:1500px;align-items:start}
.k-match .col{display:flex;flex-direction:column;gap:14px}
.k-match .k-card{min-height:92px;font-size:32px;padding:16px 28px}
.k-match .k-card.pick{border-color:var(--k-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--k-accent) 45%,transparent),var(--k-shadow)}
.k-match .k-card .dot{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--k-font-head);font-size:22px;margin-left:auto;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.k-match .mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding-top:30px;color:var(--k-muted);font-size:24px;text-align:center}
.k-hot{width:100%;max-width:1100px;aspect-ratio:16/7;border-radius:var(--k-radius);overflow:hidden;border:2px solid var(--k-line);position:relative;background:#050914;cursor:crosshair;box-shadow:var(--k-shadow)}
.k-hot svg{width:100%;height:100%;display:block}
.k-hot .pin{position:absolute;width:64px;height:64px;border-radius:50%;border:6px solid var(--k-accent);background:color-mix(in srgb,var(--k-accent) 35%,transparent);transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 8px color-mix(in srgb,var(--k-accent) 20%,transparent)}
.k-hot .tgt{position:absolute;border-radius:50%;border:4px dashed var(--k-ok);transform:translate(-50%,-50%);pointer-events:none}
.k-vid{width:100%;max-width:1100px;aspect-ratio:16/7;border-radius:var(--k-radius);overflow:hidden;border:2px solid var(--k-line);position:relative;background:#050914;box-shadow:var(--k-shadow);transition:max-width var(--k-dur) var(--k-ease)}
.k-vid.small{max-width:720px}
.k-cards.compact .k-card{min-height:100px;padding:18px 28px}
.port .k-vid.small{max-width:100%}
.k-vid canvas{width:100%;height:100%;display:block}
.k-vid .pb{position:absolute;left:0;right:0;bottom:0;height:12px;background:rgba(255,255,255,.2)}
.k-vid .pb i{display:block;height:100%;background:var(--k-accent);width:0;transition:width .2s linear}
.k-vid .cap{position:absolute;left:32px;top:24px;font-size:22px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:12px}
.k-vid .cap i{width:14px;height:14px;border-radius:50%;background:#ff4d4d;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
/* poll result */
.k-poll{display:flex;flex-direction:column;gap:12px;width:100%;max-width:1200px}
.k-poll .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) 100px;align-items:center;gap:18px;font-size:28px;font-weight:600}
.k-poll .row.me{color:var(--k-ink)}
.k-poll .row span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-poll .bar{height:36px;border-radius:999px;background:var(--k-line);overflow:hidden}
.k-poll .bar i{--c:var(--k-primary);display:block;height:100%;background:var(--c);width:var(--w);animation:grow .9s var(--k-ease) both;border-radius:999px}
.k-poll .pct{font-family:var(--k-font-head);font-variant-numeric:tabular-nums;text-align:right;font-size:32px}
@keyframes grow{from{width:0}}
/* feedback and result */
.k-feedback{position:absolute;left:0;right:0;bottom:0;background:var(--k-panel-solid);border-top:1px solid var(--k-line);box-shadow:0 -20px 60px rgba(0,0,0,var(--k-shadow-a));padding:36px 120px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;animation:slideup .45s var(--k-ease) both;animation-delay:.3s;z-index:3}
.port .k-feedback{grid-template-columns:1fr;padding:36px 72px}
.play-low .k-feedback{animation-delay:0s;box-shadow:none}
@keyframes slideup{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.k-feedback .verdict{font-family:var(--k-font-head);font-weight:700;font-size:52px;display:flex;align-items:center;gap:20px;text-transform:var(--k-upper)}
.k-feedback .verdict i{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:36px;flex:none;font-style:normal}
.k-feedback.good .verdict i{background:var(--k-ok);color:#052e16}
.k-feedback.bad .verdict i{background:var(--k-err);color:#450a0a}
.k-feedback.poll .verdict i{background:var(--k-accent);color:var(--k-accent-ink)}
.k-feedback .expl{font-size:30px;line-height:1.4;color:var(--k-muted);margin-top:10px;max-width:1200px}
.k-flash{position:absolute;inset:0;pointer-events:none;z-index:2;background:var(--k-ok);animation:flash .55s ease-out both}
.k-flash.bad{background:var(--k-err)}
@keyframes flash{from{opacity:.5}to{opacity:0}}
.k-score{font-family:var(--k-font-head);font-size:236px;font-weight:700;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;animation:pop .9s var(--k-ease) both;text-shadow:0 6px 0 var(--k-rim)}
.k-score small{font-size:72px;color:var(--k-muted);letter-spacing:0}
.k-prize{display:flex;align-items:center;gap:32px;background:var(--k-panel-solid);border:2px solid var(--k-accent);border-radius:var(--k-radius);padding:26px 40px;max-width:1300px;box-shadow:0 0 0 6px color-mix(in srgb,var(--k-accent) 20%,transparent),var(--k-shadow)}
.k-prize .ico{width:112px;height:112px;border-radius:calc(var(--k-radius) - 4px);background:var(--k-accent);display:grid;place-items:center;flex:none;color:var(--k-accent-ink)}
.k-prize b{font-family:var(--k-font-head);font-size:38px;display:block;text-transform:var(--k-upper)}
.k-prize span{font-size:28px;color:var(--k-muted)}
/* attract and count-in */
.k-attract{position:absolute;inset:0;overflow:hidden}
.k-attract .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:var(--blob-a,.5);animation:drift 22s ease-in-out infinite alternate}
.mode-light .k-attract .blob{opacity:.28}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(160px,-120px) scale(1.15)}}
.k-attract .cta{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);display:flex;align-items:center;gap:28px;font-family:var(--k-font-head);font-weight:700;font-size:44px;text-transform:var(--k-upper);letter-spacing:var(--k-head-track)}
.k-attract .cta i{width:36px;height:36px;border-radius:50%;background:var(--k-accent);position:relative;flex:none}
.k-attract .cta i::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:4px solid var(--k-accent);animation:pulse 2s ease-out infinite}
@keyframes pulse{from{transform:scale(.6);opacity:1}to{transform:scale(1.6);opacity:0}}
.k-attract .tags{position:absolute;left:120px;right:120px;top:150px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.k-attract .tags span{--c:var(--k-primary);display:inline-flex;align-items:center;gap:10px;border:2px solid color-mix(in srgb,var(--c) 70%,transparent);background:color-mix(in srgb,var(--c) var(--k-tint),transparent);border-radius:999px;padding:10px 22px 10px 14px;font-size:23px;font-weight:600;color:var(--k-ink);animation:fadein .6s both}
.k-attract .tags span::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--c)}
.k-attract .k-body{top:250px;bottom:210px}
.k-attract .k-body .k-h1{max-width:1500px}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.k-count{position:relative;font-family:var(--k-font-head);font-size:360px;font-weight:700;line-height:1;animation:pop .9s var(--k-ease) both;text-transform:var(--k-upper)}
.k-count::before{content:"";position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;border:10px solid var(--k-accent);opacity:0;animation:ringout .8s ease-out both;pointer-events:none}
.play-low .k-count::before{display:none}
@keyframes ringout{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.4);opacity:0}}
@keyframes pop{0%{transform:scale(.6);opacity:0}30%{transform:scale(1.06);opacity:1}100%{transform:scale(1);opacity:1}}
/* lead form, keyboard, idle, staff */
.k-lead{display:grid;grid-template-columns:1fr;gap:20px;width:100%;max-width:1200px}
.k-field{display:flex;flex-direction:column;gap:8px}
.k-field label{font-size:22px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--k-muted)}
.k-field .in{height:96px;border:2px solid var(--k-line);border-radius:var(--k-radius);background:var(--k-surface);font-size:38px;padding:0 32px;display:flex;align-items:center;font-family:var(--k-font-body);color:var(--k-ink);box-shadow:inset 0 1px 0 var(--k-rim)}
.k-field .in.focus{border-color:var(--k-primary);box-shadow:0 0 0 5px color-mix(in srgb,var(--k-primary) 30%,transparent)}
.k-field .in .caret{width:3px;height:48px;background:var(--k-primary);margin-left:4px;animation:blink 1s steps(2) infinite}
.k-field .in .ph{color:var(--k-muted);opacity:.6}
.k-consent{display:flex;align-items:flex-start;gap:20px;font-size:26px;line-height:1.4;text-align:left;max-width:1200px;border:0;background:transparent;padding:0;color:var(--k-ink)}
.k-consent i{width:48px;height:48px;border:3px solid var(--k-line);border-radius:12px;flex:none;display:grid;place-items:center;font-size:30px;font-style:normal}
.k-consent.on i{background:var(--k-ok);border-color:var(--k-ok);color:#052e16}
.k-kbd{width:100%;max-width:1500px;display:flex;flex-direction:column;gap:12px;margin-top:auto}
.k-kbd .row{display:flex;justify-content:center;gap:10px}
.k-kbd button{border:0;border-radius:14px;height:76px;min-width:84px;padding:0 14px;background:var(--k-surface);border:2px solid var(--k-line);color:var(--k-ink);font-size:32px;font-weight:600;box-shadow:0 3px 0 var(--k-line)}
.k-kbd button.w{min-width:140px;font-size:24px}
.k-kbd button.sp{min-width:520px}
.k-idle{position:absolute;inset:0;background:rgba(5,9,20,.82);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;z-index:5;backdrop-filter:blur(6px)}
.k-idle .k-p{color:rgba(255,255,255,.8)}
.k-staff{position:absolute;inset:0;background:#0f0b1a;color:#f1edf7;z-index:6;padding:64px 96px;font-family:var(--font-ui);display:flex;flex-direction:column;gap:32px;overflow:auto}
.k-staff h2{font-family:var(--font-display);font-size:48px;text-transform:none}
.k-staff .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:24px}
.k-staff .box{background:#1e1730;border:2px solid #332548;border-radius:20px;padding:28px 32px;font-size:26px;display:flex;flex-direction:column;gap:12px}
.k-staff .box b{font-size:20px;letter-spacing:.08em;text-transform:uppercase;color:#a79dbb}
.k-staff .box .big{font-family:var(--font-display);font-size:64px;line-height:1;font-variant-numeric:tabular-nums}
.k-staff .row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.k-staff button{border:0;border-radius:14px;background:#8b6fd1;color:#14101f;font-size:28px;font-weight:700;height:80px;padding:0 32px}
.k-staff button.sec{background:#2f2545;color:#f1edf7}
.k-staff button.stk{width:80px;font-size:40px}
.k-staff .pill{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:6px 16px;background:#2f2545;font-size:22px}
.k-staff .pill i{width:14px;height:14px;border-radius:50%;background:#5ad185}
.k-pin{display:flex;flex-direction:column;align-items:center;gap:24px}
.k-pin .dots{display:flex;gap:20px}
.k-pin .dots i{width:32px;height:32px;border-radius:50%;border:3px solid #a79dbb}
.k-pin .dots i.f{background:#f1edf7;border-color:#f1edf7}
.k-pin .pad{display:grid;grid-template-columns:repeat(3,120px);gap:16px}
.k-pin .pad button{height:100px;font-size:40px;background:#1e1730;color:#f1edf7}
.k-corner{position:absolute;left:0;top:0;width:160px;height:120px;z-index:4;background:transparent;border:0}
.k-pair{display:flex;flex-direction:column;align-items:center;gap:36px;text-align:center}
.k-pair .code{font-family:var(--k-font-head);font-size:200px;letter-spacing:.12em;font-weight:700;line-height:1;background:var(--k-surface);border:2px solid var(--k-line);border-radius:var(--k-radius);padding:24px 72px;box-shadow:var(--k-shadow)}
.k-confetti{position:absolute;inset:0;pointer-events:none;z-index:3}
.k-powered{position:absolute;right:72px;bottom:28px;font-size:18px;color:var(--k-muted);letter-spacing:.08em;text-transform:uppercase;font-weight:600;z-index:2}
.k-toast{position:absolute;left:50%;top:170px;transform:translateX(-50%);background:var(--k-panel-solid);border:2px solid var(--k-line);border-radius:999px;padding:16px 36px;font-size:28px;font-weight:600;z-index:7;box-shadow:var(--k-shadow)}
/* ---------- v3: media layer, worlds, show grammar ---------- */
.w-plate{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;will-change:transform;animation:kb 38s ease-in-out infinite alternate;pointer-events:none}
.w-plate.soft{filter:blur(5px) brightness(.62) saturate(.9);transform:scale(1.04)}
.w-plate.dim{filter:brightness(.35) saturate(.8)}
.w-plate.zoom{animation:kbzoom 5s cubic-bezier(.1,.6,.2,1) both}
.w-shade{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.05) 28%,rgba(0,0,0,.05) 48%,rgba(0,0,0,.78) 100%)}
.w-shade.dark{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35) 50%,rgba(0,0,0,.8))}
.plate-light .w-shade{background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 50%,rgba(255,255,255,.62) 100%)}
.play-low .w-plate{animation:none}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes kbzoom{from{transform:scale(1.35);filter:brightness(.2)}to{transform:scale(1.05);filter:brightness(.75)}}
.w-fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen}
.plate-light .w-fx{mix-blend-mode:multiply;opacity:.5}
/* tokens when a photo is the floor */
.stage.on-media{--k-ink:#ffffff;--k-muted:rgba(255,255,255,.8);--k-surface:rgba(14,11,24,.6);--k-panel:rgba(8,6,16,.42);--k-panel-solid:rgba(14,11,24,.94);--k-line:rgba(255,255,255,.24);--k-rim:rgba(255,255,255,.24);--k-logo-color:#ffffff;--k-shadow:0 18px 44px rgba(0,0,0,.55);--k-shadow-a:.55;--k-vignette:transparent}
.stage.on-media.plate-light{--k-ink:#141a2e;--k-muted:rgba(20,26,46,.72);--k-surface:rgba(255,255,255,.62);--k-panel:rgba(255,255,255,.5);--k-panel-solid:rgba(255,255,255,.95);--k-line:rgba(20,26,46,.18);--k-rim:rgba(255,255,255,.9);--k-logo-color:#141a2e;--k-shadow:0 18px 44px rgba(20,26,46,.18)}
.stage.on-media .k-frame{background:var(--k-panel);backdrop-filter:blur(14px);border-color:var(--k-line);text-shadow:0 2px 14px rgba(0,0,0,.55)}
.stage.on-media.plate-light .k-frame{text-shadow:none}
.stage.on-media .k-card{backdrop-filter:blur(8px);overflow:hidden}
.stage.on-media .k-card::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0));pointer-events:none}
.stage.on-media .k-imgs .k-card::before{display:none}
.stage.on-media .k-p{text-shadow:0 2px 10px rgba(0,0,0,.5)}
.stage.on-media.plate-light .k-p{text-shadow:none}
.stage.on-media .k-feedback{backdrop-filter:blur(16px)}
.stage.on-media .k-kbd button{background:rgba(14,11,24,.7)}
.stage.on-media .k-field .in{background:rgba(14,11,24,.7)}
.stage.on-media .k-prog i{background:rgba(255,255,255,.28)}
.stage.on-media .k-prog i.done{background:var(--k-accent)}
.stage.on-media .k-prog i.cur{background:#fff}
.stage.on-media .k-timer .trk{stroke:rgba(255,255,255,.25)}
.stage.on-media .k-timer{filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.stage.on-media .k-slider input[type=range]::-webkit-slider-thumb{background:var(--k-accent);border-color:#fff}
.stage.on-media .k-score{text-shadow:0 8px 40px rgba(0,0,0,.7)}
.k-hot.photo{aspect-ratio:16/9;max-width:1000px;cursor:crosshair}
.k-hot img{width:100%;height:100%;object-fit:cover;display:block}
.k-vid video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
.k-vid .kbv{position:absolute;inset:0;background-size:cover;background-position:center;animation:kbvid 5s linear both}
@keyframes kbvid{from{transform:scale(1.18) translate(3%,2%)}to{transform:scale(1) translate(0,0)}}
/* attract, worlds */
.k-attract .k-top{z-index:3}
.w-title{position:absolute;left:50%;top:var(--w-ty,44%);transform:translate(-50%,-50%);width:1500px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;z-index:2;pointer-events:none}
.port .w-title{width:980px}
.w-title .ttl{font-family:var(--w-font,var(--k-font-head));font-weight:var(--w-weight,800);font-size:var(--w-size,140px);line-height:.95;letter-spacing:var(--w-track,-.01em);text-transform:var(--w-upper,none);color:var(--w-ttl,#fff);text-shadow:var(--w-shadow,0 8px 30px rgba(0,0,0,.6));text-wrap:balance;max-width:var(--w-max,1400px)}
.port .w-title .ttl{font-size:calc(var(--w-size,140px) * .78);max-width:min(960px,var(--w-max,1400px))}
.w-title .sub{font-size:36px;line-height:1.3;color:var(--w-sub,rgba(255,255,255,.88));max-width:1100px;text-shadow:0 2px 12px rgba(0,0,0,.6);text-wrap:balance}
.plate-light .w-title .sub{text-shadow:none}
.w-prize{position:absolute;left:72px;bottom:72px;z-index:3;display:inline-flex;align-items:center;gap:14px;font-size:26px;font-weight:600;color:var(--w-sub,rgba(255,255,255,.92));background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:10px 26px 10px 14px;backdrop-filter:blur(8px)}
.plate-light .w-prize{background:rgba(255,255,255,.55);border-color:rgba(20,26,46,.2)}
.world-e .w-prize{bottom:92px}
.port .w-prize{left:50%;transform:translateX(-50%);bottom:520px;white-space:nowrap}
.w-prize i{width:40px;height:40px;border-radius:50%;background:var(--w-ring,#e0b24a);color:#1b0a30;display:grid;place-items:center;font-style:normal}
.w-prize i svg{width:24px;height:24px}
.k-red{position:absolute;left:50%;bottom:var(--w-by,64px);transform:translateX(-50%);width:312px;height:312px;border-radius:50%;z-index:4;display:grid;place-items:center;border:0;padding:0;cursor:pointer;
  background:radial-gradient(circle at 50% 28%,#ff8a8a 0%,#ef2434 38%,#b20f1d 72%,#6e0910 100%);
  box-shadow:0 0 0 14px var(--w-ring,#e0b24a),0 0 0 19px rgba(0,0,0,.4),0 34px 70px rgba(0,0,0,.65),0 0 90px color-mix(in srgb,#ff2d3a 40%,transparent),inset 0 -22px 44px rgba(0,0,0,.4),inset 0 16px 28px rgba(255,255,255,.4);
  animation:redpulse 2.2s ease-in-out infinite}
.k-red::before{content:"";position:absolute;inset:-22px;border-radius:50%;border:6px solid rgba(255,90,90,.75);animation:pulse 2.2s ease-out infinite}
.k-red::after{content:"";position:absolute;left:18%;top:8%;width:64%;height:34%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.k-red span{position:relative;font-family:'Barlow Condensed',var(--k-font-head),sans-serif;font-weight:700;font-size:46px;line-height:1;text-transform:uppercase;letter-spacing:.06em;color:#fff;text-align:center;width:230px;text-shadow:0 3px 8px rgba(0,0,0,.55)}
.k-red:active{transform:translateX(-50%) scale(.95)}
.play-low .k-red{animation:none}
.play-low .k-red::before{display:none}
.port .k-red{bottom:150px}
@keyframes redpulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.045)}}
.k-attract .k-powered{z-index:3}
/* dom effects */
.w-sweep{position:absolute;top:-20%;bottom:-20%;left:-30%;width:26%;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.22) 50%,rgba(255,255,255,0));transform:skewX(-18deg);animation:sweep 7s ease-in-out infinite;mix-blend-mode:screen}
@keyframes sweep{0%,55%{left:-30%}100%{left:130%}}
.w-flare{position:absolute;width:900px;height:900px;left:var(--fx-x,8%);top:var(--fx-y,-30%);z-index:1;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(255,235,200,.55) 0%,rgba(255,200,120,.18) 25%,rgba(255,200,120,0) 62%);mix-blend-mode:screen;animation:flare 5s ease-in-out infinite alternate}
@keyframes flare{from{transform:scale(.9);opacity:.7}to{transform:scale(1.15);opacity:1}}
.w-spot{position:absolute;left:50%;top:-10%;width:1300px;height:1300px;margin-left:-650px;z-index:1;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(255,230,180,.28) 0%,rgba(255,230,180,.06) 30%,rgba(255,230,180,0) 60%);mix-blend-mode:screen;animation:breathe 4.5s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(.96);opacity:.75}to{transform:scale(1.04);opacity:1}}
/* world E: masthead, carousel, ticker */
.w-mast{position:absolute;left:0;right:0;top:0;height:150px;background:#ffffff;z-index:2;display:flex;align-items:center;justify-content:center;padding:0 320px 0 120px;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.w-mast::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--k-primary)}
.w-mast .ttl{font-family:var(--k-font-head);font-weight:var(--k-head-weight);font-size:74px;line-height:1;color:#111;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance;text-align:center}
.port .w-mast{padding:0 60px;height:170px}
.port .w-mast .ttl{font-size:56px}
.world-e .k-attract .k-top .k-logo{color:var(--k-primary)}
.world-e .k-attract .k-top{z-index:3}
.w-carousel{position:absolute;left:0;right:0;top:214px;height:330px;z-index:1;perspective:1400px;overflow:hidden;pointer-events:none}
.port .w-carousel{top:250px;height:300px}
.w-carousel .track{position:absolute;left:0;top:0;height:100%;display:flex;gap:30px;animation:track 44s linear infinite;transform-style:preserve-3d;padding-left:30px}
.w-carousel .pnl{position:relative;width:540px;height:100%;flex:none;border-radius:14px;background-size:cover;background-position:center;box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 2px rgba(255,255,255,.18);overflow:hidden;transform:rotateY(-6deg)}
.w-carousel .pnl::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.7));}
.w-carousel .pnl span{position:absolute;left:24px;bottom:18px;z-index:1;font-family:var(--k-font-head);font-size:30px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
@keyframes track{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.w-esub{position:absolute;left:0;right:0;top:580px;text-align:center;font-size:38px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.7);z-index:2;padding:0 200px;text-wrap:balance}
.port .w-esub{top:590px;padding:0 80px;font-size:36px}
.w-ticker{position:absolute;left:0;right:0;bottom:0;height:64px;background:rgba(6,10,30,.92);z-index:3;display:flex;align-items:stretch;overflow:hidden;border-top:2px solid rgba(255,255,255,.12)}
.w-ticker b{flex:none;display:flex;align-items:center;padding:0 28px;background:var(--k-accent);color:var(--k-accent-ink);font-family:var(--k-font-head);font-size:26px;text-transform:uppercase;letter-spacing:.08em}
.w-ticker .tk{flex:1;display:flex;align-items:center;overflow:hidden;white-space:nowrap}
/* naadloze lus: twee gelijke banden achter elkaar, de band schuift precies een bandbreedte (50%); de duur komt uit de breedte (80 px/s, kiosk.js k5TickerSync) */
.w-ticker .tk-lus{display:inline-flex;flex:none;white-space:nowrap;will-change:transform;animation:ticker var(--tk-duur,120s) linear infinite}
.w-ticker .tk-band{display:inline-block;flex:none;font-size:28px;color:#fff;font-weight:500}
.w-ticker.tk-pauze .tk-lus{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* korte link met een onbekende kioskcode (js/kortelink.js): boven alles, eigen letters, invoer mag geselecteerd worden */
html.kl-onbekend #bar,html.kl-onbekend #app,html.kl-onbekend #layer{display:none !important}
#kortelink{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px;background:#120a24;color:#fff;font-family:var(--font-tekst,'Plus Jakarta Sans',system-ui,sans-serif);user-select:text;-webkit-user-select:text;cursor:auto}
#kortelink .kl-kaart{width:min(720px,100%);background:#1d1233;border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:40px 44px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
#kortelink .kl-kop{font-size:34px;font-weight:700;line-height:1.15;margin-bottom:14px}
#kortelink .kl-code{display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:30px;letter-spacing:.12em;background:rgba(255,255,255,.08);border-radius:10px;padding:8px 16px;margin-bottom:14px}
#kortelink p{font-size:19px;line-height:1.5;color:#d8d0ea;margin:0 0 18px}
#kortelink label{display:block;font-size:17px;color:#a79dbb;margin-bottom:8px}
#kortelink .kl-rij{display:flex;gap:12px;flex-wrap:wrap}
#kortelink input{flex:1;min-width:200px;font:inherit;font-size:26px;letter-spacing:.1em;text-transform:uppercase;padding:12px 16px;border-radius:12px;border:2px solid rgba(255,255,255,.25);background:#0f0820;color:#fff}
#kortelink input:focus{outline:none;border-color:#f3d27a}
#kortelink button{font:inherit;font-size:20px;font-weight:600;padding:12px 24px;border-radius:12px;border:0;background:#f3d27a;color:#1b1724;cursor:pointer}
#kortelink .kl-fout{min-height:26px;margin-top:10px;font-size:17px;color:#ffb3a7}
#kortelink .kl-noot{font-size:15px;color:#8f85a6;margin:16px 0 0}
.world-e .k-red{bottom:96px}
/* world title treatments */
.world-b .w-title .ttl{background:linear-gradient(180deg,#ffffff 0%,#bfc9d1 35%,#f4f7fa 48%,#6a747c 58%,#e6ebef 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 10px 22px rgba(0,0,0,.8)) drop-shadow(0 0 30px rgba(120,200,220,.35))}
.world-c .w-title .ttl{border-top:3px solid rgba(243,210,122,.7);border-bottom:3px solid rgba(243,210,122,.7);padding:18px 40px}
.world-d .w-title .ttl{animation:neon 3.2s ease-in-out infinite}
@keyframes neon{0%,100%{text-shadow:0 0 6px #fff,0 0 20px #00e5ff,0 0 40px #00e5ff,0 0 90px #0077ff}48%{text-shadow:0 0 6px #fff,0 0 22px #00e5ff,0 0 44px #00e5ff,0 0 100px #0077ff}50%{text-shadow:0 0 4px #fff,0 0 8px #00e5ff}52%{text-shadow:0 0 6px #fff,0 0 22px #00e5ff,0 0 44px #00e5ff,0 0 100px #0077ff}}
.world-g .w-title .ttl{font-weight:600}
.world-g .w-title .sub{color:rgba(20,26,46,.8)}
.world-h .w-title .ttl{transform:rotate(-2deg)}
/* leader */
.k-leader{position:absolute;inset:0;overflow:hidden;background:#000}
.k-leader .k-top{z-index:3;animation:fadein 1s .6s both}
.k-leader .w-title{top:50%}
.k-leader .ttl.slam{animation:slam .55s cubic-bezier(.1,.9,.2,1) .35s both}
.k-leader .sub.rise{animation:rise .8s ease-out 1.1s both}
.k-leader .w-tap{position:absolute;left:0;right:0;bottom:56px;text-align:center;font-size:24px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);z-index:3;animation:fadein 1s 2s both}
@keyframes slam{0%{transform:scale(3.2);opacity:0;filter:blur(18px)}60%{transform:scale(.96);opacity:1;filter:blur(0)}80%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.w-streak{position:absolute;left:-40%;top:50%;width:180%;height:8px;margin-top:-4px;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,#fff 45%,var(--w-ring,#e0b24a) 55%,transparent);filter:blur(2px);transform:scaleX(0);animation:streak .9s cubic-bezier(.2,.8,.2,1) .1s both;mix-blend-mode:screen}
@keyframes streak{0%{transform:scaleX(0);opacity:0}30%{opacity:1}100%{transform:scaleX(1.2);opacity:0}}
.w-flash{position:absolute;inset:0;z-index:5;pointer-events:none;background:#fff;opacity:0;animation:flashout .7s ease-out .8s forwards}
@keyframes flashout{from{opacity:.9}to{opacity:0}}
/* bumper */
.k-bumper{position:absolute;inset:0;overflow:hidden;display:grid;place-items:center;background:#000}
.w-badge{--c:#d62839;position:relative;width:560px;height:560px;border-radius:50%;display:grid;place-items:center;z-index:2;background:radial-gradient(circle at 50% 40%,#2a1447 0%,#140824 70%,#0a0412 100%);box-shadow:0 0 0 16px var(--c),0 0 0 26px #1a1020,0 0 120px color-mix(in srgb,var(--c) 70%,transparent),inset 0 0 80px rgba(0,0,0,.6);animation:badge 1.7s cubic-bezier(.1,.9,.2,1) both;overflow:hidden}
.w-badge .ring{position:absolute;inset:26px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffe9a8 0deg 5deg,transparent 5deg 15deg);-webkit-mask:radial-gradient(circle,transparent 0 calc(50% - 18px),#000 calc(50% - 16px) calc(50% - 2px),transparent 50%);mask:radial-gradient(circle,transparent 0 calc(50% - 18px),#000 calc(50% - 16px) calc(50% - 2px),transparent 50%);animation:spin 6s linear infinite;filter:drop-shadow(0 0 6px #ffd87a)}
.w-badge .lbl{position:relative;font-family:'Barlow Condensed',var(--k-font-head),sans-serif;font-weight:700;font-size:92px;line-height:1;text-transform:uppercase;letter-spacing:0;color:#fff;transform:skewX(-8deg);text-shadow:0 0 18px var(--c),0 0 40px var(--c),0 6px 0 color-mix(in srgb,var(--c) 60%,#000);max-width:470px;text-align:center;text-wrap:balance;padding:0 30px}
.w-badge .sweep{position:absolute;top:-20%;bottom:-20%;left:-40%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:bsweep 1.7s ease-in-out both}
.port .w-badge{width:620px;height:620px}
@keyframes badge{0%{transform:scale(2.6) rotate(-8deg);opacity:0}18%{transform:scale(.94) rotate(0);opacity:1}28%{transform:scale(1.02)}34%{transform:scale(1)}82%{transform:scale(1);opacity:1}100%{transform:scale(.7);opacity:0}}
@keyframes bsweep{0%,30%{left:-40%}70%,100%{left:120%}}
@keyframes spin{to{transform:rotate(360deg)}}
.k-bumper .k-meta{position:absolute;bottom:90px;left:0;right:0;justify-content:center;font-size:32px;color:rgba(255,255,255,.8);z-index:2;animation:fadein .5s .3s both}
/* count-in chrome */
.k-count{background:linear-gradient(180deg,#fff9e6 0%,#ffd86b 38%,#a7741a 52%,#ffe7a3 66%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 20px 40px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(255,216,107,.45))}
.play-low .k-count{background:none;color:var(--k-ink);filter:none;-webkit-text-fill-color:initial}
/* feedback words */
.k-feedback.good .verdict{color:#ffd86b;text-shadow:0 0 24px rgba(255,216,107,.55)}
.k-stamp{position:absolute;right:110px;bottom:250px;z-index:3;font-family:'Barlow Condensed',var(--k-font-head),sans-serif;font-weight:700;font-size:64px;text-transform:uppercase;letter-spacing:.06em;color:#fff;border:6px solid #fff;border-radius:12px;padding:6px 22px;transform:rotate(-8deg);opacity:.92;animation:stamp .4s cubic-bezier(.1,.9,.2,1) .25s both;text-shadow:0 2px 10px rgba(0,0,0,.6);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.k-stamp.good{color:#ffd86b;border-color:#ffd86b}
.port .k-stamp{right:48px;bottom:300px;font-size:52px}
@keyframes stamp{from{transform:rotate(-8deg) scale(2.2);opacity:0}to{transform:rotate(-8deg) scale(1);opacity:.92}}
.k-h1.gold{font-family:'Barlow Condensed',var(--k-font-head),sans-serif;font-weight:700;font-size:170px;text-transform:uppercase;letter-spacing:.02em;color:#ffd86b;text-shadow:0 2px 0 #c9931a,0 4px 0 #a5760f,0 6px 0 #7d580a,0 8px 0 #5a3f06,0 24px 44px rgba(0,0,0,.75)}
.port .k-h1.gold{font-size:140px}
.k-sign{background:#c9a97a;color:#3a2a14;font-size:44px;font-weight:700;padding:26px 40px;border-radius:6px;transform:rotate(-4deg);box-shadow:0 16px 40px rgba(0,0,0,.5);font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:.02em;border:2px solid rgba(0,0,0,.15)}
.k-sign::after{content:" :)";}
/* full colour pills at high playfulness on a photo (reference frame 09) */
.play-high.on-media .k-card{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 86%,white) 0%,var(--c) 42%,color-mix(in srgb,var(--c) 76%,black) 100%);color:var(--c-ink);border-color:color-mix(in srgb,var(--c) 55%,white);box-shadow:0 14px 34px color-mix(in srgb,var(--c) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.45)}
.play-high.on-media .k-card .key{background:rgba(0,0,0,.3);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.play-high.on-media .k-card.sel{transform:translateY(-4px) scale(1.03);box-shadow:0 0 0 6px rgba(255,255,255,.9),0 18px 44px color-mix(in srgb,var(--c) 60%,transparent)}
.play-high.on-media .k-card.sel .key{background:rgba(0,0,0,.35)}
.play-high.on-media .k-card.dim{opacity:.35}
.play-high.on-media .k-card.ok{box-shadow:0 0 0 8px #3ddc84,0 18px 50px rgba(61,220,132,.5)}
.play-high.on-media .k-imgs .k-card{background:var(--k-surface);color:var(--k-ink)}
.play-high.on-media .k-imgs .k-card b{background:var(--c);color:var(--c-ink)}
/* ---------- v3.1: Liams feedback (landscape, tik is antwoorden, reveal groot, START!, vette letters, rad) ---------- */
.scene{position:absolute;inset:0}
.scene.enter{animation:scenein .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes scenein{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:none}}
.play-low .scene.enter{animation-duration:.15s}
.k-btn.big{height:128px;font-size:46px;min-width:520px;padding:0 84px}
.k-btn.big[disabled]{opacity:.3}
.locking .k-card.sel{animation:lockpulse .42s ease-out both}
@keyframes lockpulse{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1.02)}}
.k-red span{font-size:80px;width:auto;letter-spacing:.04em;padding:0 16px;max-width:280px;text-wrap:balance}
.w-tag{position:absolute;right:72px;bottom:64px;z-index:3;font-size:20px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.88);background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 18px;backdrop-filter:blur(6px)}
.plate-light .w-tag{color:#141a2e;background:rgba(255,255,255,.55);border-color:rgba(20,26,46,.2)}
.world-e .w-tag{bottom:92px}
.k-attract .k-powered{bottom:22px;right:80px}
.port .w-tag{right:48px;bottom:60px}
.k-q{font-size:58px;font-weight:var(--k-head-weight)}
.k-p{font-weight:600}
.k-card{font-weight:700;font-size:36px}
.k-tf .k-card{font-size:64px}
.k-meta{font-weight:700}
.k-meta .sc{font-family:var(--k-font-head);font-size:34px;color:var(--k-accent);margin-right:8px;display:inline-block;line-height:1}
.k-meta .sc.bump{animation:pop .6s var(--k-ease) both}
.w-title .sub{font-weight:700;font-size:40px}
.w-esub{font-weight:700}
.w-prize{font-weight:700}
.k-slider .val{font-weight:800}
.k-feedback{padding:40px 120px;gap:56px;animation-delay:1.15s}
.k-feedback .verdict{font-size:64px}
.k-feedback .expl{font-size:36px;color:var(--k-ink);font-weight:500;line-height:1.35;margin-top:12px;max-width:1320px}
.k-reveal{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;animation:revealout .5s ease-in 1.5s both}
.k-reveal .burst{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,var(--rv,rgba(255,216,107,.6)) 0%,transparent 60%);animation:burst .9s ease-out both}
.k-reveal .word{position:relative;font-family:'Barlow Condensed',var(--k-font-head),sans-serif;font-weight:800;font-size:300px;line-height:.9;text-transform:uppercase;letter-spacing:.02em;text-align:center;color:#fff;transform:rotate(-5deg);animation:slam .5s cubic-bezier(.1,.9,.2,1) both;text-wrap:balance;max-width:1700px;padding:0 60px;text-shadow:0 10px 0 rgba(0,0,0,.35),0 30px 60px rgba(0,0,0,.6)}
.k-reveal.good .word{color:#ffd86b;text-shadow:0 2px 0 #c9931a,0 4px 0 #a5760f,0 6px 0 #7d580a,0 10px 0 #5a3f06,0 30px 60px rgba(0,0,0,.7)}
.k-reveal.bad{--rv:rgba(214,40,57,.5)}
.k-reveal.bad .word{color:#f3f3f7;text-shadow:0 2px 0 #9aa0b4,0 4px 0 #6c7189,0 6px 0 #4c5066,0 30px 60px rgba(0,0,0,.7)}
.k-reveal.poll{--rv:rgba(59,130,246,.45)}
.k-reveal.poll .word{font-size:190px}
.port .k-reveal .word{font-size:210px}
@keyframes burst{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.6)}}
@keyframes revealout{to{opacity:0;transform:scale(1.15) translateY(-40px)}}
.play-low .k-reveal{display:none}
.play-low .k-feedback{animation-delay:0s}
/* world E: the news of the week as a wheel of fortune */
.w-wheel{position:absolute;left:0;right:0;top:196px;height:360px;z-index:1;perspective:1500px;perspective-origin:50% 50%;pointer-events:none}
.w-wheel .ring{position:absolute;left:50%;top:50%;width:560px;height:315px;margin:-157px 0 0 -280px;transform-style:preserve-3d;animation:wheel 12s cubic-bezier(.25,.9,.25,1) infinite}
.w-wheel .pnl{position:absolute;inset:0;border-radius:14px;background-size:cover;background-position:center;box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 3px rgba(255,255,255,.22);overflow:hidden;backface-visibility:hidden;transform:rotateY(calc(var(--i) * 45deg)) translateZ(760px)}
.w-wheel .pnl::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.7))}
.w-wheel .pnl span{position:absolute;left:24px;bottom:16px;z-index:1;font-family:var(--k-font-head);font-weight:var(--k-head-weight);font-size:32px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.w-wheel .pointer{position:absolute;left:50%;top:-8px;width:0;height:0;margin-left:-28px;border-left:28px solid transparent;border-right:28px solid transparent;border-top:48px solid #ffd86b;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));transform-origin:50% 0;animation:flap 1.5s ease-out infinite;z-index:2}
@keyframes flap{0%{transform:rotate(-18deg)}30%{transform:rotate(7deg)}55%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
@keyframes wheel{0.0%{transform:translateZ(-760px) rotateY(0deg)}8.0%{transform:translateZ(-760px) rotateY(-45deg)}12.5%{transform:translateZ(-760px) rotateY(-45deg)}20.5%{transform:translateZ(-760px) rotateY(-90deg)}25.0%{transform:translateZ(-760px) rotateY(-90deg)}33.0%{transform:translateZ(-760px) rotateY(-135deg)}37.5%{transform:translateZ(-760px) rotateY(-135deg)}45.5%{transform:translateZ(-760px) rotateY(-180deg)}50.0%{transform:translateZ(-760px) rotateY(-180deg)}58.0%{transform:translateZ(-760px) rotateY(-225deg)}62.5%{transform:translateZ(-760px) rotateY(-225deg)}70.5%{transform:translateZ(-760px) rotateY(-270deg)}75.0%{transform:translateZ(-760px) rotateY(-270deg)}83.0%{transform:translateZ(-760px) rotateY(-315deg)}87.5%{transform:translateZ(-760px) rotateY(-315deg)}95.5%{transform:translateZ(-760px) rotateY(-360deg)}100%{transform:translateZ(-760px) rotateY(-360deg)}}
@keyframes wheelport{0.0%{transform:translateZ(-650px) rotateY(0deg)}8.0%{transform:translateZ(-650px) rotateY(-45deg)}12.5%{transform:translateZ(-650px) rotateY(-45deg)}20.5%{transform:translateZ(-650px) rotateY(-90deg)}25.0%{transform:translateZ(-650px) rotateY(-90deg)}33.0%{transform:translateZ(-650px) rotateY(-135deg)}37.5%{transform:translateZ(-650px) rotateY(-135deg)}45.5%{transform:translateZ(-650px) rotateY(-180deg)}50.0%{transform:translateZ(-650px) rotateY(-180deg)}58.0%{transform:translateZ(-650px) rotateY(-225deg)}62.5%{transform:translateZ(-650px) rotateY(-225deg)}70.5%{transform:translateZ(-650px) rotateY(-270deg)}75.0%{transform:translateZ(-650px) rotateY(-270deg)}83.0%{transform:translateZ(-650px) rotateY(-315deg)}87.5%{transform:translateZ(-650px) rotateY(-315deg)}95.5%{transform:translateZ(-650px) rotateY(-360deg)}100%{transform:translateZ(-650px) rotateY(-360deg)}}
.port .w-wheel{top:250px;height:320px}
.port .w-wheel .ring{width:480px;height:270px;margin:-135px 0 0 -240px;animation-name:wheelport}
.port .w-wheel .pnl{transform:rotateY(calc(var(--i) * 45deg)) translateZ(650px)}
.k-meta{white-space:nowrap}
.k-prog i{width:64px}
.world-e .k-attract .k-powered{bottom:78px}
video.w-plate{object-fit:cover;width:100%;height:100%;display:block}
/* ---------- v3.2: performance guard, leader per world, video moment, demo, flip counter ---------- */
.lite .k-frame,.lite .k-card,.lite .k-feedback,.lite .w-prize,.lite .k-demo,.lite .w-tag{backdrop-filter:none}
.lite .w-plate.soft{filter:brightness(.62)}
.lite .w-sweep,.lite .w-flare,.lite .w-spot,.lite .ld-beam{display:none}
.lite .w-plate{animation:none}
.ld-mast{position:absolute;left:0;right:0;top:0;height:150px;background:#fff;z-index:3;display:flex;align-items:center;justify-content:center;padding:0 320px 0 120px;box-shadow:0 10px 40px rgba(0,0,0,.45);animation:maston .6s cubic-bezier(.2,.8,.2,1) .3s both}
.ld-mast::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--k-primary)}
.ld-mast .ttl{font-family:var(--k-font-head);font-weight:var(--k-head-weight);font-size:74px;color:#111;text-transform:uppercase;text-align:center;text-wrap:balance;line-height:1}
@keyframes maston{from{transform:translateY(-100%)}to{transform:none}}
.ld-lower{position:absolute;left:120px;bottom:190px;z-index:3;display:flex;flex-direction:column;gap:6px;padding:22px 40px 22px 32px;background:#fff;border-left:14px solid var(--k-accent);box-shadow:0 20px 50px rgba(0,0,0,.5);animation:lowerin .55s cubic-bezier(.2,.8,.2,1) 1.1s both;color:#111}
.ld-lower b{font-family:var(--k-font-head);font-weight:var(--k-head-weight);font-size:56px;line-height:1}
.ld-lower span{font-size:26px;font-weight:700;color:#333;letter-spacing:.06em;text-transform:uppercase}
@keyframes lowerin{from{transform:translateX(-120%);opacity:0}to{transform:none;opacity:1}}
.world-e .k-leader .k-top .k-logo{color:var(--k-primary)}
.world-e .k-leader .k-top{z-index:4}
.ld-curtain{position:absolute;top:0;bottom:0;width:52%;z-index:4;background:repeating-linear-gradient(90deg,#7a0d1a 0 40px,#a3162a 40px 90px,#6b0a16 90px 130px);box-shadow:inset 0 0 120px rgba(0,0,0,.6)}
.ld-curtain.l{left:0;animation:curtl 1.6s cubic-bezier(.6,0,.3,1) .4s both}
.ld-curtain.r{right:0;animation:curtr 1.6s cubic-bezier(.6,0,.3,1) .4s both}
@keyframes curtl{to{transform:translateX(-104%)}}
@keyframes curtr{to{transform:translateX(104%)}}
.world-f .k-leader .ttl.slam{animation-delay:1.5s}
.world-f .k-leader .sub.rise{animation-delay:2.1s}
.world-f .k-leader .w-flash{animation-delay:1.9s}
.ld-beam{position:absolute;left:50%;top:-30%;width:220px;height:170%;margin-left:-110px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(255,236,180,.5),rgba(255,236,180,0));transform-origin:50% 0;mix-blend-mode:screen;filter:blur(8px)}
.ld-beam.a{animation:beam 3.6s ease-in-out infinite alternate}
.ld-beam.b{animation:beam 3.6s ease-in-out infinite alternate-reverse}
@keyframes beam{from{transform:rotate(-28deg)}to{transform:rotate(28deg)}}
.world-b .k-leader .w-plate{animation:kbzoom 5s cubic-bezier(.1,.6,.2,1) both,shake .5s .35s both}
.world-c .k-leader .ttl.slam,.world-g .k-leader .ttl.slam{animation:fadeup 1.3s ease-out .4s both}
@keyframes fadeup{from{opacity:0;transform:translateY(40px);letter-spacing:.2em}to{opacity:1;transform:none;letter-spacing:0}}
.world-d .k-leader .ttl.slam{animation:slam .5s cubic-bezier(.1,.9,.2,1) .35s both,neonon 1.2s steps(1) .8s both}
@keyframes neonon{0%{opacity:.2}10%{opacity:1}20%{opacity:.3}30%{opacity:1}45%{opacity:.4}55%{opacity:1}100%{opacity:1}}
.world-h .k-leader .ttl.slam{animation:sticker .7s cubic-bezier(.2,1.4,.3,1) .35s both}
@keyframes sticker{from{transform:scale(0) rotate(-20deg);opacity:0}to{transform:scale(1) rotate(-2deg);opacity:1}}
.k-vidfull{position:absolute;left:0;right:0;top:-150px;bottom:0;z-index:1;background:#000;overflow:hidden}
.k-vidfull video,.k-vidfull .kbv,.k-vidfull canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.k-vidfull .kbv{background-size:cover;background-position:center;animation:kbvid 5s linear both}
.k-vidfull .cap{position:absolute;left:72px;bottom:120px;font-size:24px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.9);display:flex;align-items:center;gap:12px;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.k-vidfull .cap i{width:16px;height:16px;border-radius:50%;background:#ff4d4d;animation:blink 1s steps(2) infinite}
.k-vidfull .hint{position:absolute;left:0;right:0;bottom:44px;text-align:center;font-size:32px;font-weight:700;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.k-vidfull .pb{position:absolute;left:0;right:0;bottom:0;height:14px;background:rgba(255,255,255,.2)}
.k-vidfull .pb i{display:block;height:100%;background:var(--k-accent);width:0;transition:width .2s linear}
.k-frame.slam-in{animation:slam .55s cubic-bezier(.1,.9,.2,1) both}
.k-cards.rise-in{animation:rise .5s ease-out .3s both}
.k-demo{position:absolute;left:96px;bottom:170px;width:640px;z-index:3;background:rgba(8,6,16,.74);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:24px 26px 22px;backdrop-filter:blur(10px);animation:rise .5s ease-out both;color:#fff}
.k-demo.done{animation:fadeout .6s 2.6s both}
@keyframes fadeout{to{opacity:0;transform:translateY(20px)}}
.k-demo .dlbl{position:absolute;left:24px;top:-16px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;background:var(--k-accent);color:var(--k-accent-ink);padding:5px 12px;border-radius:999px;font-weight:700}
.k-demo .dq{font-family:var(--k-font-head);font-weight:var(--k-head-weight);font-size:28px;line-height:1.2;margin:6px 0 14px;text-wrap:balance}
.k-demo .dopts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.k-demo .dopt{--c:#888;--c-ink:#fff;display:flex;align-items:center;gap:10px;font-size:21px;font-weight:700;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.08);border:2px solid color-mix(in srgb,var(--c) 60%,transparent);transition:all .3s;min-height:56px}
.k-demo .dopt .key{width:34px;height:34px;border-radius:8px;background:var(--c);color:var(--c-ink);display:grid;place-items:center;font-size:18px;flex:none}
.k-demo .dopt.sel{background:var(--c);color:var(--c-ink);transform:scale(1.03)}
.k-demo .dopt.sel .key{background:rgba(0,0,0,.3);color:#fff}
.k-demo .dopt.ok{box-shadow:0 0 0 4px #3ddc84}
.k-demo .dopt.dim{opacity:.35}
.k-demo .dhand{position:absolute;width:60px;height:60px;border-radius:50%;border:5px solid #fff;background:rgba(255,255,255,.28);box-shadow:0 8px 20px rgba(0,0,0,.5);animation:tap .6s cubic-bezier(.2,.8,.2,1) both;pointer-events:none}
@keyframes tap{from{transform:scale(1.8);opacity:0}60%{transform:scale(.9);opacity:1}to{transform:scale(1);opacity:.9}}
.k-demo .dword{position:absolute;right:20px;top:-34px;font-family:'Barlow Condensed',var(--k-font-head),sans-serif;font-weight:800;font-size:64px;color:#ffd86b;text-transform:uppercase;transform:rotate(-6deg);animation:slam .4s cubic-bezier(.1,.9,.2,1) both;text-shadow:0 4px 0 #a5760f,0 10px 30px rgba(0,0,0,.6);line-height:1}
.port .k-demo{display:none}
.w-prize .flip{display:inline-flex;gap:3px;margin-left:8px;vertical-align:middle;perspective:300px}
.w-prize .flip i{display:inline-grid;place-items:center;width:32px;height:42px;border-radius:6px;background:linear-gradient(180deg,#2a2438 0 49%,#161020 51%);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:36px;font-style:normal;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 4px 10px rgba(0,0,0,.5);position:relative;line-height:1}
.w-prize .flip i::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(0,0,0,.65)}
.plate-light .w-prize .flip i{background:linear-gradient(180deg,#3a3550 0 49%,#232036 51%)}
.w-prize .flip.go i{animation:flipd .6s cubic-bezier(.2,.8,.2,1) both}
.w-prize .flip.go i:nth-child(2){animation-delay:.12s}
@keyframes flipd{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- v3.3: centring, taller cards, adaptive grids, touch drag, pause, reveal marks, intro steps, new forms, world I ---------- */
.k-body.center{justify-content:center;gap:44px;padding-bottom:64px}
.k-body.center.fb{padding-bottom:280px}
.k-body.center .k-actions{margin-top:8px}
.k-cards{grid-template-columns:repeat(var(--cols,2),1fr);gap:var(--cg,24px);max-width:1560px}
.k-cards .k-card{min-height:var(--ch,168px);font-size:var(--cf,38px);padding:calc(var(--ck,60px)*.3) calc(var(--ck,60px)*.5);gap:calc(var(--ck,60px)*.4);line-height:1.15}
.k-cards .k-card .key{width:var(--ck,60px);height:var(--ck,60px);font-size:calc(var(--ck,60px)*.47)}
.k-cards.compact .k-card{min-height:var(--ch,100px)}
.k-card.ok.miss{opacity:.7;border-style:dashed}
.k-card.ok.miss::after{opacity:.6}
.k-multi{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:22px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--k-accent-ink);background:var(--k-accent);border-radius:999px;padding:6px 18px;font-family:var(--k-font-body)}
.k-frame{text-align:center}
.k-count{line-height:1.2;padding:.04em .16em .12em}
.k-count.word{font-size:250px}
.k-count.word::before{width:440px;height:440px;margin:-220px 0 0 -220px}
.port .k-count.word{font-size:190px}
/* intro as vertical steps with icons */
.k-steps{display:flex;flex-direction:column;gap:16px;width:100%;max-width:1260px}
.k-steps .step{--c:var(--k-primary);--c-ink:var(--k-primary-ink);display:flex;align-items:center;gap:30px;padding:18px 36px 18px 22px;border-radius:var(--k-radius);background:var(--k-panel);border:1px solid var(--k-line);box-shadow:var(--k-shadow);backdrop-filter:blur(8px);text-align:left;animation:rise .5s var(--k-ease) both;animation-delay:calc(var(--i,0)*.14s + .1s)}
.k-steps .step i{width:104px;height:104px;border-radius:50%;background:var(--c);color:var(--c-ink);display:grid;place-items:center;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px color-mix(in srgb,var(--c) 40%,transparent)}
.k-steps .step i svg{width:56px;height:56px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.k-steps .step b{font-family:var(--k-font-head);font-weight:var(--k-head-weight);font-size:46px;display:block;line-height:1.05;text-transform:var(--k-upper);letter-spacing:var(--k-head-track)}
.k-steps .step span{display:block;font-size:28px;color:var(--k-muted);line-height:1.3;margin-top:6px;font-weight:500}
.k-steps .step em{margin-left:auto;font-style:normal;font-family:var(--k-font-head);font-size:72px;font-weight:800;opacity:.22;line-height:1}
.lite .k-steps .step{backdrop-filter:none}
.port .k-steps{max-width:100%}
/* pause (P, or hold the clock) */
.k-pause{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:rgba(5,9,20,.6);backdrop-filter:blur(8px);color:#fff;cursor:pointer}
.k-pause .big{font-family:'Barlow Condensed',var(--k-font-head),sans-serif;font-weight:800;font-size:220px;line-height:1;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 20px 60px rgba(0,0,0,.6)}
.k-pause .sub{font-size:32px;font-weight:600;color:rgba(255,255,255,.8)}
.paused .k-timer .arc{stroke:var(--k-muted)}
.paused .k-zoom img,.paused .k-hints .hint{animation-play-state:paused}
/* reveal: a big check or cross, with or without the word */
.k-reveal .stack{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px}
.k-reveal .mark{width:340px;height:340px;border-radius:50%;background:#3ddc84;display:grid;place-items:center;box-shadow:0 0 0 18px rgba(255,255,255,.28),0 40px 90px rgba(0,0,0,.55);animation:slam .5s cubic-bezier(.1,.9,.2,1) both}
.k-reveal .mark svg{width:220px;height:220px;fill:none;stroke:#052e16;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.k-reveal.bad .mark{background:#ff3b3b}
.k-reveal.bad .mark svg{stroke:#fff}
.k-reveal.with-icon .word{font-size:200px}
.port .k-reveal.with-icon .word{font-size:170px}
.k-reveal.icon-only .mark{width:520px;height:520px}
.k-reveal.icon-only .mark svg{width:340px;height:340px}
/* auto-advance bar on the next button */
.k-btn{position:relative;overflow:hidden}
.k-btn .autobar{position:absolute;left:0;right:0;bottom:0;height:8px;background:rgba(255,255,255,.55);transform-origin:left;animation:autobar linear forwards}
@keyframes autobar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* touch drag: a rope for match, live reorder for order */
[data-drag]{touch-action:none}
.k-card.drag{transform:scale(1.03);z-index:3;box-shadow:0 24px 60px rgba(0,0,0,.45);transition:none}
.k-order .k-card{transition:transform .18s ease,background var(--k-dur),border-color var(--k-dur),box-shadow var(--k-dur)}
.k-order .k-card.drag{transition:none}
.k-order .k-card .grip{margin-left:auto;display:grid;gap:6px;letter-spacing:0;font-size:0}
.k-order .k-card .grip i{display:block;width:34px;height:5px;border-radius:3px;background:var(--k-muted);opacity:.7}
.k-match .k-card.over{border-color:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.75),var(--k-shadow);transform:scale(1.03)}
.k-match .mid{gap:10px;font-size:22px;font-weight:700;padding-top:20px}
.k-match .mid svg{width:72px;height:72px;fill:none;stroke:var(--k-muted);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
svg.k-rope{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
svg.k-rope path{fill:none;stroke-width:14;stroke-linecap:round;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
svg.k-rope path.tw{stroke:rgba(255,255,255,.4);stroke-width:5;stroke-dasharray:16 12;filter:none}
svg.k-rope circle{stroke:#fff;stroke-width:4}
/* new forms: zoom, hints, estimate */
.k-zoom{width:100%;max-width:820px;aspect-ratio:16/9;border-radius:var(--k-radius);overflow:hidden;border:2px solid var(--k-line);box-shadow:var(--k-shadow);background:#000;position:relative}
.k-zoom img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(4.5);transform-origin:var(--zx,50%) var(--zy,50%);animation:zoomout linear forwards}
.k-zoom img.done{animation:none;transform:none}
.k-zoom .tag{position:absolute;left:20px;top:16px;font-size:22px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.45);border-radius:999px;padding:6px 16px}
@keyframes zoomout{from{transform:scale(4.5)}to{transform:scale(1)}}
.k-hints{display:flex;flex-direction:column;gap:12px;width:100%;max-width:1300px}
.k-hints .hint{display:flex;align-items:center;gap:20px;padding:14px 26px;border-radius:var(--k-radius);background:var(--k-panel);border:1px solid var(--k-line);font-size:30px;font-weight:600;text-align:left;backdrop-filter:blur(8px);animation:hintin .5s var(--k-ease) both}
.k-hints .hint .n{width:52px;height:52px;border-radius:50%;background:var(--k-accent);color:var(--k-accent-ink);display:grid;place-items:center;font-family:var(--k-font-head);font-size:26px;font-weight:800;flex:none}
@keyframes hintin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.k-est{display:flex;align-items:center;gap:60px;width:100%;max-width:1300px;justify-content:center}
.k-est .val{font-family:var(--k-font-head);font-size:150px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;min-width:520px;text-align:right}
.k-est .val small{font-size:40px;color:var(--k-muted);margin-left:10px;letter-spacing:0}
.k-est .val.empty{color:var(--k-muted);opacity:.6}
.k-est .pad{display:grid;grid-template-columns:repeat(3,150px);gap:12px}
.k-est .pad button{height:100px;border:2px solid var(--k-line);border-radius:var(--k-radius);background:var(--k-surface);color:var(--k-ink);font-family:var(--k-font-head);font-size:44px;font-weight:700;box-shadow:0 3px 0 var(--k-line)}
.k-est .pad button:active{transform:translateY(2px);box-shadow:none}
.k-est .pad button.fn{font-size:28px;background:transparent}
.port .k-est{flex-direction:column;gap:24px}
.k-imgs{max-width:1040px}
.k-imgs .k-card img{width:100%;aspect-ratio:16/8;object-fit:cover;display:block}
/* world I, Actie (Greenpeace): sticker title, banner leader, bubbles */
.world-i .w-title .ttl{background:#ffe100;color:#0b3d0b;padding:10px 44px 16px;transform:rotate(-2deg);box-shadow:0 14px 0 #0b3d0b,0 30px 60px rgba(0,0,0,.55);text-shadow:none;display:inline-block}
.world-i .w-title .sub{color:#fff;font-weight:800;text-shadow:0 3px 14px rgba(0,0,0,.7);margin-top:20px}
.world-i .k-h2{display:inline-block;background:#ffe100;color:#0b3d0b;padding:6px 28px 10px;transform:rotate(-1.5deg);box-shadow:0 8px 0 #0b3d0b}
.world-i .k-steps .step{background:rgba(11,61,11,.74);border-color:rgba(255,225,0,.35);color:#fff;transform:rotate(-.6deg)}
.world-i .k-steps .step:nth-child(2){transform:rotate(.6deg)}
.world-i .k-steps .step span{color:rgba(255,255,255,.82)}
.world-i .k-steps .step i{background:#ffe100;color:#0b3d0b}
.ld-banner{position:absolute;left:50%;top:0;width:1360px;margin-left:-680px;z-index:3;background:#198700;color:#ffe100;padding:150px 80px 100px;text-align:center;clip-path:polygon(0 0,100% 0,100% 100%,50% 90%,0 100%);transform-origin:top;animation:unfurl 1.1s cubic-bezier(.2,.8,.2,1) .35s both;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.ld-banner::before,.ld-banner::after{content:"";position:absolute;top:0;width:12px;height:150px;background:repeating-linear-gradient(180deg,#d9c27a 0 12px,#a88f4a 12px 24px)}
.ld-banner::before{left:120px}.ld-banner::after{right:120px}
.ld-banner .ttl{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:118px;line-height:.92;text-transform:uppercase;text-wrap:balance}
.ld-banner .sub{font-size:40px;font-weight:700;color:#fff;margin-top:22px}
@keyframes unfurl{from{transform:scaleY(0)}to{transform:none}}
.world-i .k-leader .w-flash{animation-delay:1.5s}
.world-i .k-leader .w-tap{color:rgba(255,255,255,.75)}

/* ---------- v3.4: points, prominent clock, after-moment, score flash, responsive masthead, portrait ---------- */
.w-mast,.ld-mast{height:auto;min-height:150px;padding:14px 320px 14px 120px}
.port .w-mast,.port .ld-mast{min-height:170px;padding:14px 240px 14px 40px}
.port .w-mast .ttl,.port .ld-mast .ttl{font-size:60px}
.k-timer{position:relative}
.k-pts{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);background:var(--k-accent);color:var(--k-accent-ink);font-family:var(--k-font-head);font-weight:800;font-size:22px;line-height:1.2;padding:3px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:1}
.k-timer.low .k-pts{background:var(--k-err);color:#fff}
.k-timer.bar .k-pts{position:static;transform:none;margin-top:4px}
.clock-big .k-top{height:210px}
.clock-big .k-body{top:210px}
.clock-big .k-timer{width:200px;height:200px}
.clock-big .k-timer svg{width:200px;height:200px}
.clock-big .k-timer circle{stroke-width:14}
.clock-big .k-timer .n{font-size:92px}
.clock-big .k-pts{font-size:28px;padding:4px 18px;bottom:-20px}
.clock-big .k-timer:not(.low){filter:drop-shadow(0 0 22px color-mix(in srgb,var(--k-accent) 60%,transparent))}
.clock-big .k-timer.low{animation:clockpulse 1s ease-in-out infinite;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--k-err) 80%,transparent))}
.clock-big .k-timer.low .n{animation:none}
@keyframes clockpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.k-tense{position:absolute;inset:0;pointer-events:none;z-index:2;box-shadow:inset 0 0 220px rgba(255,40,40,.65);opacity:0}
.clock-big.tense .k-tense{animation:tensepulse 1s ease-in-out infinite}
@keyframes tensepulse{0%,100%{opacity:.3}50%{opacity:1}}
.play-low .k-tense{display:none}
.k-feedback .verdict .pts{margin-left:14px;background:var(--k-accent);color:var(--k-accent-ink);border-radius:999px;padding:2px 18px;font-size:40px;line-height:1.3}
.k-feedback .verdict small{font-size:30px;font-weight:600;color:var(--k-muted);margin-left:10px;text-transform:none}
.k-result-pts{font-family:var(--k-font-head);font-size:44px;font-weight:800;color:var(--k-accent);margin-top:-12px}
.k-scoreov{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(5,9,20,.55);backdrop-filter:blur(8px);color:#fff;animation:fadein .25s both;cursor:pointer}
.k-scoreov .n{font-family:var(--k-font-head);font-size:300px;font-weight:800;line-height:1;color:var(--k-accent);text-shadow:0 20px 60px rgba(0,0,0,.6)}
.k-scoreov .l{font-size:44px;font-weight:700}
/* after-moment: image, video, fact or headline right after the answer, under the feedback bar */
.k-after{position:absolute;inset:0;z-index:3;overflow:hidden;background:#000;opacity:0;animation:afterin .7s ease 1.6s forwards}
@keyframes afterin{to{opacity:1}}
.play-low .k-after{animation-delay:.3s}
.k-after .w-plate.dim{filter:brightness(.42)}
.k-fact{position:absolute;left:0;right:0;top:0;bottom:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 120px;text-align:center;color:#fff}
.k-fact .lbl{font-size:30px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--k-accent)}
.k-fact .big{font-family:'Barlow Condensed',var(--k-font-head),sans-serif;font-weight:800;font-size:300px;line-height:.95;text-shadow:0 20px 60px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
.k-fact .txt{font-size:44px;font-weight:600;max-width:1300px;line-height:1.3;text-wrap:balance}
.k-head{position:absolute;left:0;right:0;top:0;bottom:280px;display:grid;place-items:center;padding:0 120px}
.k-head .paper{background:#fff;color:#111;padding:44px 56px 40px;max-width:1300px;transform:rotate(-1.5deg);box-shadow:0 40px 80px rgba(0,0,0,.6);border-top:10px solid var(--k-primary);animation:slam .5s cubic-bezier(.1,.9,.2,1) 1.8s both}
.k-head .kicker{font-size:24px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#555;margin-bottom:14px}
.k-head .h{font-family:var(--k-font-head);font-weight:var(--k-head-weight);font-size:66px;line-height:1.08;text-wrap:balance}
.port .k-fact,.port .k-head{padding:0 60px;bottom:360px}
.port .k-fact .big{font-size:240px}
.port .k-head .h{font-size:56px}

/* ---------- v3.5: open answer (type it, any of the accepted answers counts) ---------- */
.k-open{width:100%;max-width:1500px;display:flex;flex-direction:column;align-items:center;gap:18px}
.k-open .in{width:100%;max-width:1200px;min-height:112px;border:3px solid var(--k-line);border-radius:var(--k-radius);background:var(--k-surface);font-family:var(--k-font-head);font-size:56px;font-weight:700;padding:0 36px;display:flex;align-items:center;color:var(--k-ink);box-shadow:inset 0 1px 0 var(--k-rim),var(--k-shadow);text-transform:var(--k-upper);overflow:hidden;white-space:nowrap}
.k-open .in.empty{color:var(--k-muted);font-weight:500;font-family:var(--k-font-body);font-size:34px;text-transform:none}
.k-open .in .caret{width:4px;height:60px;background:var(--k-accent);margin-left:6px;animation:blink 1s steps(2) infinite;flex:none}
.k-open .k-kbd{margin-top:0}
.k-open .k-kbd button.ok{background:var(--k-primary);color:var(--k-primary-ink);border-color:transparent;min-width:200px;font-weight:800}
.k-open .k-kbd button[disabled]{opacity:.4}
.k-open .also{font-size:28px;color:var(--k-ink);text-align:center;max-width:1300px;line-height:1.35}
.k-open .also b{color:var(--k-accent)}
.stage.on-media .k-open .in{backdrop-filter:blur(8px)}
.port .k-open .k-kbd button{min-width:76px;height:80px;font-size:30px}
.port .k-open .k-kbd button.sp{min-width:340px}
.port .k-open .in{font-size:48px}

/* ---------- v3.7: merklogo als afbeelding, lettervariant, staande vragencarrousel, presets ---------- */
.k-logo-img{display:block;height:44px;width:calc(44px * var(--k-logo-ratio,3));background:var(--k-logo-img) no-repeat right center/contain}
.world-e .k-attract .k-top .k-logo-img,.world-e .k-leader .k-top .k-logo-img{background-image:var(--k-logo-img-blue)}
.k-q,.k-h1,.k-h2,.k-steps .step b,.w-mast .ttl,.w-title .ttl,.k-score,.k-count,.ld-mast .ttl{font-stretch:var(--k-head-stretch,100%)}
.w-qcar{display:none}
.port .w-qcar{display:block;position:absolute;left:70px;right:70px;top:620px;height:640px;z-index:1;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.port.world-e .w-qcar{top:330px;height:940px}
.w-qcar .col{display:flex;flex-direction:column;gap:22px;animation:qcar calc(var(--n,6) * 5.5s) linear infinite}
@keyframes qcar{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.w-qcar .qc{position:relative;background:#fff;color:#141414;border-radius:var(--k-radius);box-shadow:0 18px 40px rgba(0,0,0,.35);padding:24px 30px 26px 34px;border-left:12px solid var(--c)}
.w-qcar .rb{display:inline-block;font-family:var(--k-font-body);font-weight:700;font-size:19px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--c);padding:4px 12px;border-radius:3px}
.w-qcar .qt{position:absolute;right:26px;top:26px;font-family:var(--k-font-body);font-size:19px;font-weight:600;color:#74797a;text-transform:uppercase;letter-spacing:.06em}
.w-qcar .qp{font-family:var(--k-font-head);font-weight:var(--k-head-weight);font-stretch:var(--k-head-stretch,100%);font-size:40px;line-height:1.15;margin-top:14px;text-wrap:balance}
.port .w-wheel{display:none}
.port .has-qcar .w-title{top:150px;transform:translate(-50%,0)}
.port.world-e .w-esub{top:228px;padding:0 70px;font-size:34px}

/* ---------- v5, pakket K: kioskmodus (?kiosk), dagsluier, staffpaneel in cijfers, lockout, tikdoelen vanaf 80 px ---------- */
html.k5-kiosk, html.k5-kiosk body{overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overflow:hidden;background:#07040d}
/* cursor alleen weg op een touchscreen, of na vier seconden stilstand van de muis (7 nov 2026: Liam kon op de demo-pc niet klikken) */
html.k5-kiosk.k5-geen-cursor, html.k5-kiosk.k5-geen-cursor *{cursor:none!important}
html.k5-kiosk #bar{display:none!important}
html.k5-kiosk #kioskWrap{height:100vh;height:100dvh}
html.k5-kiosk .k-staff{touch-action:pan-y}
html.k5-kiosk input, html.k5-kiosk textarea{user-select:text;-webkit-user-select:text}
html.k5-kiosk .stage input[type=range]{touch-action:none}
/* dagpauze en einde van de dag over het aantrekscherm */
.k5-sluier{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:rgba(7,4,13,.82);backdrop-filter:blur(6px);color:#fff;text-align:center;padding:80px}
.k5-sluier-t{font-family:var(--k-font-head);font-size:120px;font-weight:800;line-height:1}
.k5-sluier-s{font-size:44px;color:rgba(255,255,255,.8)}
/* staffpaneel: de dag in cijfers van 48 px en grote knoppen */
.k5-staff .k5-cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.k5-cijfer{background:#1e1730;border:2px solid #332548;border-radius:20px;padding:24px 28px}
.k5-cijfer .n{font-family:var(--font-display);font-size:72px;line-height:1;font-variant-numeric:tabular-nums}
.k5-cijfer .l{font-size:24px;color:#a79dbb;margin-top:8px}
.k5-dagknoppen button{min-height:96px;font-size:30px}
.k5-tel{display:inline-block;min-width:48px;margin-left:10px;padding:2px 12px;border-radius:999px;background:#14101f;color:#f1edf7;font-variant-numeric:tabular-nums}
.k5-staff .box{font-size:26px}
.k5-staff .pill{color:#f1edf7;font-size:24px;padding:8px 18px}
/* kioskcode: lockout na drie foute pogingen */
.k5-pin.k5-slot .pad button{opacity:.35}
.k5-pin .k5-fout{color:#ff8a8a}
/* tikdoelen vanaf 80 px (inventaris 4: toetsenbord 76 px, vinkje 48 px) */
.k-kbd button{height:80px;min-width:84px}
.k-consent{min-height:80px;align-items:center}
.k-consent i{width:64px;height:64px;font-size:40px}
/* leesbaarheid op 43 inch staand (1080 x 1920): antwoorden vanaf 36 px, ook in de compacte, rij-, koppel-, hint- en beeldvormen */
.stage.port .k-cards .k-card{font-size:max(36px,var(--cf,38px))}
.stage.port .k-match .k-card, .stage.port .k-order .k-card{font-size:36px}
.stage.port .k-hints .hint{font-size:36px}
.stage.port .k-imgs .k-card b{font-size:36px}
.stage.port .k-open .k-kbd button{min-width:84px;padding:0 10px}
/* bedienen met de telefoon (js/afstand.js): QR plus uitleg in het staffpaneel */
.k5-afstand .k5-afstand-rij{display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap}
.k5-afstand .k5-afstand-qr{flex:0 0 auto;width:440px;max-width:100%;aspect-ratio:1;background:#fff;border-radius:24px;padding:20px;box-sizing:border-box}
.k5-afstand .k5-afstand-qr svg{display:block;width:100%;height:100%}
.k5-afstand .box{flex:1 1 420px;line-height:1.35}
.k5-afstand .k5-afstand-code{font-family:var(--font-display);font-size:40px;letter-spacing:.08em;color:#f1edf7}