@import url("./fonts.css");
@import url("./navigation.css");
/* Der Dschungel füllt den Bildschirm. Scrollen ist nur seitlich möglich. */
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  --jungle-text: #fffdf5;
  --jungle-heading: #ffe39b;
  --jungle-text-shadow: -1px -1px 0 #10241a, 1px -1px 0 #10241a, -1px 1px 0 #10241a, 1px 1px 0 #10241a, 0 2px 3px #10241a;
  background: #315f32;
  font-family: "GNF", monospace;
}
#island-scroll { width: 100vw; height: 100vh; height: 100dvh; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; touch-action: pan-x; scrollbar-width: none; outline: none; }
#island-scroll::-webkit-scrollbar { display: none; }
#island-scroll:focus-visible { outline: 2px dashed #f1dfa6; outline-offset: -5px; }
/* Das Bild ist fünfmal so breit wie hoch. An die Bildschirmhöhe anpassen, ohne es zu verzerren. */
.jungle-scene { position: relative; width: 500vh; width: 500dvh; height: 100vh; height: 100dvh; }
#jungle { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
/* Ein großes Porträt mit einem warmen Rahmen passend zur Pixelwelt. */
.jungle-portrait {
  position: absolute;
  left: 2.7%;
  top: 2.8%;
  height: 37%;
  width: auto;
  max-width: calc(100vw - 48px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 3px solid #dfc57d;
  box-shadow: 6px 6px 0 #284529, 0 8px 24px rgb(18 45 25 / .3);
}
/* Die Texte bewegen sich mit dem Bild und bleiben dadurch auf den freien Grasflächen. */
.trail-stops { position: absolute; inset: 0; }
.trail-stop {
  position: absolute;
  isolation: isolate;
  max-width: calc(100vw - 48px);
  color: var(--jungle-text);
  font-family: "Inter", sans-serif;
  font-size: 2.35vh;
  font-size: 2.35dvh;
  font-weight: 500;
  line-height: 1.5;
  text-shadow: var(--jungle-text-shadow);
}
/* Der Schatten umgibt das ganze Textfeld, mit gleichmäßigem Abstand und weichem Rand. */
.trail-stop::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -.55em -.7em;
  border-radius: .35em;
  background: rgb(10 27 20 / .78);
  filter: blur(.55em);
  pointer-events: none;
}
.trail-stop h2 {
  margin: 0 0 1.4vh;
  font-family: "GNF", monospace;
  font-size: 3.6vh;
  font-size: 3.6dvh;
  font-weight: 400;
  line-height: 1.15;
  color: var(--jungle-heading);
  text-shadow: var(--jungle-text-shadow);
}
.trail-stop p { margin: 0; }
.trail-stop p + p, .trail-stop ul + p { margin-top: 1.2vh; }
.trail-stop ul { margin: 0; padding-left: 1em; list-style-type: square; }
.trail-stop li + li { margin-top: .7vh; }
.trail-stop li::marker { color: var(--jungle-heading); }
.stop-facts { left: 13.8%; top: 65%; width: 10%; }
.stop-hobbies { left: 26%; top: 10%; width: 10%; }
.stop-travel { left: 38%; top: 65%; width: 12%; }
.stop-annoyances { left: 51%; top: 15%; width: 11%; }
.stop-games { left: 63%; top: 66%; width: 11%; }
.stop-learning { left: 73%; top: 9%; width: 9%; }
.stop-goals { left: 84%; top: 66%; width: 12%; }
/* Links und Titel liegen über dem Bild. JavaScript blendet den Titel beim Scrollen aus. */
.exit, .page-title { position: fixed; z-index: 2; color: var(--jungle-heading); text-shadow: var(--jungle-text-shadow); }
.exit { top: clamp(17px, 3.3vh, 35px); left: clamp(19px, 3.4vw, 53px); text-decoration: underline; text-underline-offset: 4px; }
.exit:focus-visible { outline: 2px dashed #f4e9bc; outline-offset: 5px; }
.page-title { top: clamp(19px, 3.1vh, 37px); left: 50%; transform: translateX(-50%); margin: 0; font-size: clamp(27px, 3vw, 43px); line-height: 1; font-weight: 700; white-space: nowrap; pointer-events: none; }
/* Auf dem Handy passt jeder Textblock in die Bildschirmbreite. */
@media (max-width: 600px) {
  .page-title { font-size: 27px; }
  .jungle-portrait { left: 24px; top: 11%; height: 30%; }
  .trail-stop { font-size: min(2.35vh, 4.4vw); font-size: min(2.35dvh, 4.4vw); }
  .trail-stop h2 { font-size: min(3.6vh, 6.4vw); font-size: min(3.6dvh, 6.4vw); }
}