/* Farbwerte als Variablen definieren */
:root {
  --game-color: rgb(134 173 113);
  --game-color-dark: #7b7b7b;
  --base-color: rgb(134 173 113);
  --base-color-dark: rgb(36 62 22);
  --ui-top-offset: calc(3% + 1vw);
  --base-color-grey: rgb(154 177 141);
  --food-color: rgb(134 173 113);
  --co2-bar-positive: #679ddb; /* Blue for positive CO2 storage */
  --alert: #e27859;
  --co2-bar-inactive: #b7bab5; /* Grey for inactive CO2 score*/
  --cursor-default-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='48' viewBox='0 0 24 36'%3E%3Cpath d='M3 1L3 30L9 24L14 34L17 32L12 22L21 22Z' fill='black' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cursor-pointer-image: url("../img/pointer.png");
  /* Transparentes 1×1-Bild – robuster als cursor:none, weil der Browser bei
     Style-Neuberechnungen (z.B. CSS-Transitions) ein aktives Cursor-Bild
     zuverlaessiger beibehält als den Spezialwert "none". */
  --cursor-none:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'/%3E")
      0 0,
    none;
  /* 2× grosser Standard-Cursor (Pfeil) */
  --cursor-default: var(--cursor-default-image) 3 1, auto;
  /* 2× grosser Pointer-Cursor (Hand) */
  --cursor-pointer: var(--cursor-pointer-image) 11 0, pointer;
}

/* Reset margins and paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

/* Dragging komplett unterbinden */
img,
.place,
.carousel,
.highscore-item,
.avatar,
.player-img,
.player-img-container,
.tile,
.navicon,
button {
  -webkit-user-drag: none;
}

.preload {
  background-image:
    url("../img/pano/food_crops-1.png"), url("../img/pano/forest-1.png"),
    url("../img/pano/forest-2.png"), url("../img/pano/meat_production-1.png"),
    url("../img/pano/meat_production-2.png"),
    url("../img/pano/meat_production-3.png"), url("../img/pano/pano-1.png"),
    url("../img/pano/wetland-1.png"), url("../img/pano/wetland-2.png");
  display: none;
}

/* HTML und Body füllen den gesamten Viewport lückenlos */
html,
body {
  width: 100vw;
  height: 100vh;
  height: var(--app-height, 100dvh);
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--base-color-dark);
  cursor: var(--cursor-none);
}

body {
  font-family: "PT Sans", sans-serif;
  transform-style: preserve-3d;
  cursor: var(--cursor-none);
  min-height: var(--app-height, 100dvh);
}

body * {
  cursor: var(--cursor-none);
}

/* DOM-basierter Cursor fuer die gesamte App ausserhalb des Panoramas */
#app-cursor {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 2147483647;
}

#app-cursor.visible {
  display: block;
}

#app-cursor.default {
  width: 32px;
  height: 48px;
  background-image: var(--cursor-default-image);
}

#app-cursor.pointer {
  width: 40px;
  height: 50px;
  background-image: var(--cursor-pointer-image);
}

/* Cursor-Typ wird ausschliesslich von appCursor.js (ausserhalb Panorama)
   und dem #custom-cursor (im Panorama) gesteuert.
   Alle Elemente haben cursor: none – kein doppelter Cursor moeglich. */

h1 {
  position: absolute;
  top: 2%;
  left: 0;
  right: 0;
  font-size: 9vw;
  letter-spacing: 0.07em;
  color: var(--base-color-grey);
  opacity: 0.8;
}

.navicon {
  border-radius: 100%;
  width: 6vw;
  height: 6vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
  box-shadow:
    inset 0px 0px 0px 8px #fff,
    2px 2px 6px rgba(0, 0, 0, 0.5);
  transform-origin: center;
  transition:
    transform 0.2s,
    background-color 0.2s,
    opacity 0.2s;
}

.navicon.check {
  background-color: var(--base-color);
}

.navicon:hover,
.navicon:focus-visible {
  transform: scale(1.1);
}

button {
  font-weight: bold;
  font-size: 1.5em;
  padding: 8px 16px;
  background-color: #fff;
  border-radius: 15px;
  border: solid 5px;
  border-color: var(--base-color);
  color: var(--base-color-dark);
  margin-top: 4.5vh;
  transform-origin: center;
  transition:
    transform 0.2s,
    background-color 0.2s,
    opacity 0.2s;
}

button:not(:disabled):hover,
button:not(:disabled):focus-visible {
  transform: scale(1.1);
}

.bottom {
  z-index: 100;
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 5%;
}

@media (hover: none), (pointer: coarse) {
  html,
  body,
  body * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  #app-cursor {
    display: none !important;
  }

  body,
  body * {
    cursor: auto;
  }

  button,
  .navicon,
  .place,
  .character-1,
  .character-3 {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .navicon {
    min-width: 52px;
    min-height: 52px;
  }
}

html.touch-device,
html.touch-device body,
html.touch-device body * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 900px), (max-height: 650px) {
  :root {
    --ui-top-offset: max(12px, calc(env(safe-area-inset-top) + 6px));
  }

  .navicon {
    width: clamp(54px, 8vw, 68px);
    height: clamp(54px, 8vw, 68px);
    font-size: clamp(2rem, 5vw, 2.8rem);
    box-shadow:
      inset 0 0 0 6px #fff,
      2px 2px 6px rgba(0, 0, 0, 0.5);
  }
}

@font-face {
  font-family: "Wilson ExtraBold";
  src: url("../fonts/mnkywilson-extrabold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Wilson Medium";
  src: url("../fonts/mnkywilson-medium.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

body,
html {
  font-family: "Wilson Medium", Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.headline,
.title {
  font-family: "Wilson ExtraBold", Arial, sans-serif;
}