@import url("./fonts.css");
/* Der Ozean füllt den Bildschirm und liegt hinter den Inseln. */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #287caf; overflow-x: hidden; font-family: "GNF", monospace; }
#ocean { position: fixed; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.world-map { position: relative; max-width: 1800px; min-height: 1120px; margin: 0 auto; }
/* Größe und Position der Inseln auf großen Bildschirmen. Vergrößerte Pixel bleiben scharf. */
.island { position: absolute; width: clamp(380px, 31vw, 520px); margin: 0; outline: none; -webkit-tap-highlight-color: transparent; }
.island a { display: block; cursor: pointer; }
.island canvas { display: block; width: 100%; height: auto; aspect-ratio: 120 / 115; image-rendering: pixelated; }
.island-jungle { left: 3%; top: 75px; }
.island-volcano { right: 4%; top: 15px; }
.island-city { left: 21%; top: 535px; }
.island-desert { right: 2%; top: 520px; }
/* Hinweis zum Erkunden und sichtbarer Rahmen bei Auswahl mit der Tastatur. */
.explore-note { position: absolute; z-index: 1; top: 455px; left: 50%; transform: translateX(-50%); margin: 0; color: #d8edf0; font: 400 12px/1.4 "GNF", monospace; letter-spacing: 2px; white-space: nowrap; text-shadow: 3px 3px #155f92; }
.island a:focus-visible { outline: 3px dashed #f2d891; outline-offset: -20px; }
/* Small sound control, anchored to the viewport even when the map scrolls. */
#audio-toggle { position: fixed; z-index: 10; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: grid; place-items: center; width: 40px; height: 40px; padding: 9px; border: 2px solid #a1c9d6; border-radius: 3px; background: #1b638de6; color: #e4efdf; box-shadow: 3px 3px 0 #15527a; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#audio-toggle svg { display: block; width: 20px; height: 20px; }
#audio-toggle:hover { background: #164f77; border-color: #f2d891; }
#audio-toggle:focus-visible { outline: 3px dashed #f2d891; outline-offset: 4px; }
#audio-toggle:active { box-shadow: 1px 1px 0 #15527a; transform: translate(2px, 2px); }
#audio-toggle .sound-muted, #audio-toggle[aria-pressed="true"] .sound-waves { display: none; }
#audio-toggle[aria-pressed="true"] .sound-muted { display: block; }
/* Auch die unfertige Wüsteninsel bekommt einen Ausgang. */
.desert-exit { position: fixed; top: 28px; left: 28px; color: #f2e5b9; }
/* Auf sehr breiten Bildschirmen die unteren Inseln weiter auseinanderstellen. */
@media (min-width: 1700px) {
  .world-map { min-height: 1190px; }
  .island-city { left: 25%; top: 580px; }
  .island-desert { top: 555px; }
}
/* Auf Tablets die Inseln in zwei Spalten anordnen. */
@media (max-width: 900px) {
  .world-map { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 5vw 0; padding: 7vw 3vw 10vw; }
  .island { position: relative; inset: auto; width: 100%; }
  .island-volcano, .island-desert { margin-top: 15vw; }
  .explore-note { position: relative; grid-column: 1 / -1; justify-self: center; top: auto; left: auto; transform: none; margin: 8vw 0 2vw; }
}
/* Auf Handys die Inseln untereinander anordnen. */
@media (max-width: 560px) {
  .world-map { grid-template-columns: 1fr; gap: 0; padding: 4vw 0; }
  .island { width: min(100vw, 440px); justify-self: center; }
  .island-volcano, .island-desert { margin-top: -9vw; }
  .island:not(:first-child) { margin-top: -8vw; }
  .explore-note { margin: 0 0 2vw; font-size: 10px; letter-spacing: 1px; }
}