/* GDESIGN scherm: huisstijl. Crème, goud uit het logo, inkt. Lettertype: Kohinoor Devanagari als het bestand er staat, anders systeemletter. */
@font-face{font-family:"Kohinoor Devanagari";font-weight:400;font-display:swap;src:local("Kohinoor Devanagari"),url(fonts/KohinoorDevanagari-Book.woff2) format("woff2")}
@font-face{font-family:"Kohinoor Devanagari";font-weight:600;font-display:swap;src:local("Kohinoor Devanagari Medium"),url(fonts/KohinoorDevanagari-Medium.woff2) format("woff2")}
@font-face{font-family:"Kohinoor Devanagari";font-weight:700;font-display:swap;src:local("Kohinoor Devanagari Bold"),url(fonts/KohinoorDevanagari-Bold.woff2) format("woff2")}
@font-face{font-family:"Nothing You Could Do";font-weight:400;font-display:swap;src:url(fonts/NothingYouCouldDo.woff2) format("woff2")}
:root{--inkt:#241d17;--goud:#f9b233;--goud-diep:#e29a14;--room:#fbf4ea;--room-2:#f2e7d3;--nacht:#17163a;--nacht-2:#221f4c;--licht:#fff;--zacht:rgba(255,255,255,.74);--handgoud:#ffd27a;
  --hand:"Nothing You Could Do","Segoe Print","Bradley Hand",cursive;--merkfont:"Kohinoor Devanagari",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:var(--licht);cursor:none;user-select:none;-webkit-user-select:none;font-family:var(--merkfont)}
#podium{position:fixed;inset:0;background:#000;overflow:hidden;z-index:1}
.laag{position:absolute;inset:0;overflow:hidden;background:#000;will-change:transform,opacity;color:#fff}
.laag img,.laag video{position:absolute;inset:0;width:100%;height:100%;display:block}
.laag.vullen img,.laag.vullen video{object-fit:cover}
.laag.passen img,.laag.passen video{object-fit:contain}
.laag.tekst{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:7vmin}
.laag.tekst h1{font-weight:700;line-height:1.08;letter-spacing:-.01em;font-size:11vmin;overflow-wrap:anywhere}
.laag.tekst p{margin-top:3vmin;line-height:1.3;font-size:5.4vmin;white-space:pre-wrap;overflow-wrap:anywhere;max-width:90%}

/* merkschermen (start, koppelen, leeg): alleen zichtbaar als er geen slides spelen */
body[data-status="spelen"] #achtergrond{display:none}
#achtergrond{position:fixed;inset:0;z-index:2;overflow:hidden;background:radial-gradient(110vmax 90vmax at 15% 5%,var(--nacht-2) 0,var(--nacht) 60%,#0e0d27 100%)}
body.foto #achtergrond{background:linear-gradient(180deg,rgba(23,22,58,.58) 0,rgba(23,22,58,.66) 55%,rgba(14,13,39,.86) 100%),url(achtergrond.jpg) center/cover no-repeat}
@media (orientation:portrait){body.foto #achtergrond{background:linear-gradient(180deg,rgba(23,22,58,.58) 0,rgba(23,22,58,.66) 55%,rgba(14,13,39,.86) 100%),url(achtergrond-staand.jpg) center/cover no-repeat,url(achtergrond.jpg) center/cover no-repeat}}
.vorm{position:absolute;display:block;background:var(--goud);opacity:.7;will-change:transform}
.v1{width:62vmin;height:62vmin;right:-14vmin;top:-20vmin;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation:drijf1 22s ease-in-out infinite alternate}
.v2{width:92vmin;height:92vmin;left:-30vmin;bottom:-44vmin;background:linear-gradient(135deg,var(--goud),var(--goud-diep));clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:.55;animation:drijf2 28s ease-in-out infinite alternate}
body.foto .vorm{display:none}
@keyframes drijf1{to{transform:translate(-6vmin,5vmin) rotate(8deg)}}
@keyframes drijf2{to{transform:translate(7vmin,-5vmin) rotate(-6deg)}}

.merk{position:fixed;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:5vmin;text-align:center}
.merk[hidden]{display:none}
body:not([data-status="start"]) #start{display:none}
body[data-status="spelen"] .merk{display:none}
.kaart{display:flex;flex-direction:column;align-items:center;gap:3.4vmin;width:min(118vmin,92vw);padding:3vmin 4vmin;text-align:center;text-shadow:0 .2vmin 2vmin rgba(14,13,39,.55);animation:opkomst .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes opkomst{from{opacity:0;transform:translateY(3vmin) scale(.985)}}
.logo{height:10vmin;width:auto;display:block}
.logo.groot{height:min(26vmin,30vh);animation:opkomst 1.1s cubic-bezier(.2,.8,.2,1) both}
.kop{font-size:6.6vmin;font-weight:700;line-height:1.05;letter-spacing:-.01em}
.hand{font-family:var(--hand);font-size:6vmin;line-height:1.1;color:var(--handgoud);margin-top:-.6vmin}
.uitleg{font-size:3.5vmin;line-height:1.4;color:var(--zacht);max-width:86vmin}
.stappen{list-style:none;display:flex;flex-direction:column;gap:1.6vmin;text-align:left;font-size:3.5vmin;line-height:1.2}
.stappen li{display:flex;align-items:center;gap:2.2vmin}
.stappen span{flex:none;display:inline-flex;align-items:center;justify-content:center;width:5.4vmin;height:5.4vmin;border-radius:50%;background:var(--goud);color:var(--inkt);text-shadow:none;font-weight:700;font-size:3vmin}
.stappen em{font-style:normal}.stappen strong{font-weight:700}
.code{font-size:15vmin;font-weight:700;line-height:1;letter-spacing:.12em;padding:2.6vmin 5.2vmin 2.6vmin 6.2vmin;border-radius:3vmin;background:rgba(14,13,39,.62);border:.35vmin solid var(--goud);color:var(--goud);font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:none;box-shadow:0 3vmin 9vmin rgba(0,0,0,.35)}
.melding{display:flex;align-items:center;gap:1.6vmin;font-size:2.9vmin;color:var(--zacht)}
.melding b{font-weight:600}
.puls{display:block;width:2vmin;height:2vmin;border-radius:50%;background:var(--goud);animation:puls 1.6s ease-in-out infinite}
@keyframes puls{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.15);opacity:1}}
.laadbalk{position:absolute;bottom:12vmin;left:50%;width:22vmin;height:.7vmin;margin-left:-11vmin;border-radius:1vmin;background:rgba(255,255,255,.18);overflow:hidden}
.laadbalk i{display:block;width:40%;height:100%;border-radius:1vmin;background:var(--goud);animation:laad 1.6s ease-in-out infinite}
@keyframes laad{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
@media (orientation:portrait){.kaart{width:92vw;padding:3vmin 3vmin}.code{font-size:13vmin}.logo{height:9vmin}}
#offlinestip{position:fixed;right:1.2vmin;bottom:1.2vmin;z-index:9;width:1.4vmin;height:1.4vmin;border-radius:50%;background:var(--goud);opacity:.65}
#offlinestip[hidden]{display:none}