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

/* V35: Die sehr dunkle Ausgangsgrafik wird im normalen Spiel sichtbar
   aufgehellt. Nur die äußersten Ränder behalten die mystische Vignette. */
.game[data-echo-core="sleeping"]{
  --scene-light:1.42;
  --scene-saturation:.96;
  --scene-contrast:1;
  --structure-light:1.16;
}
.game[data-echo-core="awakening"]{
  --scene-light:1.8;
  --scene-saturation:1.1;
  --scene-contrast:.99;
  --structure-light:1.48;
}
.game[data-echo-core="awake"]{
  --scene-light:1.68;
  --scene-saturation:1.06;
  --scene-contrast:1;
  --structure-light:1.38;
}
.game[data-v32-phase] .world{
  filter:brightness(var(--scene-light)) saturate(var(--scene-saturation)) contrast(var(--scene-contrast))!important;
}
.shade{
  background:
    linear-gradient(90deg,rgba(2,5,12,.3) 0,transparent 21%,transparent 79%,rgba(2,5,12,.28) 100%),
    linear-gradient(180deg,rgba(2,5,12,.1),transparent 32%,transparent 80%,rgba(2,5,12,.24));
}
.game[data-v32-phase="seed"] .shade{
  background:
    radial-gradient(circle at var(--echo-nest-x) var(--echo-nest-y),transparent 0 26%,rgba(2,6,12,.08) 42%,rgba(2,5,11,.28) 70%,rgba(1,3,8,.52) 100%),
    linear-gradient(180deg,rgba(2,5,12,.08),transparent 44%,rgba(2,5,12,.2));
}
.game[data-v32-phase="awakening"] .world{
  animation:v35-world-awakens 1.35s ease-out both;
}
.game[data-echo-level="low"]{
  --scene-light:.88;
  --scene-saturation:.72;
  --scene-contrast:1.02;
  --structure-light:.8;
}

/* Die erste Quelle ist ein monumentaler Naturfels. Seine Echoadern verlieren
   nach Kiros Abbau sichtbar Licht; die alte CSS-Platzhalterform bleibt aus. */
.followup--nature{
  left:34%;
  top:61%;
  width:clamp(190px,19vw,270px);
  height:auto;
  aspect-ratio:768/702;
  overflow:visible;
}
.echo-source-shape{display:none!important}
.echo-source-image{
  display:block;
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  filter:brightness(.64) saturate(.72) contrast(1.08) drop-shadow(0 14px 16px rgba(0,0,0,.74)) drop-shadow(0 0 9px rgba(65,205,222,.18));
  transition:filter .7s ease,opacity .7s ease;
}
.followup--nature>b,
.followup--nature>small{
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
}
.followup--nature>b{top:calc(100% - 13px)}
.followup--nature>small{top:calc(100% + 3px)}
.game[data-v32-phase="awakening"] .echo-source-image{filter:brightness(.72) saturate(.78) contrast(1.08) drop-shadow(0 0 15px rgba(72,218,232,.28))}
.game[data-v32-phase="source"] .echo-source-image{filter:brightness(.7) saturate(.76) contrast(1.08) drop-shadow(0 14px 16px rgba(0,0,0,.7)) drop-shadow(0 0 13px rgba(72,219,232,.27))}
.game[data-v32-phase="harvest"] .echo-source-image{filter:brightness(.82) saturate(.86) contrast(1.08) drop-shadow(0 0 20px rgba(72,224,237,.4))}
.game[data-v32-phase="carry"] .echo-source-image,
.game[data-v32-phase="complete"] .echo-source-image{filter:brightness(.46) saturate(.32) contrast(1.08) drop-shadow(0 11px 15px rgba(0,0,0,.8))}

/* Kiro bleibt klar erkennbar, gehört farblich aber stärker in die kühle Welt. */
.game[data-v32-phase] .resident--kiro{
  filter:brightness(1.04) saturate(.78) contrast(1.04) drop-shadow(0 9px 13px rgba(0,0,0,.68)) drop-shadow(0 0 8px rgba(69,205,222,.2));
}

/* Erst Kiro wählen, dann die Quelle. So entsteht ein sichtbarer Auftrag,
   ohne bereits beim ersten Sammelweg ein großes Arbeitsmenü einzuführen. */
.game[data-v32-phase="source"][data-assignment-step="worker"] .resident--kiro{
  display:block!important;
  pointer-events:auto!important;
  cursor:pointer;
  opacity:1;
  animation:v35-kiro-guide 1.55s ease-in-out infinite;
}
.game[data-v32-phase="source"][data-assignment-step="worker"] .resident--kiro:after,
.game[data-v32-phase="source"][data-assignment-step="target"] .resident--kiro:after{
  position:absolute;
  left:50%;
  top:-16px;
  transform:translateX(-50%);
  padding:5px 8px;
  border:1px solid rgba(138,235,237,.58);
  border-radius:999px;
  background:rgba(3,16,22,.9);
  color:#dfffff;
  font:800 7px/1 system-ui,sans-serif;
  letter-spacing:.12em;
  white-space:nowrap;
  box-shadow:0 0 16px rgba(82,222,231,.3);
}
.game[data-v32-phase="source"][data-assignment-step="worker"] .resident--kiro:after{content:"KIRO WÄHLEN"}
.game[data-v32-phase="source"][data-assignment-step="worker"] .followup--nature{
  opacity:.58!important;
  filter:brightness(.9) saturate(.78)!important;
  animation:none!important;
  pointer-events:none!important;
}
.game[data-v32-phase="source"][data-assignment-step="target"] .resident--kiro{
  display:block!important;
  pointer-events:none!important;
  opacity:1;
  filter:brightness(1.22) saturate(.82) contrast(1.04) drop-shadow(0 0 17px rgba(83,229,237,.58))!important;
}
.game[data-v32-phase="source"][data-assignment-step="target"] .resident--kiro:after{content:"AUSGEWÄHLT"}
.game[data-v32-phase="source"][data-assignment-step="target"] .followup--nature{
  pointer-events:auto!important;
}

@keyframes v35-world-awakens{
  0%{filter:brightness(1.42) saturate(.96)}
  45%{filter:brightness(2.05) saturate(1.14)}
  100%{filter:brightness(1.8) saturate(1.1)}
}
@keyframes v35-kiro-guide{
  0%,100%{transform:translate(-50%,-50%) scale(.7);filter:brightness(1.12) saturate(.78) drop-shadow(0 0 9px rgba(83,226,235,.3))}
  50%{transform:translate(-50%,-52%) scale(.75);filter:brightness(1.28) saturate(.82) drop-shadow(0 0 22px rgba(83,226,235,.66))}
}
@keyframes v35-kiro-harvest{
  0%,100%{transform:translate(-50%,-50%) scale(.7) rotate(-2deg);filter:brightness(1.04) saturate(.78) drop-shadow(0 9px 13px rgba(0,0,0,.68))}
  50%{transform:translate(-50%,-54%) scale(.72) rotate(3deg);filter:brightness(1.2) saturate(.82) drop-shadow(0 0 13px rgba(96,229,235,.44))}
}
.game[data-v32-phase="harvest"] .resident--kiro{animation:v35-kiro-harvest .78s ease-in-out infinite}

/* Auf sehr breiten iPhones zeigt contain die komplette 16:9-Landschaft.
   Dadurch wirkt die Base rund 18 Prozent kleiner, ohne die Hitflächen oder
   die freie Speicherplatzierung zu skalieren. */
@media (orientation:landscape) and (max-height:430px) and (min-aspect-ratio:21/10){
  .game[data-v32-phase] .world{object-fit:contain}
  .game[data-v32-phase] .world-ui{--echo-nest-y:35%}
  .resident--kiro{width:88px;height:124px;background-size:auto 106px}
  .resident--kiro b{top:105px}
  .resident--kiro small{top:117px}
  .followup--nature{top:66%;width:clamp(160px,21vw,190px)}
}

@media (prefers-reduced-motion:reduce){
  .game[data-v32-phase="awakening"] .world,
  .game[data-v32-phase="source"][data-assignment-step="worker"] .resident--kiro{animation:none!important}
}