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

/* V32: Das Lebensecho wird zum höher sitzenden Echo-Kern. Sein Puls erweckt
   eine natürliche Echoquelle; Kiro trägt das Echo direkt zum Speicher. */
.world-ui{
  --echo-nest-x:50%;
  --echo-nest-y:33%;
}

/* Bereits der Schlafzustand bleibt lesbar. Nach dem ersten Herzschlag wird
   die Heimat dauerhaft deutlich heller, während die Ränder mystisch bleiben. */
.game[data-echo-core="sleeping"]{
  --scene-light:1.1;
  --scene-saturation:.92;
  --scene-contrast:1.02;
  --structure-light:1.08;
  --echo-aura:.1;
}
.game[data-echo-core="awakening"]{
  --scene-light:1.4;
  --scene-saturation:1.12;
  --scene-contrast:1.01;
  --structure-light:1.34;
  --echo-aura:.34;
}
.game[data-echo-core="awake"]{
  --scene-light:1.31;
  --scene-saturation:1.07;
  --scene-contrast:1.01;
  --structure-light:1.27;
  --echo-aura:.25;
}
.shade{
  background:
    linear-gradient(90deg,rgba(2,5,12,.42) 0,transparent 24%,transparent 76%,rgba(2,5,12,.38) 100%),
    linear-gradient(180deg,rgba(2,5,12,.2),transparent 30%,transparent 76%,rgba(2,5,12,.38));
}
.game[data-echo-core="awake"] .world-ui:before,
.game[data-echo-core="awakening"] .world-ui:before{
  opacity:1;
  background:
    radial-gradient(circle at var(--echo-nest-x) var(--echo-nest-y),rgba(101,235,244,.28),rgba(55,179,193,.12) 17%,transparent 38%),
    radial-gradient(circle at 36% 58%,rgba(85,232,217,.24),transparent 24%),
    radial-gradient(circle at 73% 60%,rgba(85,213,224,.18),transparent 23%);
}

/* Große Resonanzwelle: nicht nur der kleine Kern, sondern die Welt antwortet. */
.world-ui:after{
  content:"";
  position:absolute;
  z-index:1;
  left:var(--echo-nest-x);
  top:var(--echo-nest-y);
  width:80px;
  height:80px;
  transform:translate(-50%,-50%) scale(.2);
  border:2px solid rgba(118,239,246,.7);
  border-radius:50%;
  box-shadow:0 0 28px rgba(78,222,237,.55),inset 0 0 24px rgba(78,222,237,.3);
  opacity:0;
  pointer-events:none;
}
.game[data-v32-phase="awakening"] .world-ui:after{animation:v32-world-pulse 1.35s ease-out both}
.game[data-v32-phase="awakening"] .world{animation:v32-world-awakens 1.35s ease-out both}

/* Der Nestkeim und der automatische Sammler gehören nicht in das erste
   Rohstoff-Tutorial. Ihre DOM-Anker bleiben nur für spätere Versionen erhalten. */
.hotspot--plot[hidden],
.building--nest[hidden],
.building--collector[hidden]{display:none!important}
.game[data-v32-phase] .resident--nemi{display:none!important}
.game[data-v32-phase] .decision-gate,
.game[data-v32-phase] .settlement-gate,
.game[data-v32-phase] .work-plan{display:none!important}

/* Der Spieler setzt zunächst nur den leeren Echospeicher. */
.building--storage{
  appearance:none;
  border:0;
  background:transparent;
  font:inherit;
}
.game[data-v32-phase="seed"] .building--storage,
.game[data-v32-phase="awakening"] .building--storage{opacity:.14;filter:saturate(.45) brightness(.68);pointer-events:none}
.game[data-v32-phase="storage"] .building--storage{
  display:block;
  opacity:.88;
  filter:brightness(1.22) saturate(1.08) drop-shadow(0 0 17px rgba(81,219,232,.45));
  pointer-events:auto!important;
  cursor:pointer;
  animation:v32-storage-guide 1.9s ease-in-out infinite;
}
.game[data-v32-phase="source"] .building--storage,
.game[data-v32-phase="harvest"] .building--storage,
.game[data-v32-phase="carry"] .building--storage,
.game[data-v32-phase="complete"] .building--storage{
  display:block;
  opacity:1;
  filter:brightness(1.25) saturate(1.08);
}

/* Natürliche Echoquelle: ein alter Stein mit lebendigem Echo im Inneren. */
.followup--nature{
  left:36%;
  top:58%;
  width:102px;
  height:108px;
  border:0;
  background:transparent;
  filter:drop-shadow(0 8px 15px rgba(0,0,0,.7));
}
.echo-source-shape{
  position:absolute;
  left:50%;
  top:4px;
  width:58px;
  height:54px;
  transform:translateX(-50%);
  border:1px solid rgba(112,226,231,.6);
  border-radius:48% 52% 43% 57%/56% 47% 53% 44%;
  background:
    radial-gradient(circle at 52% 46%,rgba(113,243,242,.92) 0 9%,rgba(61,192,201,.62) 10% 22%,transparent 24%),
    linear-gradient(145deg,#183f45,#071b23 66%,#102f37);
  box-shadow:inset 0 0 18px rgba(65,210,220,.24),0 0 19px rgba(69,217,226,.28);
}
.echo-source-shape:before,
.echo-source-shape:after{
  content:"";
  position:absolute;
  bottom:-7px;
  width:23px;
  height:12px;
  border:1px solid rgba(99,202,207,.45);
  border-radius:50%;
  background:#0b2830;
}
.echo-source-shape:before{left:-5px;transform:rotate(13deg)}
.echo-source-shape:after{right:-6px;transform:rotate(-15deg)}
.echo-source-shape i,
.echo-source-shape em{
  position:absolute;
  border-radius:50%;
  background:#82edf1;
  box-shadow:0 0 12px 4px rgba(80,222,232,.46);
}
.echo-source-shape i{left:24px;top:21px;width:10px;height:10px}
.echo-source-shape em{left:11px;top:14px;width:5px;height:5px;opacity:.65}
.followup--nature>b,
.followup--nature>small{z-index:2}

.game[data-v32-phase="awakening"] .followup--nature,
.game[data-v32-phase="storage"] .followup--nature,
.game[data-v32-phase="source"] .followup--nature,
.game[data-v32-phase="harvest"] .followup--nature,
.game[data-v32-phase="carry"] .followup--nature,
.game[data-v32-phase="complete"] .followup--nature{display:block!important}
.game[data-v32-phase="awakening"] .followup--nature{
  pointer-events:none;
  animation:v32-source-awakens 1.25s .25s ease-out both;
}
.game[data-v32-phase="storage"] .followup--nature{opacity:.72;pointer-events:none}
.game[data-v32-phase="storage"] .followup--nature>b,
.game[data-v32-phase="storage"] .followup--nature>small,
.game[data-v32-phase="awakening"] .followup--nature>b,
.game[data-v32-phase="awakening"] .followup--nature>small{opacity:.38}
.game[data-v32-phase="source"] .followup--nature{
  opacity:1;
  pointer-events:auto!important;
  cursor:pointer;
  filter:brightness(1.32) drop-shadow(0 0 18px rgba(83,232,235,.55));
  animation:v32-source-guide 1.8s ease-in-out infinite;
}
.game[data-v32-phase="harvest"] .followup--nature{opacity:1;filter:brightness(1.25) saturate(1.12)}
.game[data-v32-phase="carry"] .followup--nature,
.game[data-v32-phase="complete"] .followup--nature{
  opacity:.46;
  filter:brightness(.72) saturate(.62);
  pointer-events:none;
}
.game[data-v32-phase="complete"] .echo-source-shape i{animation:v32-source-recovers 2.8s ease-in-out infinite}

/* Kiro ist der erste manuelle Sammler: abtragen, tragen, abliefern. */
.game[data-v32-phase="seed"] .resident--kiro,
.game[data-v32-phase="awakening"] .resident--kiro,
.game[data-v32-phase="storage"] .resident--kiro,
.game[data-v32-phase="source"] .resident--kiro,
.game[data-v32-phase="harvest"] .resident--kiro,
.game[data-v32-phase="carry"] .resident--kiro,
.game[data-v32-phase="complete"] .resident--kiro{display:block!important;z-index:8}
.game[data-v32-phase="seed"] .resident--kiro,
.game[data-v32-phase="awakening"] .resident--kiro,
.game[data-v32-phase="storage"] .resident--kiro{left:43%;top:60%;transform:translate(-50%,-50%) scale(.68)}
.game[data-v32-phase="source"] .resident--kiro{left:47%;top:62%;transform:translate(-50%,-50%) scale(.7)}
.game[data-v32-phase="harvest"] .resident--kiro{
  left:39%;top:60%;transform:translate(-50%,-50%) scale(.7);
  animation:v32-kiro-harvest .78s ease-in-out infinite;
}
.game[data-v32-phase="carry"] .resident--kiro{animation:v32-kiro-carry 2.35s ease-in-out both}
.game[data-v32-phase="carry"] .resident--kiro:after{
  content:"";
  position:absolute;
  left:50%;top:72px;
  width:13px;height:13px;
  border-radius:50%;
  background:#8ff2f5;
  box-shadow:0 0 15px 5px rgba(78,222,232,.62);
}
.game[data-v32-phase="complete"] .resident--kiro{left:68%;top:65%;transform:translate(-50%,-50%) scale(.7)}

.game[data-v32-phase="harvest"] .repair-link,
.game[data-v32-phase="carry"] .repair-link,
.game[data-v32-phase="complete"] .repair-link{display:block}
.game[data-v32-phase="carry"] .repair-link:after{
  content:"";
  position:absolute;
  left:0;top:4px;
  width:12px;height:10px;
  border-radius:50%;
  background:#9af3ee;
  box-shadow:0 0 16px rgba(113,239,235,.88);
  animation:v32-echo-route 2.2s ease-in-out both;
}
.game[data-v32-phase="harvest"] .vela,
.game[data-v32-phase="carry"] .vela{display:flex!important;width:min(470px,56vw)}

@keyframes v32-world-pulse{
  0%{transform:translate(-50%,-50%) scale(.15);opacity:.9}
  70%{opacity:.5}
  100%{transform:translate(-50%,-50%) scale(9.5);opacity:0}
}
@keyframes v32-world-awakens{
  0%{filter:brightness(1.08) saturate(.9)}
  45%{filter:brightness(1.68) saturate(1.22)}
  100%{filter:brightness(var(--scene-light)) saturate(var(--scene-saturation))}
}
@keyframes v32-source-awakens{
  0%{transform:translate(-50%,-50%) scale(.72);opacity:0;filter:brightness(.5)}
  65%{transform:translate(-50%,-50%) scale(1.1);opacity:1;filter:brightness(1.55)}
  100%{transform:translate(-50%,-50%) scale(1);opacity:.78;filter:brightness(1.12)}
}
@keyframes v32-storage-guide{50%{transform:translate(-50%,-50%) scale(1.04);filter:brightness(1.42) saturate(1.12)}}
@keyframes v32-source-guide{50%{transform:translate(-50%,-50%) scale(1.05);filter:brightness(1.5) drop-shadow(0 0 22px rgba(83,232,235,.66))}}
@keyframes v32-source-recovers{50%{transform:scale(1.32);opacity:1;filter:brightness(1.5)}}
@keyframes v32-kiro-harvest{
  0%,100%{transform:translate(-50%,-50%) scale(.7) rotate(-2deg)}
  50%{transform:translate(-50%,-54%) scale(.72) rotate(3deg);filter:brightness(1.25) drop-shadow(0 0 13px rgba(96,229,235,.48))}
}
@keyframes v32-kiro-carry{
  0%{left:39%;top:60%;transform:translate(-50%,-50%) scale(.7)}
  45%{left:52%;top:66%;transform:translate(-50%,-54%) scale(.71)}
  100%{left:68%;top:65%;transform:translate(-50%,-50%) scale(.7)}
}
@keyframes v32-echo-route{from{transform:translateX(0);opacity:.3}38%{opacity:1}to{transform:translateX(30vw);opacity:.08}}

@media (max-height:430px){
  .world-ui{--echo-nest-y:32%}
  .followup--nature{width:92px;height:96px}
  .echo-source-shape{width:51px;height:48px}
  .game[data-v32-phase="carry"] .resident--kiro:after{top:63px}
}

@media (prefers-reduced-motion:reduce){
  .game[data-v32-phase="awakening"] .world-ui:after,
  .game[data-v32-phase="awakening"] .world,
  .game[data-v32-phase="awakening"] .followup--nature,
  .game[data-v32-phase="storage"] .building--storage,
  .game[data-v32-phase="source"] .followup--nature,
  .game[data-v32-phase="harvest"] .resident--kiro,
  .game[data-v32-phase="carry"] .resident--kiro,
  .game[data-v32-phase="carry"] .repair-link:after,
  .game[data-v32-phase="complete"] .echo-source-shape i{animation:none!important}
}