/* Oberflaeche der Open World. Ausgelagert aus style.css: sie wird erst
   gebraucht, wenn jemand die Welt oeffnet, blockierte aber auf jeder
   Seite den ersten Anstrich. */



/* Die Open World liegt ueber dem Index. Sie faehrt nicht seitlich herein,
   sondern kommt nach vorn, waehrend der Index zuruecktritt. */
.wz {
  position: fixed;
  inset: 0;
  z-index: 170;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  background: #0b1a12;
  color: #e6e5e1;
  transform: scale(1.04);
  transition: opacity 0.42s var(--e-soft), transform 0.72s var(--e-cam),
              background 1.5s var(--e-soft), color 1.5s var(--e-soft),
              visibility 0s linear 0.72s;
}
/* Bis zum Betreten der Open World traegt die Huelle den Hintergrund der
   Startseite, danach kippt alles im gleichen Takt wie die Szene ins Dunkle.
   Die Szene liest diese Farbe aus und faerbt Nebel und Horizont danach. */
body:not(.is-inworld) .wz {
  background: var(--bg);
  color: var(--ink);
}
body.is-world .wz {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.42s var(--e-soft), transform 0.72s var(--e-cam),
              background 1.5s var(--e-soft), color 1.5s var(--e-soft), visibility 0s;
}
.wz::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 44%, rgba(126, 140, 156, 0.22) 0%, transparent 68%),
    radial-gradient(90% 60% at 50% 118%, rgba(150, 160, 180, 0.12) 0%, transparent 70%);
  transition: opacity 1.5s var(--e-soft);
}
body:not(.is-inworld) .wz::before { opacity: 0; }
/* will-change und contain nur waehrend der Bewegung. Bleiben sie dauerhaft
   stehen, backt der Browser die Huelle in eine eigene Ebene und rastert sie
   grober - eine 3D-Leinwand darin wird dadurch unscharf und ruckelt. */
body.is-flying .wz { will-change: transform, opacity; contain: paint; }
body.is-flying .world__cv,
body.is-flying .wz__field { will-change: transform, opacity; }
body.is-world .frame,
body.is-world .header {
  opacity: 0;
  transform: scale(0.965);
  pointer-events: none;
}

.wz__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: blur(20px) saturate(1.3);
  transform: scale(1.12) translateZ(0);
  will-change: opacity;
  opacity: 0;
  transition: opacity 1.2s var(--e-soft);
}
/* Beim Oeffnen steht der Grund sofort - sonst wirkt es, als lade die Welt
   noch. Beim Verlassen darf er ausblenden. */
body.is-world .wz__field { opacity: 0.5; transition-duration: 0.001s; }
body.is-inworld .wz__field,
body.is-inworld .wz__grain { opacity: 0; }
.wz__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateZ(0);
  background-image: radial-gradient(rgba(13, 13, 12, 0.32) 0.6px, transparent 0.7px);
  background-size: 3px 3px;
  opacity: 0.4;
  transition: opacity 1.2s var(--e-soft);
}

/* Das Logo bleibt oben, damit man immer zurueckkommt */
.wz__home {
  position: fixed;
  top: clamp(0.7rem, 1.9vw, 1.4rem);
  left: clamp(0.9rem, 2.4vw, 1.8rem);
  z-index: 8;
  width: var(--logo-w);
  opacity: 0;
  transition: opacity 0.5s var(--e-soft);
}
.wz__home img { width: 100%; height: auto; }
body.is-world .wz__home { opacity: 0.85; transition-delay: 0.6s; }
.wz__home:hover { opacity: 1; }
body:not(.is-inworld) .wz__home img { filter: invert(1); }

/* Ein ruhiges Nicken, beim Zeigen ein Schritt in Laufrichtung. */
.wz__back {
  position: fixed;
  top: 50%;
  left: clamp(0.9rem, 3.2vw, 2.6rem);
  z-index: 8;
  display: flex;
  align-items: center;
  padding: 1rem 0.8rem;
  border: 0;
  background: none;
  color: rgba(230, 229, 225, 0.42);
  cursor: pointer;
  transform: translateY(-50%);
  opacity: 0;
  transition: color 0.35s var(--e-soft), opacity 0.5s var(--e-soft);
}
body.is-world .wz__back { opacity: 1; transition-delay: 0s, 0.6s; }
.wz__back:hover, .wz__back:focus-visible { color: #e6e5e1; }
body:not(.is-inworld) .wz__back { color: var(--ink-40); }
body:not(.is-inworld) .wz__back:hover { color: var(--deep); }
.wz__back:focus-visible {
  outline: 1.5px solid color-mix(in srgb, currentColor 55%, transparent);
  outline-offset: 2px;
}
/* Die Tinte des Chevrons liegt in einer Ecke des Kaestchens. Nach der
   Drehung sitzt sie 0,354 Kantenlaengen neben der Mitte - das wird hier
   zurueckgeschoben, damit der Pfeil mittig im Knopf steht. */
.wz__back i {
  display: block;
  width: 0.85rem; height: 0.85rem;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateX(0.3rem) rotate(45deg);
  animation: wz-nod 3.4s var(--e-soft) infinite;
  transition: transform 0.5s var(--e-back);
}
.wz__back:hover i,
.wz__back:focus-visible i {
  transform: translateX(0.3rem) rotate(45deg) translate3d(-0.18rem, 0.18rem, 0);
  animation: none;
}
@keyframes wz-nod {
  0%, 74%, 100% { transform: translateX(0.3rem) rotate(45deg) translate3d(0, 0, 0); }
  84% { transform: translateX(0.3rem) rotate(45deg) translate3d(-0.14rem, 0.14rem, 0); }
}

.wz__kick {
  color: rgba(230, 229, 225, 0.42);
  opacity: 0;
  transform: translate3d(0, 0.8rem, 0);
  transition: opacity 0.7s var(--e-soft) 0.3s, transform 0.9s var(--e-out) 0.3s;
}
body.is-world .wz__kick { opacity: 1; transform: none; }
body:not(.is-inworld) .wz__kick {
  color: color-mix(in srgb, var(--tint) 34%, var(--ink));
}

body:not(.is-inworld) .wz .world__say {
  border-color: rgba(13, 13, 12, 0.12);
  background: rgba(252, 252, 250, 0.92);
  color: #16241d;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 30px rgba(13, 13, 12, 0.12);
}
body:not(.is-inworld) .wz .world__say::after {
  border-right-color: rgba(13, 13, 12, 0.12);
  border-bottom-color: rgba(13, 13, 12, 0.12);
  background: rgba(252, 252, 250, 0.92);
}
body:not(.is-inworld) .wz .world__enter {
  border-color: rgba(11, 34, 23, 0.5);
  background: linear-gradient(180deg, #1d5539, #0f3122);
  color: #eafff3;
  text-shadow: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 24px rgba(13, 40, 27, 0.24);
}
body:not(.is-inworld) .wz .world.is-ready.is-hover .world__enter,
body:not(.is-inworld) .wz .world.is-ready .world__enter:focus-visible {
  border-color: rgba(11, 34, 23, 0.72);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 14px 30px rgba(13, 40, 27, 0.3);
  animation: worldPulseLight 2.6s var(--e-soft) infinite;
}
@keyframes worldPulseLight {
  0%, 100% { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 26px rgba(13, 40, 27, 0.26); }
  50%      { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 18px 38px rgba(13, 40, 27, 0.36); }
}
body:not(.is-inworld) .wz .world__sound {
  border-color: rgba(13, 13, 12, 0.16);
  background: rgba(252, 252, 250, 0.78);
  color: rgba(13, 13, 12, 0.62);
}
body:not(.is-inworld) .wz .world__sound:hover,
body:not(.is-inworld) .wz .world__sound.is-on {
  border-color: rgba(13, 13, 12, 0.34);
  color: var(--ink);
}@media (prefers-reduced-motion: reduce) {
  .wz { transition-duration: 0.01ms !important; }
  .wz__back i { animation: none !important; }
  .wz__kick { opacity: 1 !important; transform: none !important; }
}

.is-menu-open .status,
.is-contact .status,
.is-card .status,
body.is-world .status { opacity: 0; }



/* ---------------------------------------------------------------
   Karte. Die Welt selbst, von weit oben: eine eigene kleine Szene, die
   frei im Bild steht. Kein Rahmen, keine Flaeche - nur die Insel.
   --------------------------------------------------------------- */
.world__mapBtn {
  position: absolute;
  right: clamp(1.4rem, 4vw, 3.4rem);
  top: clamp(6.2rem, 15.4vh, 8.4rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(216, 247, 230, 0.9);
  z-index: 6;
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(115deg, rgba(120, 220, 175, 0.2) 0 3px, rgba(0, 0, 0, 0) 3px),
    linear-gradient(205deg, rgba(22, 48, 35, 0.93), rgba(7, 18, 13, 0.94));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity 0.5s var(--e-soft) 0.6s, transform 0.6s var(--e-out) 0.6s, visibility 0s 0.6s;
}
body.is-world .world.is-live .world__mapBtn {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.6s, 0.6s, 0s;
}
body.is-world .world.is-live.is-bag .world__mapBtn,
body.is-world .world.is-live.is-map .world__mapBtn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s var(--e-soft), visibility 0s 0.22s;
}
.world.is-cine .world__mapBtn { opacity: 0 !important; pointer-events: none !important; }
.world__mapBtn:hover { color: #fff; }
.world__mapBtn:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; }
.world__mapIcon {
  width: 15px;
  height: 15px;
  background: currentColor;
  clip-path: polygon(0 14%, 34% 0, 66% 14%, 100% 0, 100% 86%, 66% 100%, 34% 86%, 0 100%);
  opacity: 0.85;
}
.world__mapCount { color: #63f0a0; font-weight: 600; }


/* Offene Karte: die Welt tritt zurueck. Weil sie dabei angehalten wird, ist
   das eine einmalige Rasterung und kein Filter je Bild - deshalb auch kein
   Uebergang, der ihn zwanzigmal wiederholen wuerde. */
.world.is-map .world__cv {
  filter: blur(10px) saturate(0.8) brightness(0.58);
}
.world.is-map .world__mapWrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, rgba(6, 12, 9, 0.12), rgba(6, 12, 9, 0.5));
  pointer-events: none;
}
.world.is-map .world__compass,
.world.is-map .world__use,
.world.is-map .world__say,
.world.is-map .world__npcSay { opacity: 0 !important; pointer-events: none !important; }

.world__mapWrap {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.34s var(--e-soft);
}
.world__mapWrap.is-on { opacity: 1; pointer-events: auto; }
.world.is-map .world__keys,
.world.is-map .world__touch,
.world.is-map .world__plan {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s var(--e-soft) !important;
}

/* Kein Rahmen: die Insel liegt frei, nur eine Zeile darueber und darunter. */
.world__map {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  transform: translate3d(0, 1.4rem, 0) scale(0.985);
  transform-origin: 50% 60%;
  transition: transform 0.5s var(--e-out);
}
.world__mapWrap.is-on .world__map { transform: translate3d(0, 0, 0) scale(1); }
.world__mapHead {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 1.1rem 0.4rem 0.9rem;
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(115deg, rgba(120, 220, 175, 0.2) 0 3px, rgba(0, 0, 0, 0) 3px),
    linear-gradient(205deg, rgba(22, 48, 35, 0.93), rgba(7, 18, 13, 0.94));
}
.world__mapTitle {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(216, 247, 230, 0.9);
}
.world__mapHere {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #63f0a0;
  white-space: nowrap;
}
.world__mapCv {
  display: block;
  width: min(58rem, 64vw);
  aspect-ratio: 16 / 11;
  background: none;
  border: 0;
}
/* Der Name der Gegend haengt am Zeiger, nicht an einer festen Ecke. */
.world__mapTip {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -180%);
  padding: 0.26rem 0.6rem;
  white-space: nowrap;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #eafff3;
  pointer-events: none;
  opacity: 0;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  background:
    linear-gradient(115deg, rgba(120, 220, 175, 0.28) 0 2px, rgba(0, 0, 0, 0) 2px),
    linear-gradient(205deg, rgba(22, 48, 35, 0.96), rgba(7, 18, 13, 0.96));
  transition: opacity 0.18s var(--e-soft);
}
.world__mapTip.is-on { opacity: 1; }

.world__mapKeys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(216, 247, 230, 0.55);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.world__mapKeys li { display: inline-flex; align-items: center; gap: 0.36rem; }
.world__mapKeys li::before {
  content: "";
  width: 0.44rem;
  height: 0.44rem;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: currentColor;
}
.world__mapKeys .is-you::before { background: #ffffff; }
.world__mapKeys .is-poi::before { background: #8affc4; }
.world__mapKeys .is-npc::before { background: #63f0a0; }
.world__mapKeys .is-town::before { background: #ffb257; }
.world__mapClose {
  position: absolute;
  top: 0.1rem;
  right: -2.2rem;
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  background: none;
  color: rgba(216, 247, 230, 0.55);
  cursor: pointer;
}
.world__mapClose::before,
.world__mapClose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.8rem;
  height: 1.4px;
  background: currentColor;
}
.world__mapClose::before { transform: translate(-50%, -50%) rotate(45deg); }
.world__mapClose::after { transform: translate(-50%, -50%) rotate(-45deg); }
.world__mapClose:hover { color: #fff; }@media (max-width: 900px) {
  .world__mapBtn { right: 1rem; top: 6.1rem; }
}
@media (max-width: 760px), (pointer: coarse) {
  .world__mapCv { width: 94vw; }
  .world__mapClose { right: 0.2rem; top: -2.1rem; }
  .world__mapCount { display: none; }
}


/* ---------------------------------------------------------------
   Die Open World. Zwei Zustaende: Vorspann (die Figur steht und macht ihre
   eigene Bewegung) und Spiel (man steuert sie). Die Klassen setzt world.js.
   --------------------------------------------------------------- */
.world {
  position: absolute;
  inset: 0;
  outline: none;
}
.world__cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1s var(--e-soft);
}
.world.is-ready .world__cv { opacity: 1; }
.world.is-hover .world__cv { cursor: pointer; }

/* Standbild, solange die Szene noch nicht steht */
.world__poster {
  position: absolute;
  inset: 0;
  background: url("../img/figur-poster.webp") center / contain no-repeat;
  opacity: 0;
  transition: opacity 0.8s var(--e-soft);
  pointer-events: none;
}
body.is-world .world__poster { opacity: 1; transition-delay: 0.3s; }
body.is-world .world.is-ready .world__poster { opacity: 0; transition-delay: 0s; }

/* Vorspann: Titel und Stichpunkte, unten links */
.world__intro {
  position: absolute;
  left: clamp(1.4rem, 4vw, 3.4rem);
  bottom: clamp(1.4rem, 4vw, 3rem);
  max-width: min(30rem, 42vw);
  display: grid;
  gap: 0.35rem;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0.8rem, 0);
  transition: opacity 0.7s var(--e-soft) 0.7s, transform 0.9s var(--e-out) 0.7s;
}
body.is-world .world__intro { opacity: 1; transform: none; }
body.is-world .world.is-live .world__intro {
  opacity: 0;
  transform: translate3d(0, -0.6rem, 0);
  transition-delay: 0s;
  transition-duration: 0.45s;
}
.world__name {
  font-size: clamp(1.6rem, min(5vw, 7vh), 3.2rem);
  font-weight: 850;
  font-stretch: 118%;
  letter-spacing: -0.04em;
  line-height: 0.9;
  margin: 0 0 0.55rem;
}
.world__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.34rem;
}
.world__list li {
  position: relative;
  padding-left: 1rem;
  font-size: clamp(0.72rem, 1.05vw, 0.84rem);
  line-height: 1.45;
  color: rgba(206, 240, 221, 0.66);
}
.world__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tint);
  box-shadow: 0 0 10px rgba(99, 240, 160, 0.7);
}

/* Sprechblase im Vorspann: sitzt ueber der Figur und folgt ihr */
.world__say {
  position: absolute;
  left: var(--fx, 50%);
  top: var(--fy, 40%);
  transform: translate(-50%, -150%) translateY(0.4rem);
  z-index: 4;
  margin: 0;
  max-width: min(22rem, 62vw);
  padding: 0.6rem 0.95rem;
  border-radius: 1rem 1rem 1rem 0.3rem;
  border: 1px solid rgba(99, 240, 160, 0.32);
  background: rgba(9, 26, 18, 0.82);
  color: #d8f7e6;
  font-size: clamp(0.72rem, 1.05vw, 0.84rem);
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 1px rgba(99, 240, 160, 0.06), 0 10px 34px rgba(0, 0, 0, 0.5),
              0 0 26px rgba(60, 200, 130, 0.14);
  transition: opacity 0.5s var(--e-soft), transform 0.6s var(--e-out);
}
.world__say::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(99, 240, 160, 0.32);
  border-bottom: 1px solid rgba(99, 240, 160, 0.32);
  background: rgba(9, 26, 18, 0.82);
  transform: rotate(45deg) skew(-6deg, -6deg);
}
body.is-world .world.is-ready .world__say.is-on {
  opacity: 1;
  transform: translate(-50%, -150%);
}
.world.is-hover .world__say,
.world.is-live .world__say { opacity: 0 !important; }

/* Der Knopf sitzt ueber der Figur und folgt ihr */
.world__enter {
  position: absolute;
  left: var(--fx, 50%);
  top: var(--fgy, 62%);
  transform: translate(-50%, 0) scale(0.92);
  z-index: 4;
  appearance: none;
  border: 1px solid rgba(99, 240, 160, 0.45);
  background: linear-gradient(180deg, rgba(18, 52, 35, 0.9), rgba(8, 26, 17, 0.9));
  color: #b9ffdb;
  border-radius: 999px;
  padding: 0.6rem 1.25rem;
  font: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 12px rgba(99, 240, 160, 0.55);
  box-shadow: 0 0 0 1px rgba(99, 240, 160, 0.08), 0 0 26px rgba(60, 220, 140, 0.22),
              inset 0 0 18px rgba(99, 240, 160, 0.12);
  transition: opacity 0.35s var(--e-soft), transform 0.45s var(--e-out),
              border-color 0.35s var(--e-soft), box-shadow 0.35s var(--e-soft);
}
body.is-world .world.is-ready .world__enter { pointer-events: auto; }
body.is-world .world.is-ready.is-hover .world__enter,
body.is-world .world.is-ready .world__enter:focus-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  border-color: rgba(140, 255, 200, 0.85);
  box-shadow: 0 0 0 1px rgba(99, 240, 160, 0.16), 0 0 44px rgba(70, 235, 150, 0.4),
              inset 0 0 22px rgba(99, 240, 160, 0.2);
  animation: worldPulse 2.6s var(--e-soft) infinite;
}
@keyframes worldPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(99, 240, 160, 0.16), 0 0 40px rgba(70, 235, 150, 0.34), inset 0 0 20px rgba(99, 240, 160, 0.16); }
  50%      { box-shadow: 0 0 0 1px rgba(99, 240, 160, 0.24), 0 0 62px rgba(70, 235, 150, 0.5),  inset 0 0 28px rgba(99, 240, 160, 0.26); }
}
.world.is-live .world__enter {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden;
  transition: opacity 0.3s var(--e-soft), visibility 0s linear 0.3s;
  animation: none !important;
}
.world__enter:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; }

/* Ton laesst sich jederzeit zuschalten - aus ist die Voreinstellung */
.world__sound {
  position: absolute;
  right: clamp(1.2rem, 4vw, 3.2rem);
  top: clamp(1.2rem, 4vh, 2.6rem);
  z-index: 7;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid rgba(99, 240, 160, 0.28);
  background: rgba(9, 26, 18, 0.68);
  color: rgba(206, 240, 221, 0.75);
  border-radius: 999px;
  padding: 0.45rem 0.9rem 0.45rem 0.75rem;
  font: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s var(--e-soft) 0.6s, border-color 0.3s var(--e-soft), color 0.3s var(--e-soft);
}
body.is-world .world__sound { opacity: 1; }
.world__sound:hover { border-color: rgba(140, 255, 200, 0.6); color: #d8f7e6; }
.world__sound:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; }
.world__soundIcon { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.world__soundIcon i {
  width: 2px;
  background: currentColor;
  border-radius: 1px;
  opacity: 0.4;
  transition: height 0.3s var(--e-out), opacity 0.3s var(--e-soft);
}
.world__soundIcon i:nth-child(1) { height: 4px; }
.world__soundIcon i:nth-child(2) { height: 7px; }
.world__soundIcon i:nth-child(3) { height: 5px; }
.world__sound.is-on { border-color: rgba(140, 255, 200, 0.66); color: #b9ffdb; }
.world__sound.is-on .world__soundIcon i { opacity: 1; animation: soundBar 1.1s var(--e-soft) infinite; }
.world__sound.is-on .world__soundIcon i:nth-child(2) { animation-delay: 0.18s; }
.world__sound.is-on .world__soundIcon i:nth-child(3) { animation-delay: 0.36s; }

/* Kinobalken fuer den Moment des Umdrehens */
.world__bars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.world__bars i, .world__bars b {
  position: absolute;
  left: 0;
  right: 0;
  height: 11vh;
  background: #04100a;
  transition: transform 0.5s var(--e-cam);
}
.world__bars i { top: 0; transform: translate3d(0, -101%, 0); box-shadow: 0 1px 0 rgba(99, 240, 160, 0.4); }
.world__bars b { bottom: 0; transform: translate3d(0, 101%, 0); box-shadow: 0 -1px 0 rgba(99, 240, 160, 0.4); }
.world.is-cinema .world__bars i,
.world.is-cinema .world__bars b { transform: translate3d(0, 0, 0); }

/* Tastenbelegung, erscheint erst im Spiel */
.world__keys {
  position: absolute;
  right: clamp(1.4rem, 4vw, 3.4rem);
  bottom: clamp(1.4rem, 4vw, 3rem);
  display: grid;
  gap: 0.5rem;
  justify-items: end;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0.8rem, 0);
  transition: opacity 0.6s var(--e-soft) 0.2s, transform 0.8s var(--e-out) 0.2s;
}
body.is-world .world.is-live .world__keys { opacity: 1; transform: none; }
body.is-world .world.is-live.is-playing .world__keys { opacity: 0; transition-delay: 0s; }
.world__key { display: flex; align-items: center; gap: 5px; }
.world__key b {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid rgba(230, 229, 225, 0.24);
  border-radius: 5px;
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(230, 229, 225, 0.72);
}
.world__key b.is-wide { min-width: 44px; }
.world__key i {
  font-style: normal;
  margin-left: 0.35rem;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(206, 240, 221, 0.45);
}
.world__key b { border-color: rgba(99, 240, 160, 0.28); color: rgba(206, 240, 221, 0.8); }

.world__touch {
  position: absolute;
  left: 50%;
  bottom: clamp(1.1rem, 4vh, 2.4rem);
  transform: translateX(-50%);
  margin: 0;
  z-index: 3;
  pointer-events: none;
  display: none;
  color: rgba(230, 229, 225, 0.4);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.58rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s var(--e-soft) 0.2s;
}
body.is-world .world.is-live .world__touch { opacity: 1; }
body.is-world .world.is-live.is-playing .world__touch { opacity: 0; transition-delay: 0s; }

/* Kompass: zeigt auf das aktive Ziel, oben ist geradeaus */
/* Kein backdrop-filter auf den Bedienelementen: jedes davon muesste die
   laufende Szene dahinter in jedem Bild neu einfangen und weichzeichnen. Das
   kostet spuerbar Bildrate und laesst das Filmkorn darunter flimmern. Die
   Flaechen sind ohnehin fast deckend. */
.world__compass {
  position: absolute;
  top: clamp(1rem, 3.4vh, 1.9rem);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.85rem 0.42rem 0.55rem;
  border: 1px solid rgba(99, 240, 160, 0.24);
  border-radius: 999px;
  background: rgba(8, 20, 14, 0.52);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -0.6rem);
  transition: opacity 0.5s var(--e-soft) 0.5s, transform 0.6s var(--e-out) 0.5s;
}
body.is-world .world.is-live .world__compass.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}
.world__needle {
  width: 15px;
  height: 15px;
  flex: none;
  background: var(--tint);
  clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%);
}
.world__target {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(206, 240, 221, 0.84);
}
.world__dist {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: rgba(206, 240, 221, 0.45);
}

/* Aufforderung, wenn man an einem Ort steht */
.world__use {
  position: absolute;
  left: 50%;
  bottom: clamp(4.8rem, 15vh, 7.6rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.9rem 0.42rem 0.5rem;
  border: 1px solid rgba(99, 240, 160, 0.42);
  border-radius: 999px;
  background: rgba(8, 20, 14, 0.62);
  color: #d8f7e6;
  font: inherit;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0.6rem);
  transition: opacity 0.28s var(--e-soft), transform 0.34s var(--e-out), visibility 0s 0.34s;
}
body.is-world .world.is-live .world__use.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.world__use b {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border: 1px solid rgba(99, 240, 160, 0.5);
  border-radius: 5px;
  font-size: 0.6rem;
  font-weight: 600;
}
.world__use span {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.world__use:hover { border-color: rgba(140, 255, 200, 0.7); }
.world__use:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; }

/* Karte zu einem Ort. Kein Modal - man kann weiterlaufen, dann geht sie zu.
   --acc traegt die Farbe der jeweiligen Disziplin. */
.world__card {
  --acc: #63f0a0;
  position: absolute;
  left: clamp(1.2rem, 4vw, 3rem);
  top: 50%;
  width: min(24rem, 64vw);
  padding: 1.35rem 1.5rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 2px solid var(--acc);
  border-radius: 5px;
  background: linear-gradient(150deg, rgba(9, 24, 17, 0.9), rgba(5, 14, 10, 0.86));
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.9);
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) translateX(-1.2rem);
  transition: opacity 0.45s var(--e-soft), transform 0.6s var(--e-out), visibility 0s 0.6s;
}
.world__card.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}
.world__cardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.95rem;
}
.world__cardMark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent);
  border-radius: 50%;
  color: var(--acc);
}
.world__cardMark svg { width: 21px; height: 21px; display: block; }
.world__card.is-on .world__cardMark { animation: cardMark 0.75s var(--e-out) backwards; }
.world__cardNo {
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: color-mix(in srgb, var(--acc) 72%, transparent);
}
.world__cardKind { margin: 0 0 0.32rem; color: rgba(206, 240, 221, 0.42); font-size: 0.55rem; }
.world__cardTitle {
  margin: 0 0 0.6rem;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #f2f8f4;
}
.world__cardLead {
  margin: 0 0 1rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(235, 240, 236, 0.82);
}
.world__cardList { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.world__cardList li {
  position: relative;
  padding-left: 1.05rem;
  font-size: 0.745rem;
  line-height: 1.45;
  color: rgba(206, 240, 221, 0.66);
}
.world__cardList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acc);
  opacity: 0.75;
}
/* die Punkte laufen versetzt ein, damit man sie einzeln liest */
.world__card.is-on .world__cardList li {
  animation: cardItem 0.55s var(--e-out) backwards;
  animation-delay: calc(var(--i, 0) * 70ms + 150ms);
}
.world__cardFoot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.15rem;
}
.world__cardBar { display: flex; gap: 4px; }
.world__cardBar i {
  width: 15px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.5s var(--e-soft);
}
.world__cardBar i.is-on { background: var(--acc); }
.world__cardProg { color: rgba(206, 240, 221, 0.4); font-size: 0.52rem; }
.world__cardClose {
  position: absolute;
  right: 0.55rem;
  top: 0.55rem;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.world__cardClose::before,
.world__cardClose::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  width: 12px;
  height: 1px;
  background: rgba(230, 229, 225, 0.5);
}
.world__cardClose::before { transform: rotate(45deg); }
.world__cardClose::after { transform: rotate(-45deg); }
.world__cardClose:hover::before,
.world__cardClose:hover::after { background: #eef7f1; }
.world__cardCta {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.55rem 1rem;
  border: 1px solid color-mix(in srgb, var(--acc) 50%, transparent);
  border-radius: 999px;
  color: #f2f8f4;
  text-decoration: none;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 0.3s var(--e-soft), background 0.3s var(--e-soft);
}
.world__cardCta:hover { border-color: var(--acc); background: rgba(255, 255, 255, 0.05); }
/* ohne diese Zeile schlaegt display das hidden-Attribut */
.world__cardCta[hidden] { display: none; }

/* Waehrend einer Kamerasequenz gehoert das Bild der Szene */
.world.is-cine .world__compass,
.world.is-cine .world__use,
.world.is-cine .world__plan,
.world.is-cine .world__card,
.world.is-cine .world__keys,
.world.is-cine .world__touch {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.4s var(--e-soft) !important;
}

/* Kampagnenplan: fuellt sich beim Spielen */
.world__plan {
  position: absolute;
  left: clamp(1.2rem, 4vw, 3rem);
  bottom: clamp(1.4rem, 4vw, 3rem);
  z-index: 3;
  pointer-events: none;
  /* eigene Flaeche: sonst verschwindet die Schrift im Gras, spaetestens wenn
     die Sonne aufgeht */
  padding: 0.6rem 0.9rem 0.7rem;
  border: 1px solid rgba(99, 240, 160, 0.18);
  border-radius: 6px;
  background: rgba(6, 17, 12, 0.55);
  opacity: 0;
  transform: translate3d(0, 0.8rem, 0);
  transition: opacity 0.6s var(--e-soft) 0.4s, transform 0.8s var(--e-out) 0.4s;
}
body.is-world .world.is-live .world__plan { opacity: 1; transform: none; }
.world__planHead {
  margin: 0 0 0.45rem;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  color: rgba(206, 240, 221, 0.62);
  font-size: 0.56rem;
}
.world__planCount { color: var(--tint); font-weight: 600; letter-spacing: 0.08em; }
.world__planList { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.28rem; }
.world__planList li {
  position: relative;
  padding-left: 1.05rem;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: rgba(230, 229, 225, 0.5);
  transition: color 0.4s var(--e-soft);
}
.world__planList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(206, 240, 221, 0.32);
  border-radius: 2px;
  transition: background 0.4s var(--e-soft), border-color 0.4s var(--e-soft);
}
.world__planList li.is-done { color: rgba(206, 240, 221, 0.88); }
.world__planList li.is-done::before { background: var(--tint); border-color: var(--tint); }@media (hover: none) and (pointer: coarse) {
  .world__keys { display: none; }
  /* Ohne Tastatur ist der Knopf selbst die Aktion, die Taste faellt weg */
  .world__use b { display: none; }
  .world__use { bottom: clamp(3.4rem, 12vh, 6rem); }
  .world__touch {
    display: block;
    top: clamp(4.2rem, 11vh, 7rem);
    bottom: auto;
    max-width: 78vw;
  }
  /* Blase weiter nach oben, damit sie den Knopf nicht beruehrt */
  body.is-world .world.is-ready .world__say.is-on { transform: translate(-50%, -150%) translateY(-2.6rem); }
  /* ohne Zeigegeraet ist der Knopf dauerhaft sichtbar */
  body.is-world .world.is-ready .world__enter { opacity: 1; transform: translate(-50%, 0) scale(1); }
  body.is-world .world.is-ready.is-live .world__enter { opacity: 0; }
}
@media (max-width: 900px) {
  /* Ohne Stichpunkte darf der Titel ganz nach unten - dort kommt er dem
     Betreten-Knopf nicht mehr in die Quere. */
  .world__intro { max-width: 86vw; bottom: 1.1rem; }
  .world__say { max-width: 74vw; font-size: 0.72rem; }
  .world__sound { right: 1rem; top: 1rem; padding: 0.4rem 0.7rem 0.4rem 0.6rem; font-size: 0.56rem; }
  /* Auf schmalen Schirmen wird die Karte zur Leiste unten, sonst deckt sie
     die halbe Welt zu. Der Plan schrumpft auf den Zaehler. */
  .world__card {
    left: 0.9rem;
    right: 0.9rem;
    top: auto;
    bottom: 0.9rem;
    width: auto;
    transform: translateY(1rem);
    padding: 0.95rem 1rem 1.05rem;
  }
  .world__card.is-on { transform: translateY(0); }
  .world__cardTitle { font-size: 1.1rem; }
  .world__cardLead { font-size: 0.75rem; margin-bottom: 0.8rem; padding-bottom: 0.75rem; }
  .world__cardList li { font-size: 0.7rem; }
  .world__cardTop { margin-bottom: 0.7rem; }
  .world__cardMark { width: 32px; height: 32px; }
  .world__cardMark svg { width: 18px; height: 18px; }
  .world__cardFoot { margin-top: 0.85rem; }
  .world__planList { display: none; }
  .world__plan { bottom: auto; top: clamp(5rem, 13vh, 6.4rem); left: 1rem; padding: 0.45rem 0.75rem 0.5rem; }
  .world__compass { max-width: 78vw; }
  .world__target { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .world__cv, .world__intro, .world__keys, .world__poster, .world__say,
  .world__enter, .world__sound, .world__bars i, .world__bars b,
  .world__compass, .world__use, .world__card, .world__plan { transition-duration: 0.01ms !important; }
  .world__enter, .world__sound.is-on .world__soundIcon i { animation: none !important; }
  .world__card.is-on .world__cardMark,
  .world__card.is-on .world__cardList li { animation: none !important; }
}


/* ---------------------------------------------------------------------------
   Low-Poly-Optik fuer das HUD der Open World.
   Keine runden Ecken, keine Pillen: gekappte Ecken, flache Flaechen und
   Facetten aus zwei Toenen. Statt Rahmen (die ein clip-path ohnehin
   abschneiden wuerde) tragen die Flaechen eine Akzentkante im Verlauf.
--------------------------------------------------------------------------- */
.world__compass,
.world__use,
.world__sound,
.world__enter,
.world__cardCta {
  border: 0;
  border-radius: 0;
}

/* Schraege Bandform fuer alle Chips */
.world__compass,
.world__use,
.world__sound {
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  padding: 0.5rem 1.15rem 0.5rem 0.95rem;
  background:
    linear-gradient(115deg, rgba(120, 220, 175, 0.16) 0 3px, rgba(0, 0, 0, 0) 3px),
    linear-gradient(170deg, rgba(19, 43, 32, 0.9), rgba(7, 18, 13, 0.92));
}
.world__sound { gap: 0.5rem; }
.world__compass { gap: 0.6rem; }

/* Der Kompasszeiger wird zum Dreieck ohne Rundung */
.world__needle { clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%); }

/* Taste im Aufforderungschip: kleines gekapptes Feld */
.world__use b {
  border-radius: 0;
  border: 0;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  background: rgba(120, 220, 175, 0.18);
  color: #dff8ec;
}
.world__key b {
  border-radius: 0;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

/* Karte und Plan: gekappte Ecken, zwei Toene, Akzentkante links */
.world__card,
.world__plan {
  border: 0;
  border-radius: 0;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.world__card {
  background:
    linear-gradient(90deg, var(--acc) 0 3px, rgba(0, 0, 0, 0) 3px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 45%),
    linear-gradient(165deg, rgba(13, 32, 24, 0.94), rgba(5, 14, 11, 0.93));
  box-shadow: 0 22px 54px -26px rgba(0, 0, 0, 0.95);
}
.world__plan {
  background:
    linear-gradient(90deg, rgba(99, 240, 160, 0.55) 0 2px, rgba(0, 0, 0, 0) 2px),
    linear-gradient(160deg, rgba(13, 30, 22, 0.72), rgba(5, 14, 11, 0.74));
  padding: 0.65rem 1rem 0.7rem 0.85rem;
}

/* Zeichen der Disziplin als Sechseck statt Kreis */
.world__cardMark {
  border: 0;
  border-radius: 0;
  clip-path: polygon(50% 0, 94% 26%, 94% 74%, 50% 100%, 6% 74%, 6% 26%);
  background: color-mix(in srgb, var(--acc) 20%, rgba(0, 0, 0, 0.35));
}

/* Aufzaehlungen bekommen Rauten statt Punkten */
.world__cardList li::before {
  border-radius: 0;
  width: 6px;
  height: 6px;
  top: 0.45em;
  transform: rotate(45deg);
}
.world__planList li::before {
  border-radius: 0;
  transform: rotate(45deg);
  width: 6px;
  height: 6px;
  left: 1px;
}

/* Fortschrittsbalken: harte Segmente */
.world__cardBar i { border-radius: 0; }

/* Schaltflaechen mit gekappter Ecke */
.world__cardCta,
.world__enter {
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  background:
    linear-gradient(160deg, rgba(99, 240, 160, 0.16), rgba(99, 240, 160, 0.05));
}
.world__cardCta:hover,
.world__enter:hover { background: linear-gradient(160deg, rgba(99, 240, 160, 0.3), rgba(99, 240, 160, 0.1)); }

/* Schliesskreuz ohne Kreis */
.world__cardClose { border-radius: 0; }

/* Der Ton-Chip traegt seine Balken flach */
.world__soundIcon i { border-radius: 0; }

/* ---------------------------------------------------------------------------
   NPC, Dialog und Rucksack
--------------------------------------------------------------------------- */
.world__npcSay {
  position: absolute;
  margin: 0;
  transform: translate(-50%, -100%) translateY(-0.4rem) scale(0.96);
  padding: 0.5rem 0.9rem;
  max-width: 17rem;
  z-index: 5;
  pointer-events: none;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  background: linear-gradient(160deg, rgba(24, 48, 34, 0.94), rgba(10, 24, 17, 0.94));
  color: #e9f6ee;
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  transition: opacity 0.35s var(--e-soft), transform 0.45s var(--e-out);
}
.world__npcSay.is-on { opacity: 1; transform: translate(-50%, -100%) translateY(-0.7rem) scale(1); }

.world__talk {
  position: absolute;
  left: 50%;
  bottom: clamp(1.4rem, 5vh, 3rem);
  width: min(34rem, 88vw);
  padding: 1.15rem 1.3rem 1.2rem;
  z-index: 7;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  background:
    linear-gradient(90deg, #63f0a0 0 3px, rgba(0, 0, 0, 0) 3px),
    linear-gradient(165deg, rgba(13, 32, 24, 0.96), rgba(5, 14, 11, 0.95));
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 1rem);
  transition: opacity 0.35s var(--e-soft), transform 0.5s var(--e-out), visibility 0s 0.5s;
}
.world__talk.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.world__talkTop { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.world__talkMark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  clip-path: polygon(50% 0, 94% 26%, 94% 74%, 50% 100%, 6% 74%, 6% 26%);
  background: rgba(99, 240, 160, 0.2);
  color: #63f0a0;
}
.world__talkMark svg { width: 17px; height: 17px; }
.world__talkWho {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #63f0a0;
}
.world__talkText {
  margin: 0 0 0.95rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(238, 244, 239, 0.9);
}
.world__talkOpts { display: grid; gap: 0.4rem; }
.world__talkOpt {
  position: relative;
  padding: 0.55rem 0.9rem 0.55rem 1.6rem;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  color: rgba(230, 240, 233, 0.86);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  background: linear-gradient(120deg, rgba(99, 240, 160, 0.13), rgba(99, 240, 160, 0.04));
  transition: background 0.25s var(--e-soft), color 0.25s var(--e-soft);
}
.world__talkOpt::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: #63f0a0;
  transform: rotate(45deg);
  opacity: 0.75;
}
.world__talkOpt:hover { background: linear-gradient(120deg, rgba(99, 240, 160, 0.28), rgba(99, 240, 160, 0.09)); color: #fff; }
.world__talkOpt:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }

/* Rucksackknopf */
.world__bagBtn {
  position: absolute;
  right: clamp(1.4rem, 4vw, 3.4rem);
  top: clamp(3.6rem, 9vh, 5rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(216, 247, 230, 0.9);
  z-index: 6;
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  background:
    linear-gradient(115deg, rgba(120, 220, 175, 0.18) 0 3px, rgba(0, 0, 0, 0) 3px),
    linear-gradient(170deg, rgba(19, 43, 32, 0.9), rgba(7, 18, 13, 0.92));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity 0.5s var(--e-soft) 0.5s, transform 0.6s var(--e-out) 0.5s, visibility 0s 0.5s;
}
body.is-world .world.is-live .world__bagBtn {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.5s, 0.5s, 0s;
}
.world__bagIcon {
  width: 15px;
  height: 15px;
  background: currentColor;
  clip-path: polygon(28% 0, 72% 0, 72% 16%, 100% 32%, 100% 100%, 0 100%, 0 32%, 28% 16%);
  opacity: 0.85;
}
.world__bagCount { color: #63f0a0; font-weight: 600; }
.world__bagBtn:hover { color: #fff; }
.world__bagBtn:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; }


/* Waehrend eines Gespraechs tritt der Rest zurueck */
.world.is-talking .world__use,
.world.is-talking .world__card { opacity: 0 !important; pointer-events: none !important; }
.world.is-cine .world__npcSay,
.world.is-cine .world__bagBtn,
.world.is-cine .world__bag { opacity: 0 !important; pointer-events: none !important; }@media (max-width: 900px) {
  .world__talk { width: calc(100% - 1.8rem); bottom: 0.9rem; padding: 0.9rem 1rem 1rem; }
  .world__talkText { font-size: 0.78rem; }
  .world__bagBtn { right: 1rem; top: 3.4rem; }
}


/* Schiebeknopf fuer den Finger. Er erscheint dort, wo der Finger aufsetzt -
   ein fester Platz am Rand trifft nie den Daumen, wo er gerade liegt. */
.world__stick {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s var(--e-soft);
}
.world__stick.is-on { opacity: 1; }
.world__stick i,
.world__stick b {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.world__stick i {
  width: 116px;
  height: 116px;
  border: 1px solid rgba(140, 240, 190, 0.3);
  background: rgba(8, 22, 15, 0.3);
}
.world__stick b {
  width: 46px;
  height: 46px;
  background: rgba(140, 240, 190, 0.32);
  border: 1px solid rgba(180, 255, 215, 0.55);
  transform: translate(calc(-50% + var(--kx, 0px)), calc(-50% + var(--ky, 0px)));
}@media (hover: none) and (pointer: coarse) {
  /* Auf dem Handy zieht der Finger die Kamera - der Hinweis bleibt laenger */
  .world__touch { max-width: 84vw; line-height: 1.5; }
  /* Bedienflaechen gross genug fuer einen Daumen */
  .world__use { padding: 0.7rem 1.2rem; font-size: 0.68rem; }
  .world__bagBtn { padding: 0.6rem 1rem 0.6rem 0.8rem; font-size: 0.62rem; }
  .world__talkOpt { padding: 0.75rem 1rem 0.75rem 1.7rem; font-size: 0.8rem; }
  .world__cardClose, .world__bagClose { width: 34px; height: 34px; }
  .world__cardClose::before, .world__cardClose::after { left: 11px; top: 16px; }
  .world__bagClose::before, .world__bagClose::after { left: 11px; top: 16px; }
}


/* ---------------------------------------------------------------------------
   Inventar und Flaechen im Low-Poly-Look: facettierte Verlaeufe statt
   flacher Balken, gekappte Ecken, ein heller Grat oben links wie bei einem
   angeschraegten Polygon.
--------------------------------------------------------------------------- */
/* Das Inventar ist ein aufgeklappter Rucksack in Form und Grau des Rucksacks
   am Hauptcharakter. Die Zeichnung ist eine SVG in denselben Facetten wie die
   Welt; das Raster der Gegenstaende liegt genau ueber der Oeffnung - deshalb
   sind seine Raender in Prozent des Bildkastens angegeben, nicht in Pixeln.
   Am Rechner liegt der Rucksack gross unten rechts, das Bild dahinter bleibt
   lesbar; auf dem Handy steht er mittig. */
.world__bagWrap {
  position: absolute;
  inset: 0;
  z-index: 8;
  opacity: 0;
  visibility: hidden;
  /* Kein backdrop-filter: der muesste die laufende Szene in jedem Bild neu
     einfangen und weichzeichnen - mit dem Filmkorn der Nachbearbeitung
     darunter flimmert das sichtbar. Ein etwas kraeftigerer Schleier tut es. */
  background:
    radial-gradient(72% 96% at 80% 74%, rgba(5, 11, 10, 0.74) 0%, rgba(5, 11, 10, 0.46) 52%, rgba(5, 11, 10, 0.24) 100%);
  transition: opacity 0.28s var(--e-soft), visibility 0s 0.28s;
}
.world__bagWrap.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.world__bag {
  position: absolute;
  right: clamp(1rem, 2.6vw, 2.8rem);
  bottom: clamp(0.6rem, 2vh, 1.8rem);
  width: min(31rem, 40vw, 80vh);
  display: grid;
  justify-items: end;
  gap: 0.45rem;
  /* Nur verschieben, nicht skalieren: beim Skalieren muss der Browser alles
     darin in jedem Bild neu rastern - das war das Zucken beim Oeffnen. */
  transform: translateY(1.4rem);
  will-change: transform;
  transition: transform 0.44s var(--e-out);
}
.world__bagWrap.is-on .world__bag { transform: translateY(0); }
.world__bagHead {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-right: 2.2rem;
}
.world__bagTitle {
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #e7ebe8;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.world__bagSlots {
  color: rgba(231, 235, 232, 0.5);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
}
.world__bagClose {
  position: absolute;
  right: 0;
  top: -0.2rem;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.world__bagClose::before, .world__bagClose::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 14px;
  width: 14px;
  height: 1.5px;
  background: rgba(231, 235, 232, 0.62);
}
.world__bagClose::before { transform: rotate(45deg); }
.world__bagClose::after { transform: rotate(-45deg); }
.world__bagClose:hover::before, .world__bagClose:hover::after { background: #fff; }
.world__bagClose:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }

.world__bagArt {
  position: relative;
  width: 100%;
  aspect-ratio: 332 / 456;
}
/* Der Schlagschatten sitzt auf der Zeichnung, nicht auf dem Kasten darum:
   sonst rechnet der Browser bei jeder Bewegung eines Gegenstands den Bereich
   des Filters neu - und der ganze Rucksack ruckt einmal mit. */
.world__bagSvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Der Schatten unter dem Rucksack ist gemalt, kein Filter - Filter kosten in
   jedem Bild eine neue Rasterung. */
.world__bagArt::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -2%;
  height: 16%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* Die Szene im Fach: jeder Gegenstand hat einen Platz, eine Lage und eine
   Tiefe. Der aeussere Kasten setzt den Platz, der innere <b> die Bewegung -
   so stoeren sich Grundlage und Beruehrung nicht gegenseitig. */
.world__bagPile {
  position: absolute;
  left: 23%;
  right: 23%;
  top: 41%;
  bottom: 26%;
}
.world__item {
  position: absolute;
  width: var(--w);
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--r)) scale(var(--s));
  transform-origin: 50% 60%;
  transition: left 0.55s var(--e-out), top 0.55s var(--e-out), transform 0.55s var(--e-out);
  cursor: pointer;
  /* Getroffen wird die gezeichnete Form, nicht ihr Rechteck - sonst faengt
     das oberste Kaestchen alles ab, was darunter liegt. */
  pointer-events: none;
  animation: itemDrop 0.5s var(--e-out) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.world__bagPile.is-tidy .world__item {
  left: var(--tx);
  top: var(--ty);
  transform: translate(-50%, -50%) rotate(0deg) scale(0.7);
}
.world__item > b {
  display: block;
  position: relative;
  pointer-events: none;
  will-change: transform;
  transform: translate(var(--nx, 0px), var(--ny, 0px)) rotate(var(--nr, 0deg));
  transition: transform 0.42s var(--e-out);
}
.world__item svg {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(var(--dim, 1));
  transition: filter 0.42s var(--e-soft);
}
.world__itemCopy { left: 0; top: 0; width: 100%; display: block; }
/* Angefasst wird eine unsichtbare, unbewegte Kopie der Form. Waere die
   sichtbare Form selbst das Ziel, rutschte sie beim Anheben unter dem Zeiger
   weg - und der Wechsel aus Betreten und Verlassen liesse alles flackern. */
.world__itemHit {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: block;
  opacity: 0;
}
.world__itemHit svg path,
.world__itemHit svg circle,
.world__itemHit svg ellipse,
.world__itemHit svg rect { pointer-events: auto; }
.world__itemSh {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 76%;
  height: 14%;
  transform: translateX(-50%) scaleX(var(--shx, 1));
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
  opacity: var(--sho, 0.5);
  transition: opacity 0.42s var(--e-soft), transform 0.42s var(--e-out);
  pointer-events: none;
}
.world__item.is-on > b { transform: translate(0, -7px) rotate(-2.2deg); }
.world__item.is-on svg { filter: brightness(calc(var(--dim, 1) * 1.16)); }
.world__item.is-on .world__itemSh { --sho: 0.28; --shx: 1.12; }
.world__item.is-picked > b { transform: translate(0, -5px) rotate(-1.4deg); }
.world__item.is-picked svg { filter: brightness(calc(var(--dim, 1) * 1.1)); }
.world__item.is-fresh::before {
  content: "";
  position: absolute;
  right: 4%;
  top: 2%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 10px var(--acc);
  animation: itemFresh 1.3s var(--e-soft) infinite;
  pointer-events: none;
}

.world__itemTag {
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translate(-50%, -100%) translateY(4px);
  background: rgba(16, 20, 19, 0.94);
  color: #eef2ef;
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.24rem 0.5rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  transition: opacity 0.2s var(--e-soft), transform 0.3s var(--e-out);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.world__itemTag u { text-decoration: none; }
.world__itemTag em { font-style: normal; color: var(--acc); margin-left: 0.35rem; }
.world__item.is-on .world__itemTag,
.world__item.is-picked .world__itemTag { opacity: 1; transform: translate(-50%, -100%); }

.world__bagTidy {
  appearance: none;
  border: 0;
  margin-left: 0.15rem;
  padding: 0.26rem 0.58rem;
  background: rgba(214, 224, 218, 0.1);
  color: rgba(231, 235, 232, 0.68);
  font: inherit;
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  transition: background 0.25s var(--e-soft), color 0.25s var(--e-soft);
}
.world__bagTidy:hover { background: rgba(214, 224, 218, 0.2); color: #fff; }
.world__bagTidy:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
.world__bagSlots.is-full { color: #f0c46a; }
.world__bagDesc {
  top: 1.15rem;
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.6;
  color: rgba(231, 235, 232, 0.5);
}
.world__bagDesc[hidden] { display: none; }
/* Die Zeile unter dem Rucksack hat eine feste Hoehe: sonst waechst sie, sobald
   ein Name erscheint, und schiebt den ganzen Rucksack ein Stueck nach oben -
   genau das Zucken beim Ueberfahren. */
.world__bagFoot {
  position: relative;
  width: 100%;
  height: 3.3rem;
  text-align: right;
  padding-right: 0.2rem;
}
.world__bagPick, .world__bagDesc, .world__bagEmpty {
  position: absolute;
  left: 0;
  right: 0.2rem;
}
.world__bagPick { top: 0; color: rgba(231, 235, 232, 0.62); font-size: 0.56rem; letter-spacing: 0.16em; }
.world__bagEmpty {
  top: 0;
  margin: 0;
  color: rgba(231, 235, 232, 0.44);
  font-size: 0.56rem;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0.05em;
}
.world__bagPick[hidden], .world__bagEmpty[hidden] { display: none; }

/* Facettierte Flaechen fuer die uebrigen Bedienelemente */
.world__compass,
.world__use,
.world__sound,
.world__bagBtn {
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(115deg, rgba(120, 220, 175, 0.2) 0 3px, rgba(0, 0, 0, 0) 3px),
    linear-gradient(205deg, rgba(22, 48, 35, 0.93), rgba(7, 18, 13, 0.94));
}
.world__card,
.world__talk,
.world__plan {
  background-image:
    linear-gradient(140deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(90deg, var(--acc, #63f0a0) 0 3px, rgba(0, 0, 0, 0) 3px),
    linear-gradient(205deg, rgba(18, 40, 29, 0.95), rgba(5, 14, 11, 0.95));
}
.world.is-cine .world__bagWrap { opacity: 0 !important; pointer-events: none !important; }
.world.is-bag .world__bagBtn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.22s var(--e-soft), visibility 0s 0.22s !important;
}

/* ---- Das Briefing als Brief ------------------------------------------
   Der Zettel liegt zusammengefaltet flach in der Tiefe und klappt beim
   Oeffnen auf den Betrachter zu. Zwei Falzkanten laufen dabei aus, die
   Zeilen kommen nacheinander nach. */
.world__brief {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  gap: 1.2rem;
  grid-auto-rows: min-content;
  align-content: center;
  opacity: 0;
  visibility: hidden;
  background: radial-gradient(96% 96% at 50% 46%, rgba(4, 10, 8, 0.86), rgba(2, 6, 5, 0.95));
  transition: opacity 0.34s var(--e-soft), visibility 0s 0.34s;
}
.world__brief.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.world__briefStage { perspective: 1400px; width: min(34rem, 88vw, 78vh); }
.world__sheet {
  position: relative;
  padding: clamp(1.3rem, 3.4vw, 2.2rem) clamp(1.4rem, 3.6vw, 2.4rem) clamp(1.1rem, 2.6vw, 1.7rem);
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%),
    linear-gradient(168deg, #f4efe2 0%, #ece5d4 58%, #e2d9c5 100%);
  color: #2a2721;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(255, 255, 255, 0.5) inset;
  transform-origin: 50% 92%;
  transform: rotateX(76deg) translateY(14%) scale(0.62);
  opacity: 0;
  transition: transform 0.72s var(--e-out), opacity 0.4s var(--e-soft);
}
.world__brief.is-on .world__sheet { transform: rotateX(0deg) translateY(0) scale(1); opacity: 1; }
/* Falzkanten */
.world__sheetFold {
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 55%, rgba(255, 255, 255, 0.5));
  transition: opacity 0.7s var(--e-soft) 0.28s;
}
.world__sheetFold--a { top: 33%; }
.world__sheetFold--b { top: 66%; }
.world__brief.is-on .world__sheetFold { opacity: 0.12; }
/* Bueroklammer und Kaffeerand */
.world__sheetClip {
  position: absolute;
  right: 8%;
  top: -14px;
  width: 16px;
  height: 44px;
  border: 2.5px solid #9aa3a6;
  border-radius: 9px;
  border-bottom-color: rgba(154, 163, 166, 0.35);
  transform: rotate(9deg);
}
.world__sheetRing {
  position: absolute;
  right: 11%;
  bottom: 12%;
  width: clamp(52px, 9vw, 78px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid rgba(126, 92, 48, 0.16);
  background: radial-gradient(closest-side, rgba(126, 92, 48, 0.05), rgba(126, 92, 48, 0));
  transform: rotate(-12deg);
  pointer-events: none;
}
.world__sheetTop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(42, 39, 33, 0.22);
}
.world__sheetFrom, .world__sheetKind {
  margin: 0;
  font-size: clamp(0.52rem, 1.1vw, 0.6rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(42, 39, 33, 0.62);
}
.world__sheetKind { color: #8a5a2b; font-weight: 700; }
.world__sheetTitle {
  margin: 0.85rem 0 0.5rem;
  font-size: clamp(1.15rem, 3.1vw, 1.7rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.world__sheetLead {
  margin: 0 0 1rem;
  font-size: clamp(0.72rem, 1.5vw, 0.86rem);
  line-height: 1.5;
  color: rgba(42, 39, 33, 0.82);
}
.world__sheetTasks {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: t;
  display: grid;
  gap: 0.5rem;
}
.world__sheetTasks li {
  counter-increment: t;
  position: relative;
  padding-left: 1.9rem;
  font-size: clamp(0.68rem, 1.4vw, 0.8rem);
  line-height: 1.45;
}
.world__sheetTasks li::before {
  content: counter(t, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #8a5a2b;
}
.world__sheetTasks b { display: block; font-weight: 750; }
.world__sheetTasks span { color: rgba(42, 39, 33, 0.74); }
.world__sheetNote {
  margin: 1rem 0 0;
  padding: 0.5rem 0 0;
  border-top: 1px dashed rgba(42, 39, 33, 0.28);
  font-size: clamp(0.74rem, 1.5vw, 0.88rem);
  font-style: italic;
  color: #6b4a22;
}
.world__sheetFoot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 0.9rem;
  font-size: clamp(0.52rem, 1.1vw, 0.6rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(42, 39, 33, 0.55);
}
.world__sheetSign {
  font-family: "Segoe Script", "Bradley Hand", cursive;
  font-style: normal;
  font-size: 1.5em;
  letter-spacing: 0;
  text-transform: none;
  color: #3a3630;
  transform: rotate(-4deg);
}
/* Die Zeilen kommen nacheinander, sobald das Blatt liegt */
.world__sheetTitle, .world__sheetLead, .world__sheetTasks li,
.world__sheetNote, .world__sheetFoot {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--e-soft), transform 0.5s var(--e-out);
}
.world__brief.is-on .world__sheetTitle,
.world__brief.is-on .world__sheetLead,
.world__brief.is-on .world__sheetTasks li,
.world__brief.is-on .world__sheetNote,
.world__brief.is-on .world__sheetFoot { opacity: 1; transform: none; }
.world__brief.is-on .world__sheetTitle { transition-delay: 0.42s; }
.world__brief.is-on .world__sheetLead { transition-delay: 0.5s; }
.world__brief.is-on .world__sheetTasks li:nth-child(1) { transition-delay: 0.58s; }
.world__brief.is-on .world__sheetTasks li:nth-child(2) { transition-delay: 0.66s; }
.world__brief.is-on .world__sheetTasks li:nth-child(3) { transition-delay: 0.74s; }
.world__brief.is-on .world__sheetTasks li:nth-child(4) { transition-delay: 0.82s; }
.world__brief.is-on .world__sheetNote { transition-delay: 0.92s; }
.world__brief.is-on .world__sheetFoot { transition-delay: 1s; }
.world__sheetClose {
  position: absolute;
  right: 0.4rem;
  top: 0.4rem;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.world__sheetClose::before, .world__sheetClose::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 14px;
  width: 14px;
  height: 1.5px;
  background: rgba(42, 39, 33, 0.5);
}
.world__sheetClose::before { transform: rotate(45deg); }
.world__sheetClose::after { transform: rotate(-45deg); }
.world__sheetClose:hover::before, .world__sheetClose:hover::after { background: #2a2721; }
.world__briefHint {
  color: rgba(231, 235, 232, 0.5);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  opacity: 0;
  transition: opacity 0.4s var(--e-soft) 1.1s;
}
.world__brief.is-on .world__briefHint { opacity: 1; }
.world.is-cine .world__brief { opacity: 0 !important; pointer-events: none !important; }@media (prefers-reduced-motion: reduce) {
  .world__sheet { transition-duration: 0.2s; }
  .world__sheetTitle, .world__sheetLead, .world__sheetTasks li,
  .world__sheetNote, .world__sheetFoot { transition-delay: 0s !important; }
}
@media (max-width: 900px) {
  .world__bagWrap {
    display: grid;
    place-items: center;
    background: radial-gradient(120% 92% at 50% 46%, rgba(5, 11, 10, 0.82), rgba(3, 7, 6, 0.93));
  }
  .world__bag {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(20rem, 84vw, 48vh);
    justify-items: center;
  }
  .world__bagHead { padding-right: 0; gap: 0.5rem; }
  .world__bagTitle { font-size: 0.64rem; letter-spacing: 0.2em; }
  .world__bagSlots { font-size: 0.5rem; letter-spacing: 0.12em; }
  .world__bagTidy { font-size: 0.44rem; padding: 0.22rem 0.42rem; letter-spacing: 0.12em; }
  .world__bagDesc { font-size: 0.58rem; }
  .world__bagClose { right: -0.1rem; top: -0.25rem; }
  .world__bagFoot { text-align: center; padding-right: 0; }
}