@import url("/assets/v27.css?v=2");

/* V30: Echoquelle -> Echosammler -> Echospeicher wird als echter Abbauweg sichtbar. */
.world-ui{
  --echo-nest-x:50%;
  --echo-nest-y:42%;
}

/* Mystisch, aber lesbar: Die Welt bleibt an den Rändern dunkel und erhält
   klare Lichtinseln um die Orte, die gerade zum Echo-Kreislauf gehören. */
.game{
  --scene-light:1.1;
  --scene-saturation:.98;
  --scene-contrast:1.04;
  --structure-light:1.12;
  --echo-aura:.18;
}
.game[data-echo-core="sleeping"]{
  --scene-light:.96;
  --scene-saturation:.86;
  --structure-light:.92;
  --echo-aura:.07;
}
.game:not([data-stage="locked"]):not([data-stage="training"]) .world{
  filter:brightness(var(--scene-light)) saturate(var(--scene-saturation)) contrast(var(--scene-contrast))!important;
}
.shade{
  background:
    linear-gradient(90deg,rgba(2,5,12,.48) 0,transparent 27%,transparent 72%,rgba(2,5,12,.42) 100%),
    linear-gradient(180deg,rgba(2,5,12,.34),transparent 28%,transparent 72%,rgba(2,5,12,.5));
}
.world-ui:before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at var(--echo-nest-x) var(--echo-nest-y),rgba(79,207,220,.17),rgba(55,160,174,.075) 16%,transparent 34%),
    radial-gradient(circle at 37% 58%,rgba(80,213,204,.13),transparent 22%),
    radial-gradient(circle at 73% 60%,rgba(76,185,200,.1),transparent 20%);
  mix-blend-mode:screen;
  opacity:.9;
  transition:opacity .7s ease,filter .7s ease;
}
.nest-shape,
.storage-shape,
.collector-shape,
.resonance-shape{
  filter:brightness(var(--structure-light)) saturate(1.06);
  transition:filter .7s ease;
}
.game:not([data-stage="locked"]):not([data-stage="training"]) .resident--kiro{
  filter:brightness(1.13) saturate(1.05) drop-shadow(0 8px 12px rgba(0,0,0,.55)) drop-shadow(0 0 9px rgba(71,205,224,.16));
}
.resident--nemi .resident__head{filter:brightness(1.2) saturate(1.08)}
.resident--nemi .resident__body{filter:hue-rotate(18deg) brightness(1.18) saturate(1.04)}
.game[data-echo-core="awake"] .echo-nest-core{
  background:radial-gradient(circle,rgba(103,235,244,.2),rgba(73,209,225,.07) 42%,transparent 72%);
  box-shadow:0 0 62px 22px rgba(68,211,228,var(--echo-aura));
}
.building--nest>b,
.building--nest>small,
.building--storage>b,
.building--storage>small,
.followup--nature>b,
.followup--nature>small{
  text-shadow:0 2px 7px #000,0 0 8px rgba(77,205,216,.24);
}

/* Für den späteren Echo-Mangel ist die Helligkeitslogik bereits eindeutig:
   Dann verlieren Welt und Lichtinseln gezielt Kraft, nicht schon im Normalzustand. */
.game[data-echo-level="low"]{
  --scene-light:.76;
  --scene-saturation:.7;
  --structure-light:.72;
  --echo-aura:.05;
}
.game[data-echo-level="low"] .world-ui:before{opacity:.32;filter:saturate(.58)}
.echo-nest-core{
  position:absolute;
  z-index:1;
  left:var(--echo-nest-x);
  top:var(--echo-nest-y);
  width:112px;
  height:112px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  opacity:.22;
  pointer-events:none;
  transition:opacity .7s ease,filter .7s ease;
  mix-blend-mode:screen;
}
.echo-nest-core:before,
.echo-nest-core:after,
.echo-nest-core i{
  content:"";
  position:absolute;
  border-radius:50%;
}
.echo-nest-core:before{
  inset:9px;
  border:1px solid rgba(100,226,240,.24);
  box-shadow:inset 0 0 22px rgba(68,205,224,.1),0 0 14px rgba(68,205,224,.08);
}
.echo-nest-core:after{
  inset:26px;
  border:1px solid rgba(119,237,244,.28);
}
.echo-nest-core i{
  inset:43px;
  background:rgba(67,197,216,.22);
  box-shadow:0 0 16px rgba(75,218,237,.22);
}
.echo-nest-core span{
  position:absolute;
  left:50%;
  top:102px;
  transform:translateX(-50%);
  color:#7bdbe6;
  font-size:6px;
  font-weight:750;
  letter-spacing:.15em;
  white-space:nowrap;
  opacity:.58;
  text-shadow:0 2px 8px #000;
}

.echo-seed{
  z-index:3;
  left:var(--echo-nest-x);
  top:var(--echo-nest-y);
  width:104px;
  height:104px;
}
.echo-seed__core{inset:40px}
.echo-seed__ring{inset:25px}

.game[data-stage="locked"] .echo-nest-core,
.game[data-stage="training"] .echo-nest-core{opacity:0}
.game[data-echo-core="sleeping"] .echo-nest-core{opacity:.25;filter:saturate(.62) brightness(.72)}
.game[data-echo-core="awakening"] .echo-nest-core{
  opacity:1;
  filter:brightness(1.45);
  animation:v29-echo-core-awakens 1.1s ease-out both;
}
.game[data-echo-core="awakening"] .echo-nest-core:before{animation:v29-echo-ring .9s ease-out both}
.game[data-echo-core="awakening"] .echo-nest-core:after{animation:v29-echo-ring .82s .12s ease-out both}
.game[data-echo-core="awake"] .echo-nest-core{
  opacity:.62;
  filter:brightness(1.08);
}
.game[data-echo-core="awake"] .echo-nest-core i{
  background:#63dce9;
  box-shadow:0 0 20px 5px rgba(73,218,235,.38);
}

/* Quellkeim ist die notwendige erste Versorgung; die späteren Wege warten. */
.path-options [data-path="supply"],
.path-options [data-path="protection"]{display:none!important}
.path-options{grid-template-columns:1fr}

/* Der erste Echosammler erscheint als Hologramm und wird von Kiro angeschlossen. */
.building--collector{
  display:none;
  position:absolute;
  z-index:6;
  left:40%;
  top:59%;
  width:88px;
  height:94px;
  transform:translate(-50%,-50%);
  border:0;
  background:transparent;
  color:#edffff;
  text-align:center;
  pointer-events:none;
  filter:drop-shadow(0 9px 15px rgba(0,0,0,.7));
}
.collector-shape{
  position:absolute;
  left:50%;
  top:4px;
  width:56px;
  height:54px;
  transform:translateX(-50%);
  border:1px solid rgba(116,231,240,.62);
  border-radius:19px 19px 12px 12px;
  background:linear-gradient(145deg,rgba(20,80,86,.96),rgba(5,25,32,.98));
  box-shadow:inset 0 0 18px rgba(75,215,229,.16),0 0 18px rgba(65,211,226,.2);
}
.collector-shape:before,
.collector-shape:after{
  content:"";
  position:absolute;
  border-radius:50%;
}
.collector-shape:before{
  left:12px;
  top:10px;
  width:30px;
  height:30px;
  border:2px solid rgba(125,238,245,.78);
  box-shadow:inset 0 0 12px rgba(72,217,232,.38),0 0 12px rgba(72,217,232,.32);
}
.collector-shape:after{
  left:23px;
  top:21px;
  width:10px;
  height:10px;
  background:#87f2f7;
  box-shadow:0 0 12px 4px rgba(85,224,236,.48);
}
.collector-shape i,
.collector-shape em{
  position:absolute;
  bottom:-8px;
  width:9px;
  height:14px;
  border:1px solid rgba(113,221,229,.5);
  border-radius:3px;
  background:#0c3037;
}
.collector-shape i{left:8px}
.collector-shape em{right:8px}
.building--collector>b,
.building--collector>small{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  text-shadow:0 2px 8px #000;
}
.building--collector>b{top:68px;font-size:10px}
.building--collector>small{top:82px;color:#83dbe2;font-size:6px;letter-spacing:.1em}

.game[data-stage="path-complete"] .building--collector,
.game[data-stage="work-brief"] .building--collector,
.game[data-stage="work-active"] .building--collector,
.game[data-stage="cycle-complete"] .building--collector,
.game[data-stage="resonance-brief"] .building--collector,
.game[data-stage="daro-training"] .building--collector,
.game[data-stage="daro-ready"] .building--collector{display:block}
.game[data-stage="path-complete"] .building--collector{opacity:.52;filter:saturate(.62) drop-shadow(0 0 14px rgba(89,221,231,.28))}
.game[data-stage="work-brief"] .building--collector{opacity:.72;filter:saturate(.82) drop-shadow(0 0 16px rgba(89,221,231,.36))}
.game[data-stage="work-active"][data-work-phase="repair"] .building--collector{opacity:.88;animation:v30-collector-build 1.05s ease-in-out infinite}
.game[data-stage="work-active"][data-work-phase="collect"] .building--collector,
.game[data-stage="cycle-complete"] .building--collector{opacity:1}
.game[data-stage="work-active"][data-work-phase="collect"] .collector-shape:before{animation:v30-collector-spin 1.1s linear infinite}
.game[data-stage="work-active"][data-work-phase="collect"] .collector-shape:after{animation:v30-collector-pulse .8s ease-in-out infinite}

/* Die alte Arbeitslinie wird zum sichtbaren Transportweg vom Sammler bis zum Speicher. */
.repair-link{left:39%;top:60%;width:34vw;transform:rotate(-1deg)}
.game[data-stage="work-active"][data-work-phase="collect"] .repair-link:after{
  animation:v30-echo-transfer 1.7s ease-in-out infinite;
}

/* Die Quelle bleibt während des Arbeitszyklus sichtbar und verliert beim Abbau ihr blaues Leuchten. */
.game[data-stage="work-brief"] .followup--nature,
.game[data-stage="work-active"] .followup--nature,
.game[data-stage="cycle-complete"] .followup--nature{display:block!important;pointer-events:none}
.game[data-stage="path-complete"] .followup--nature,
.game[data-stage="work-brief"] .followup--nature,
.game[data-stage="work-active"][data-work-phase="repair"] .followup--nature{
  filter:drop-shadow(0 0 13px rgba(85,226,241,.52)) hue-rotate(42deg) saturate(1.2);
}
.game[data-stage="work-active"][data-work-phase="collect"] .followup--nature{
  opacity:.5;
  filter:drop-shadow(0 0 5px rgba(85,226,241,.24)) hue-rotate(42deg) saturate(.66) brightness(.78);
}
.game[data-stage="cycle-complete"] .followup--nature{
  opacity:.46;
  filter:hue-rotate(42deg) saturate(.58) brightness(.7);
}
.game[data-stage="cycle-complete"] .followup--nature i{animation:v30-source-recover 2.8s ease-in-out infinite}

.game[data-stage="work-active"][data-work-phase="collect"] .resident--nemi,
.game[data-stage="cycle-complete"] .resident--nemi{z-index:8;left:43.5%;top:61%}
.game[data-stage="work-active"][data-work-phase="collect"] .resident--kiro,
.game[data-stage="cycle-complete"] .resident--kiro{left:52%;top:66%;opacity:.68}

@keyframes v30-collector-build{
  0%,100%{transform:translate(-50%,-50%) scale(.96);filter:brightness(.82)}
  50%{transform:translate(-50%,-50%) scale(1.02);filter:brightness(1.18)}
}
@keyframes v30-collector-spin{to{transform:rotate(360deg)}}
@keyframes v30-collector-pulse{50%{transform:scale(1.35);opacity:.62}}
@keyframes v30-echo-transfer{
  from{transform:translateX(0);opacity:.2}
  38%{opacity:1}
  to{transform:translateX(33vw);opacity:.08}
}
@keyframes v30-source-recover{50%{filter:brightness(1.45);opacity:.94}}

@keyframes v29-echo-core-awakens{
  0%{transform:translate(-50%,-50%) scale(.78);opacity:.2}
  58%{transform:translate(-50%,-50%) scale(1.1);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:.82}
}
@keyframes v29-echo-ring{
  0%{transform:scale(.62);opacity:.2}
  70%{opacity:1}
  100%{transform:scale(1.22);opacity:.44}
}

@media (max-height:430px){
  .echo-nest-core{width:100px;height:100px}
  .echo-nest-core:before{inset:8px}
  .echo-nest-core:after{inset:23px}
  .echo-nest-core i{inset:38px}
  .echo-nest-core span{top:91px}
  .echo-seed{width:96px;height:96px}
  .echo-seed__core{inset:36px}
  .echo-seed__ring{inset:22px}
  .building--collector{width:78px;height:84px}
  .collector-shape{width:50px;height:48px}
  .collector-shape:before{left:11px;top:9px;width:26px;height:26px}
  .collector-shape:after{left:21px;top:19px;width:8px;height:8px}
  .building--collector>b{top:61px}
  .building--collector>small{top:74px}
  .building>small,
  .followup>small,
  .portal>small,
  .resident>small{font-size:7px;opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .game[data-echo-core="awakening"] .echo-nest-core,
  .game[data-echo-core="awakening"] .echo-nest-core:before,
  .game[data-echo-core="awakening"] .echo-nest-core:after,
  .game[data-stage="work-active"] .building--collector,
  .game[data-stage="work-active"] .collector-shape:before,
  .game[data-stage="work-active"] .collector-shape:after,
  .game[data-stage="work-active"] .repair-link:after,
  .game[data-stage="cycle-complete"] .followup--nature i{animation:none!important}
}