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

/* V36: breite iPhone-Welt statt 16:9-contain mit schwarzen Seitenflächen. */
.game{
  --camera-scale:1;
  --camera-x:0px;
  --camera-y:0px;
  --kiro-dest-x:59%;
  --kiro-dest-y:61%;
}
.world-backdrop{
  position:absolute;
  z-index:0;
  inset:0;
  overflow:visible;
  transform:translate3d(var(--camera-x),var(--camera-y),0) scale(var(--camera-scale));
  transform-origin:50% 50%;
  transition:transform .18s ease-out;
  will-change:transform;
}
.world-backdrop picture,
.world-backdrop .world{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}
.game[data-v32-phase] .world{object-fit:cover!important;object-position:center!important}
.world-ui{
  transform:translate3d(var(--camera-x),var(--camera-y),0) scale(var(--camera-scale));
  transform-origin:50% 50%;
  transition:transform .18s ease-out;
  touch-action:none!important;
  will-change:transform;
}
.game[data-camera-active="true"] .world-backdrop,
.game[data-camera-active="true"] .world-ui{transition:none}

/* Das weite Motiv ist dunkler als die frühere Nahaufnahme und wird deshalb
   im normalen Spiel gezielt angehoben, ohne die schwarzen Ränder zurückzuholen. */
.game[data-echo-core="sleeping"]{--scene-light:1.54;--structure-light:1.2}
.game[data-echo-core="awakening"]{--scene-light:2.16;--structure-light:1.55}
.game[data-echo-core="awake"]{--scene-light:1.86;--structure-light:1.43}

/* Die Quelle ist ein Teil der Landschaft am linken Weltrand, kein Vordergrund-Overlay. */
.followup--nature{
  left:18%;
  top:68%;
  width:clamp(110px,12vw,170px);
  filter:none!important;
}
.followup--nature:after{
  content:"";
  position:absolute;
  z-index:0;
  left:4%;
  right:4%;
  bottom:4%;
  height:24%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(27,77,82,.34),rgba(2,8,12,.68) 58%,transparent 73%);
  filter:blur(5px);
  pointer-events:none;
}
.echo-source-image{
  z-index:1;
  filter:brightness(.6) saturate(.58) contrast(1.05) drop-shadow(0 11px 12px rgba(0,0,0,.72)) drop-shadow(0 0 7px rgba(65,205,222,.16));
  transition:filter .75s ease,opacity .75s ease;
}
.game[data-v32-phase="storage"] .echo-source-image{filter:brightness(.66) saturate(.64) contrast(1.05) drop-shadow(0 9px 12px rgba(0,0,0,.72)) drop-shadow(0 0 10px rgba(72,219,232,.2))}
.game[data-v32-phase="source"] .echo-source-image{filter:brightness(.72) saturate(.72) contrast(1.06) drop-shadow(0 10px 13px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(72,219,232,.3))}
.game[data-v32-phase="harvest"] .echo-source-image{animation:v36-source-response .86s ease-in-out infinite}
.game[data-v32-phase="carry"] .echo-source-image,
.game[data-v32-phase="complete"] .echo-source-image{opacity:.88;filter:brightness(.58) saturate(.42) contrast(1.08) drop-shadow(0 10px 14px rgba(0,0,0,.78)) drop-shadow(0 0 5px rgba(70,196,210,.14))}

/* Nur der gerade wirksame Echo-Strang pulsiert. */
.energy-link--nature,.repair-link{display:none!important}
.echo-routes{
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.echo-route{
  fill:none;
  stroke:#72e8ef;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-dasharray:3 12;
  opacity:0;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 5px rgba(91,228,237,.78));
}
.game[data-v32-phase="awakening"] .echo-route--nest-source{
  opacity:.58;
  animation:v36-echo-strand .9s ease-out 1;
}
.game[data-v32-phase="source"][data-assignment-step="target"] .echo-route--nest-source{
  opacity:.38;
  animation:v36-echo-strand 1.65s linear infinite;
}
.game[data-v32-phase="harvest"] .echo-route--nest-source{
  opacity:.9;
  stroke-width:3;
  animation:v36-echo-strand .72s linear infinite;
}
.game[data-v32-phase="carry"] .echo-route--source-storage{
  opacity:.9;
  stroke-width:3;
  animation:v36-echo-strand .78s linear infinite reverse;
}
.game[data-v32-phase="complete"] .echo-route--nest-source,
.game[data-v32-phase="complete"] .echo-route--source-storage{opacity:.13;stroke-dasharray:2 15}

/* Kiro gehört farblich und größenmäßig in die kühle Umgebung und bewegt sich
   sichtbar von seinem Ausgangspunkt zur Quelle und weiter zum gewählten Speicher. */
.game[data-v32-phase] .resident--kiro{
  filter:brightness(.96) saturate(.58) contrast(1.03) hue-rotate(3deg) drop-shadow(0 8px 11px rgba(0,0,0,.72)) drop-shadow(0 0 7px rgba(69,205,222,.2))!important;
  transition:left .65s cubic-bezier(.2,.75,.25,1),top .65s cubic-bezier(.2,.75,.25,1),filter .45s ease;
  will-change:left,top,transform;
}
.game[data-v32-phase="source"][data-assignment-step="target"] .resident--kiro{
  filter:brightness(1.03) saturate(.62) contrast(1.03) hue-rotate(3deg) drop-shadow(0 8px 11px rgba(0,0,0,.7)) drop-shadow(0 0 13px rgba(73,214,226,.4))!important;
}
.game[data-v32-phase="storage"] .resident--kiro,
.game[data-v32-phase="source"] .resident--kiro{left:48%;top:63%;transform:translate(-50%,-50%) scale(.65)}
.game[data-v32-phase="source"][data-assignment-step="worker"] .resident--kiro{animation:v36-kiro-ready 1.7s ease-in-out infinite}
.game[data-v32-phase="harvest"] .resident--kiro{animation:v36-kiro-to-source 1.8s cubic-bezier(.25,.7,.25,1) both!important}
.game[data-v32-phase="carry"] .resident--kiro{animation:v36-kiro-to-storage 2.5s cubic-bezier(.28,.72,.22,1) both!important}
.game[data-v32-phase="complete"] .resident--kiro{
  left:var(--kiro-dest-x)!important;
  top:var(--kiro-dest-y)!important;
  transform:translate(-50%,-50%) scale(.65)!important;
  opacity:.95!important;
}

/* Der erste Sammelweg endet ruhig auf der Welt. Daro und der Resonanzhof
   werden bewusst noch nicht angekündigt. */
.game[data-v32-phase] .resident--daro,
.game[data-v32-phase] .building--resonance,
.game[data-v32-phase] .resonance-panel,
.game[data-v32-phase] .daro-summary,
.game[data-v32-phase] .cycle-summary{display:none!important}
.world-message[hidden]{display:none!important}
.game[data-v32-phase="harvest"] .world-message,
.game[data-v32-phase="carry"] .world-message,
.game[data-v32-phase="complete"] .world-message{display:none!important}

@keyframes v36-source-response{
  0%,100%{filter:brightness(.72) saturate(.7) drop-shadow(0 10px 13px rgba(0,0,0,.72)) drop-shadow(0 0 9px rgba(75,213,224,.28))}
  50%{filter:brightness(.9) saturate(.9) drop-shadow(0 9px 12px rgba(0,0,0,.68)) drop-shadow(0 0 21px rgba(92,231,237,.58))}
}
@keyframes v36-echo-strand{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-30}
}
@keyframes v36-kiro-ready{
  0%,100%{transform:translate(-50%,-50%) scale(.65)}
  50%{transform:translate(-50%,-53%) scale(.67);filter:brightness(1.06) saturate(.62) drop-shadow(0 0 14px rgba(83,226,235,.42))}
}
@keyframes v36-kiro-to-source{
  0%{left:48%;top:63%;transform:translate(-50%,-50%) scale(.65)}
  24%{left:42%;top:57%;transform:translate(-50%,-54%) scale(.66)}
  54%{left:28%;top:63%;transform:translate(-50%,-50%) scale(.65)}
  72%{left:27%;top:65%;transform:translate(-50%,-53%) scale(.66) rotate(-2deg)}
  86%{left:27%;top:65%;transform:translate(-50%,-49%) scale(.65) rotate(3deg)}
  100%{left:27%;top:65%;transform:translate(-50%,-53%) scale(.66) rotate(-2deg)}
}
@keyframes v36-kiro-to-storage{
  0%{left:27%;top:65%;transform:translate(-50%,-50%) scale(.65)}
  34%{left:39%;top:55%;transform:translate(-50%,-55%) scale(.67)}
  64%{left:54%;top:58%;transform:translate(-50%,-52%) scale(.66)}
  100%{left:var(--kiro-dest-x);top:var(--kiro-dest-y);transform:translate(-50%,-50%) scale(.65)}
}

@media (orientation:landscape) and (max-height:430px) and (min-aspect-ratio:21/10){
  .game[data-v32-phase] .world-ui{--echo-nest-y:50%}
  .resident--kiro{width:78px;height:112px;background-size:auto 94px}
  .resident--kiro b{top:94px;font-size:10px}
  .resident--kiro small{top:106px;font-size:6px}
  .followup--nature{left:18%;top:69%;width:clamp(112px,11vw,150px)}
}

@media (prefers-reduced-motion:reduce){
  .world-backdrop,.world-ui{transition:none}
  .game[data-v32-phase="awakening"] .echo-route--nest-source,
  .game[data-v32-phase="source"] .echo-route--nest-source,
  .game[data-v32-phase="harvest"] .echo-route--nest-source,
  .game[data-v32-phase="carry"] .echo-route--source-storage,
  .game[data-v32-phase="harvest"] .resident--kiro,
  .game[data-v32-phase="carry"] .resident--kiro{animation:none!important}
}