html,body{height:100%;margin:0;overscroll-behavior:none}

body.start{
  min-height:100%;
  padding:0!important;
  overflow:hidden!important;
  background:#04143a!important;
}
body.start::before{display:none}

.startwereld{
  position:relative;
  isolation:isolate;
  width:100%!important;
  max-width:none!important;
  height:100dvh;
  min-height:38rem!important;
  margin:0!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
}

.werelddecor{
  position:absolute;
  inset:0;
  z-index:-3;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  pointer-events:none;
  user-select:none;
}

.startwereld::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(1,8,32,.34),transparent 25%,transparent 72%,rgba(1,7,27,.18));
}
.startwereld::after{display:none!important}

.startkop{
  position:relative;
  z-index:5;
  text-align:center;
  padding:max(1.1rem,env(safe-area-inset-top)) 4.8rem .2rem!important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.34));
}
.startkop .missie{
  margin:0 0 .08rem!important;
  color:#ffe46d;
  font-size:clamp(.62rem,2.1vw,.82rem);
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.startkop h1{
  margin:0!important;
  color:#fffdf1;
  font-family:"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  font-size:clamp(2.55rem,10vw,5.6rem)!important;
  font-weight:950;
  line-height:.94;
  letter-spacing:-.055em;
  text-shadow:0 4px 0 #173a86,0 8px 18px rgba(0,0,0,.35);
}
.titelstreep{
  display:block;
  width:clamp(7rem,30vw,13rem);
  height:.48rem;
  margin:.42rem auto .32rem;
  border-radius:70% 35% 70% 30%;
  background:linear-gradient(90deg,#ffb63e,#ffe36b 55%,#ffbf44);
  transform:rotate(-2deg);
  box-shadow:0 2px 0 rgba(102,54,18,.35),0 0 12px rgba(255,222,82,.35);
}
.startkop .sub{
  margin:0!important;
  color:#ddebff!important;
  font-size:clamp(.7rem,2.35vw,.96rem)!important;
  font-weight:800;
  letter-spacing:.02em;
  opacity:1!important;
  text-shadow:0 2px 5px rgba(0,0,0,.7);
}

#rooster{
  position:relative;
  z-index:2;
  width:min(calc(100% - 1.25rem),61rem)!important;
  max-width:none!important;
  height:100%;
  min-height:0;
  margin:0 auto;
  padding:0!important;
  display:block!important;
}

a.tegel{
  position:absolute!important;
  display:block!important;
  width:min(54vw,25rem);
  aspect-ratio:1!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
  background:none!important;
  box-shadow:none!important;
  color:#0b173d!important;
  text-decoration:none;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
}
/* Vijf eilanden: twee rijen van twee en onderaan vrij tekenen in het midden.
   Op een liggend scherm staan ze op één rij. */
a.tegel{width:min(44vw,22rem)}
a.tegel-schrijven{left:2%;top:0;transform:rotate(-2.4deg)}
a.tegel-kleuren-op-letter{right:2%;top:8%;transform:rotate(2.6deg)}
a.tegel-lezen{left:2%;top:31%;transform:rotate(1.8deg)}
a.tegel-rekenen{right:2%;top:39%;transform:rotate(-2.2deg)}
a.tegel-tekenen{left:50%;top:63%;transform:translateX(-50%) rotate(-1deg)}

.eilandkunst{
  position:absolute;
  inset:0;
  display:block;
  animation:zweef 6.8s ease-in-out infinite;
  transform-origin:50% 57%;
  transition:filter .24s ease,transform .24s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.tegel-kleuren-op-letter .eilandkunst{animation-duration:7.6s;animation-delay:-2.9s}
.tegel-lezen .eilandkunst{animation-duration:7.2s;animation-delay:-4.1s}
.tegel-rekenen .eilandkunst{animation-duration:8s;animation-delay:-1.7s}
.tegel-tekenen .eilandkunst{animation-duration:8.3s;animation-delay:-5.1s}
.missiebeeld{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 .6rem .75rem rgba(0,4,26,.46));
  transition:filter .24s ease;
}
/* Het houten bord staat in deze drie geschilderde eilanden niet precies in het
   hart van de tegel: het hangt een paar procent naar rechts en zit iets hoger
   dan het midden van de tegel. De naam stond daardoor links van het bord.
   De waarden hieronder zijn opgemeten met gereedschap/bord-meten.py; regenereer
   je een eiland, meet dan opnieuw. */
.eilandtitel{
  position:absolute;
  left:var(--bord-midden,52.9%);
  top:var(--bord-top,62.8%);
  z-index:3;
  width:54%;
  height:16.5%;
  display:grid;
  place-items:center;
  transform:translateX(-50%);
  color:#101942;
  font-family:"Arial Rounded MT Bold","Arial Black","Trebuchet MS",system-ui,sans-serif;
  font-size:clamp(1rem,4.6vw,1.35rem)!important;
  font-weight:950!important;
  line-height:.9;
  letter-spacing:-.055em;
  text-wrap:balance;
  -webkit-text-stroke:.018em #101942;
  paint-order:stroke fill;
  text-shadow:0 1px 0 #fff6d2,0 2px 2px rgba(92,48,15,.16);
  pointer-events:none;
}
.tegel-schrijven{--bord-midden:53.7%}
.tegel-kleuren-op-letter{--bord-midden:52.0%}
.tegel-tekenen{--bord-midden:52.9%}
/* De twee premium assets hebben hun naam al haarscherp in het houten bord. */
.tegel-lezen .eilandtitel,.tegel-rekenen .eilandtitel{display:none}

a.tegel:hover .eilandkunst{transform:scale(1.012) translateY(-.08rem)}
a.tegel.is-geselecteerd .eilandkunst,
a.tegel:focus-visible .eilandkunst{transform:scale(1.025) translateY(-.15rem)}
a.tegel.is-geselecteerd .missiebeeld,
a.tegel:focus-visible .missiebeeld{
  filter:drop-shadow(0 .65rem .8rem rgba(0,4,26,.48))
    drop-shadow(0 0 1.05rem rgba(255,238,162,.5))
    drop-shadow(0 0 2.15rem rgba(105,190,255,.3)) brightness(1.035) saturate(1.025);
}
a.tegel:focus-visible{outline:3px solid #fff2a0;outline-offset:-.15rem;border-radius:48%}
a.tegel:active .eilandkunst{transform:scale(.985) translateY(.16rem)}
a.tegel.is-geselecteerd .eilandtitel{color:#071a4a;text-shadow:0 1px 0 #fff6d2,0 0 .65rem rgba(255,239,151,.8)}

/* Wachten op de oefening. De tik moet meteen te zien zijn: het gekozen eiland
   ademt rustig door en de rest van de wereld dimt, tot de browser de nieuwe
   pagina tekent. Geen reisanimatie, geen tussenscherm - alleen een teken dat
   de tik is aangekomen. */
body.onderweg a.tegel:not(.is-onderweg){
  opacity:.45;
  filter:saturate(.7);
  /* Kort: het dimmen moet als een bevestiging van de tik voelen, niet als een
     overgang die je ziet gebeuren. */
  transition:opacity .12s ease,filter .12s ease;
}
body.onderweg a.tegel.is-onderweg .eilandkunst{
  animation:eilandademt 1.1s ease-in-out infinite;
}
@keyframes eilandademt{
  0%,100%{transform:scale(1.025) translateY(-.15rem)}
  50%{transform:scale(1.055) translateY(-.32rem)}
}
body.onderweg a.tegel.is-onderweg .missiebeeld{
  filter:drop-shadow(0 .65rem .8rem rgba(0,4,26,.48))
    drop-shadow(0 0 1.4rem rgba(255,238,162,.75))
    drop-shadow(0 0 2.6rem rgba(105,190,255,.45)) brightness(1.06) saturate(1.05);
}
@media (prefers-reduced-motion:reduce){
  body.onderweg a.tegel.is-onderweg .eilandkunst{
    animation:none;
    transform:scale(1.04) translateY(-.25rem);
  }
  body.onderweg a.tegel:not(.is-onderweg){transition:none}
}

.tegel .uitleg{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

#onderbalk{
  position:absolute!important;
  inset:0!important;
  z-index:10;
  margin:0!important;
  padding:0!important;
  display:block!important;
  border:0!important;
  background:none!important;
  pointer-events:none;
}
#onderbalk .knop{
  position:absolute;
  width:3.55rem;
  height:3.55rem;
  min-width:52px;
  min-height:52px;
  padding:0!important;
  overflow:hidden;
  border:0!important;
  border-radius:50%!important;
  background-color:transparent!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:100% 100%!important;
  box-shadow:0 5px 14px rgba(0,5,25,.4)!important;
  color:transparent!important;
  text-indent:10rem;
  white-space:nowrap;
  pointer-events:auto;
}
#onderbalk [data-slot]{left:max(1rem,env(safe-area-inset-left));top:max(1rem,env(safe-area-inset-top));background-image:url("../ui/ico-slot.svg")!important}
#onderbalk a.knop{right:max(1rem,env(safe-area-inset-right));top:max(1rem,env(safe-area-inset-top));background-image:url("../ui/ico-info.svg")!important}
#onderbalk [data-deel]{right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));width:3.15rem;height:3.15rem;background-image:url("../ui/ico-share.svg")!important}
#onderbalk [data-muziek]{
  right:max(1rem,env(safe-area-inset-right));
  bottom:calc(max(1rem,env(safe-area-inset-bottom)) + 3.75rem);
  width:3.15rem;height:3.15rem;
  color:#fff5a5!important;text-indent:0!important;
  font-size:0!important;
  background:linear-gradient(145deg,rgba(32,79,163,.95),rgba(7,27,80,.98))!important;
  border:2px solid rgba(255,244,170,.48)!important;
}
#onderbalk [data-muziek]::before{content:"♫";font-size:1.45rem;filter:drop-shadow(0 0 .4rem #9fdbff)}
#onderbalk [data-muziek][aria-pressed="false"]::before{content:"♪";opacity:.42;filter:none}
#onderbalk [data-installeer]{left:max(1rem,env(safe-area-inset-left));bottom:max(1rem,env(safe-area-inset-bottom));width:3.15rem;height:3.15rem;background-image:url("../ui/ico-install.svg")!important}

.alleen-lezer{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important
}

.sterrenregen{
  position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  --luchtrand:52%;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--luchtrand) - 9%),transparent var(--luchtrand));
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--luchtrand) - 9%),transparent var(--luchtrand));
}
.sterrenregen i{
  position:absolute;
  left:var(--links,-24%);
  top:var(--boven,12%);
  width:var(--lang,5.4rem);
  height:2px;
  border-radius:999px;
  opacity:0;
  rotate:var(--hoek,-24deg);
  background:linear-gradient(90deg,transparent,rgba(171,222,255,.35),#fffbd0);
  filter:drop-shadow(0 0 5px #9ddcff);
  animation:vallende-ster var(--duur,23s) linear infinite;
}
.sterrenregen i::after{content:"";position:absolute;right:-2px;top:-2px;width:6px;height:6px;border-radius:50%;background:#fff9bd;box-shadow:0 0 10px #fff,0 0 17px #79c7ff}

@keyframes zweef{0%,100%{translate:0 0;rotate:-.2deg}50%{translate:0 -.42rem;rotate:.25deg}}
@keyframes vallende-ster{0%,88%{opacity:0;translate:0 0}90%{opacity:1}96%{opacity:1}100%{opacity:0;translate:var(--dx,145vw) var(--dy,58vh)}}

@media (min-width:700px) and (min-height:850px){
  .startkop{padding-top:max(1.5rem,env(safe-area-inset-top))!important}
  #rooster{width:min(calc(100% - 2.5rem),61rem)!important}
  a.tegel{width:min(37vw,21rem)}
  a.tegel-schrijven{left:5%;top:0}
  a.tegel-kleuren-op-letter{right:5%;top:7%}
  a.tegel-lezen{left:5%;top:31%}
  a.tegel-rekenen{right:5%;top:38%}
  a.tegel-tekenen{top:63%}
}

@media (min-aspect-ratio:4/3) and (min-width:760px){
  .werelddecor{object-position:center 61%}
  #rooster{
    width:min(calc(100% - 4rem),80rem)!important;
    padding:clamp(.55rem,2vh,1.35rem) 0 0!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:start;
    gap:clamp(.75rem,1.4vw,1.25rem);
  }
  a.tegel{
    position:relative!important;
    width:100%!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
  }
  a.tegel-schrijven{transform:rotate(-1.4deg)}
  a.tegel-kleuren-op-letter{transform:rotate(1deg)}
  a.tegel-lezen{transform:rotate(-1.2deg)}
  a.tegel-rekenen{transform:rotate(1.4deg)}
  a.tegel-tekenen{transform:rotate(-1deg)}
}

@media (max-width:390px){
  .startkop{padding-left:4.35rem!important;padding-right:4.35rem!important}
  #onderbalk .knop{width:3.2rem;height:3.2rem}
  #rooster{width:calc(100% - .8rem)!important}
  a.tegel{width:44vw}
  .eilandtitel{font-size:clamp(.86rem,4.2vw,1.04rem)!important}
}

@media (max-height:700px){
  .startkop .missie,.startkop .sub{display:none}
  .startkop{padding-bottom:0!important}
  .startkop h1{font-size:2.5rem!important}
  .titelstreep{margin:.3rem auto .05rem;height:.34rem}
  a.tegel-schrijven{top:-2%}
  a.tegel-kleuren-op-letter{top:4%}
  a.tegel-lezen{top:28%}
  a.tegel-rekenen{top:34%}
  a.tegel-tekenen{top:58%}
}

@media (prefers-reduced-motion:reduce){
  .eilandkunst,.sterrenregen i{animation:none}
}


/* Gelaagde interactieve wereld: alleen echte transparante sprites bewegen.
   De maan, stenen en het landschap zitten uitsluitend in de vaste basis. */
#rooster{pointer-events:none}
#rooster a.tegel{pointer-events:auto}

.wereld-interacties{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.wereldlaag{
  position:absolute;
  display:block;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  will-change:transform;
}
.wereldlaag-vol{
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.wereldlaag.tak-links{transform-origin:0 0;animation:tak-adem-links 8.8s ease-in-out infinite}
.wereldlaag.tak-rechts{transform-origin:100% 0;animation:tak-adem-rechts 9.6s ease-in-out -3.1s infinite}
.wereldlaag.planten-links{
  left:-8%;
  bottom:-5%;
  z-index:2;
  width:min(57vw,31rem);
  transform-origin:7% 100%;
  animation:plant-adem-links 8.2s ease-in-out -2s infinite;
}
.wereldlaag.planten-rechts{
  right:-8%;
  bottom:-6%;
  z-index:2;
  width:min(55vw,30rem);
  transform-origin:93% 100%;
  animation:plant-adem-rechts 9.1s ease-in-out -4.4s infinite;
}
.wereldlaag.is-ritselend{animation:bladritsel .92s cubic-bezier(.2,.72,.25,1)!important}

.wereld-hotspot{
  position:absolute;
  z-index:4;
  margin:0;
  padding:0;
  border:0;
  border-radius:48%;
  background:transparent;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  pointer-events:auto;
  cursor:pointer;
}
.wereld-hotspot:focus-visible{
  outline:3px solid rgba(255,244,157,.92);
  outline-offset:-3px;
  background:rgba(128,205,255,.08);
}
.hotspot-tak-links{left:0;top:0;width:30%;height:15%}
.hotspot-tak-rechts{right:0;top:0;width:30%;height:18%}
.hotspot-planten-links{left:0;bottom:0;width:34%;height:22%}
.hotspot-planten-rechts{right:0;bottom:0;width:31%;height:22%}

.lantaarn{
  position:absolute;
  right:5%;
  bottom:6%;
  z-index:1;
  width:min(15vw,8.75rem);
  aspect-ratio:1123/1401;
  transform-origin:50% 100%;
  pointer-events:none;
  animation:lantaarn-zweem 6s ease-in-out infinite;
}
.lantaarn img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .48s ease}
.lantaarn-uit{opacity:0}
.lantaarn-gloed{
  position:absolute;
  left:50%;
  top:60%;
  width:210%;
  aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  opacity:.43;
  background:radial-gradient(circle,rgba(255,249,180,.72) 0 7%,rgba(255,190,60,.27) 24%,rgba(255,137,28,.1) 46%,transparent 70%);
  mix-blend-mode:screen;
  filter:blur(4px);
  transition:opacity .65s ease;
  animation:gloed-adem 4.6s ease-in-out infinite;
}
.startwereld.is-lantaarn-uit .lantaarn-aan,.startwereld.is-lantaarn-uit .lantaarn-gloed{opacity:0}
.startwereld.is-lantaarn-uit .lantaarn-uit{opacity:1}
.hotspot-lantaarn{right:3%;bottom:4%;width:18%;height:23%;z-index:5}

.waterkringen{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}

.hotspot-ster{left:73%;top:12%;width:3rem;height:3rem;transform:translate(-50%,-50%)}
.hotspot-ster::before{
  content:"✦";position:absolute;left:50%;top:50%;translate:-50% -50%;
  color:#fff5a9;font-size:.68rem;opacity:.24;
  text-shadow:0 0 .5rem #fff,0 0 1rem #77caff;
  animation:verborgenster 7s ease-in-out infinite;
}
.sterfonkeling{position:absolute;left:73%;top:12%;width:1px;height:1px;z-index:3;pointer-events:none}
.sterfonkeling i{
  position:absolute;width:.34rem;height:.34rem;border-radius:50%;
  background:#fff9bc;box-shadow:0 0 .6rem #fff,0 0 1rem #70c9ff;
  opacity:0;transform:translate(-50%,-50%) scale(.2);
}
.sterfonkeling.is-actief i{animation:sterstof 1.3s cubic-bezier(.18,.7,.2,1) var(--wacht) forwards}

@keyframes tak-adem-links{0%,100%{transform:rotate(0)}50%{transform:rotate(.28deg)}}
@keyframes tak-adem-rechts{0%,100%{transform:rotate(0)}50%{transform:rotate(-.3deg)}}
@keyframes plant-adem-links{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(.34deg) translateY(-.08rem)}}
@keyframes plant-adem-rechts{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(-.3deg) translateY(-.07rem)}}
@keyframes bladritsel{
  0%,100%{transform:rotate(0) translate(0,0)}
  18%{transform:rotate(1.25deg) translate(.1rem,-.07rem)}
  39%{transform:rotate(-.82deg) translate(-.07rem,.035rem)}
  59%{transform:rotate(.5deg) translate(.045rem,-.025rem)}
  78%{transform:rotate(-.22deg)}
}
@keyframes lantaarn-zweem{0%,100%{transform:rotate(0)}50%{transform:rotate(.22deg)}}
@keyframes gloed-adem{0%,100%{opacity:.36;transform:scale(.98)}50%{opacity:.48;transform:scale(1.035)}}
@keyframes verborgenster{0%,84%,100%{opacity:.16;transform:scale(.82)}90%{opacity:.72;transform:scale(1.38)}}
@keyframes sterstof{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.05)}
}

@media (min-width:700px) and (min-height:850px){
  .lantaarn{right:5.5%;bottom:7.5%;width:min(13vw,8.8rem)}
  .hotspot-lantaarn{right:3.5%;bottom:5%;width:17%;height:23%}
}

@media (min-aspect-ratio:4/3) and (min-width:760px){
  .wereldlaag-vol{object-position:center 61%}
  .wereldlaag.planten-links{left:-5%;bottom:-23%;width:min(35vw,30rem)}
  .wereldlaag.planten-rechts{right:-5%;bottom:-25%;width:min(34vw,29rem)}
  .lantaarn{right:4.5%;bottom:1.8%;width:min(8.6vw,7.4rem)}
  .hotspot-planten-links{width:31%;height:20%}
  .hotspot-planten-rechts{width:28%;height:20%}
  .hotspot-lantaarn{right:3%;bottom:1%;width:13%;height:21%}
}
@media (prefers-reduced-motion:reduce){
  .wereldlaag,.lantaarn,.lantaarn-gloed,.hotspot-ster::before{animation:none!important}
  .wereldlaag.is-ritselend{filter:brightness(1.06)}
  .sterfonkeling.is-actief i{animation-duration:.01s}
}