@import url("/assets/v32.css?v=1");

/* V33: Der Einstieg gehört ausschließlich dem Echo-Nest. Erst sein Erwachen
   öffnet die Umgebung und danach bestimmt der Spieler den Speicherplatz. */
.game[data-v32-phase="seed"] .shade{
  background:
    radial-gradient(circle at var(--echo-nest-x) var(--echo-nest-y),transparent 0 18%,rgba(2,6,12,.18) 31%,rgba(2,5,11,.54) 62%,rgba(1,3,8,.68) 100%),
    linear-gradient(180deg,rgba(2,5,12,.13),transparent 40%,rgba(2,5,12,.28));
}
.game[data-v32-phase]:not([data-v32-phase="complete"]) .portal,
.game[data-v32-phase]:not([data-v32-phase="complete"]) .building--resonance,
.game[data-v32-phase] .building--collector,
.game[data-v32-phase] .resident--nemi,
.game[data-v32-phase] .resident--daro{display:none!important}
.game[data-v32-phase="seed"] .building--storage,
.game[data-v32-phase="awakening"] .building--storage,
.game[data-v32-phase="storage"] .building--storage:not([data-v33-placed="true"]){display:none!important}
.game[data-v32-phase="seed"] .resident--kiro,
.game[data-v32-phase="awakening"] .resident--kiro{display:none!important}
.game[data-v32-phase="seed"] .world-message{display:none!important}

/* Acht Lichtadern breiten sich beim ersten Herzschlag aus dem Nest aus. */
.nest-radiance{
  position:absolute;
  z-index:3;
  left:var(--echo-nest-x);
  top:var(--echo-nest-y);
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 0 9px rgba(100,235,242,.72));
}
.nest-radiance i{
  position:absolute;
  left:-1px;
  top:0;
  width:3px;
  height:min(46vw,430px);
  transform-origin:50% 0;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(144,247,249,.86),rgba(67,205,219,.38) 34%,rgba(48,164,182,.08) 72%,transparent);
  box-shadow:0 0 8px rgba(92,230,237,.48);
}
.nest-radiance i:nth-child(1){transform:rotate(0deg)}
.nest-radiance i:nth-child(2){transform:rotate(45deg)}
.nest-radiance i:nth-child(3){transform:rotate(90deg)}
.nest-radiance i:nth-child(4){transform:rotate(135deg)}
.nest-radiance i:nth-child(5){transform:rotate(180deg)}
.nest-radiance i:nth-child(6){transform:rotate(225deg)}
.nest-radiance i:nth-child(7){transform:rotate(270deg)}
.nest-radiance i:nth-child(8){transform:rotate(315deg)}
.game[data-v32-phase="awakening"] .nest-radiance{animation:v33-radiance 1.55s ease-out both}

/* Freie Platzierung: Das Gebäude existiert erst nach dem Tipp auf die Welt. */
.game[data-v32-phase="storage"] .world-ui{
  cursor:crosshair;
  touch-action:manipulation;
}
.building--storage[data-v33-placed="true"]{
  left:var(--storage-x,68%);
  top:var(--storage-y,65%);
}
.game[data-v32-phase="source"] .building--storage[data-v33-placed="true"],
.game[data-v32-phase="harvest"] .building--storage[data-v33-placed="true"],
.game[data-v32-phase="carry"] .building--storage[data-v33-placed="true"],
.game[data-v32-phase="complete"] .building--storage[data-v33-placed="true"]{
  display:block!important;
  opacity:1;
  pointer-events:none;
}

/* Kiros Lauf endet am wirklich gewählten Speicherplatz. */
.game[data-v32-phase="carry"] .resident--kiro{animation:v33-kiro-carry 2.35s ease-in-out both}
.game[data-v32-phase="complete"] .resident--kiro{
  left:calc(var(--storage-x,68%) - 4%);
  top:calc(var(--storage-y,65%) - 8%);
}
.game[data-v32-phase="harvest"] .repair-link,
.game[data-v32-phase="carry"] .repair-link,
.game[data-v32-phase="complete"] .repair-link{display:none!important}

@keyframes v33-radiance{
  0%{opacity:0;transform:scale(.05) rotate(-5deg)}
  18%{opacity:1}
  68%{opacity:.72}
  100%{opacity:0;transform:scale(1.08) rotate(3deg)}
}
@keyframes v33-kiro-carry{
  0%{left:39%;top:60%;transform:translate(-50%,-50%) scale(.7)}
  46%{left:52%;top:64%;transform:translate(-50%,-54%) scale(.71)}
  100%{left:calc(var(--storage-x,68%) - 4%);top:calc(var(--storage-y,65%) - 8%);transform:translate(-50%,-50%) scale(.7)}
}

@media (max-height:430px){
  .nest-radiance i{height:min(52vw,330px)}
}

@media (prefers-reduced-motion:reduce){
  .game[data-v32-phase="awakening"] .nest-radiance,
  .game[data-v32-phase="carry"] .resident--kiro{animation:none!important}
}