*,
*::before,
*::after {
   box-sizing: border-box;
}

body {
   margin: 0;
   min-height: 100dvh;
   overflow-x: hidden;
   background-color: #000000;
}

.menu-screen {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   position: relative;
   width: 100%;
   min-height: 100dvh;
   padding: clamp(16px, 4vw, 48px);
   overflow-y: auto;
   font-family: "Josefin Sans", sans-serif;
   font-weight: 700;
   background-image: url("img/Menü/Menue_Background1+mobs.png");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   background-color: #000000;
}

.impressum-link {
   color: white;
   text-decoration: none;
   font-size: 16px;
   opacity: 0.6;
   transition: opacity 0.2s;
   margin-top: 10px;
}

.impressum-link:hover {
   opacity: 1;
}

h1 {
   width: 100vw;
   margin: 0;
   font-family: inherit;
   font-size: 64px;
   color: white;
   text-shadow: 2px 2px 4px #000000;
   text-align: center;
}

canvas {
   display: block;
   max-width: 100%;
   height: auto;
   aspect-ratio: 3 / 2;
   background-color: black;
   border: 2px solid rgb(0, 0, 0);
   border-radius: 12px;
   margin-top: 0;
}

.header {
   display: block;
   width: min(100%, 760px);
   max-width: 100%;
   height: auto;
   object-fit: contain;
}

#startMenu {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: min(100%, 928px);
   gap: clamp(16px, 4vh, 36px);
   margin-top: 40px;
}

.menu-button {
   padding: 0;
   background: transparent;
   border: none;
   cursor: pointer;
}

.keybinds {
   width: clamp(280px, 82vw, 720px);
   max-width: 100%;
   height: auto;
   max-height: min(48dvh, 420px);
   object-fit: contain;
   animation: keybindPulse 3200ms ease-in-out infinite;
}

@keyframes keybindPulse {
   0%,
   100% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.04);
   }
}

.menu-button img {
   display: block;
   max-width: 100%;
}

.play-button img {
   width: clamp(220px, 68vw, 482px);
   height: auto;
   transition: transform 750ms ease;
}

.play-button:active img {
   transform: scale(0.94);
   transition-duration: 0ms;
}

@media (hover: hover) and (pointer: fine) {
   .play-button:hover img {
      transform: scale(1.04);
   }
}

.game-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
   gap: 0;
}

.canvas-toolbar {
   display: flex;
   justify-content: flex-end;
   width: min(100%, 760px);
   position: absolute;
   top: 12px;
   right: 12px;
   z-index: 2;
   pointer-events: none;
}

.keyboard-controls-overlay {
   position: fixed;
   inset: 0;
   z-index: 1000;
   display: none;
   align-items: center;
   justify-content: center;
   width: 100vw;
   height: 100dvh;
   padding: clamp(8px, 3vw, 32px);
   background: #000000;
}

.keyboard-controls-overlay img {
   display: block;
   width: 100%;
   height: 100%;
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}

.game-container.is-showing-controls canvas,
.game-container.is-showing-controls .canvas-toolbar,
.game-container.is-showing-controls .mobile-control-hint,
.game-container.is-showing-controls .mobile-control-row {
   visibility: hidden;
}

.game-container.is-showing-controls .keyboard-controls-overlay {
   display: flex;
}

.hidden {
   display: none;
}

#startMenu.hidden,
.game-container.hidden {
   display: none;
}

.game-button-row {
   display: flex;
   gap: 12px;
   pointer-events: auto;
}

.mobile-control-row {
   display: none;
   justify-content: space-between;
   width: min(100%, 760px);
   margin-top: 12px;
}

.mobile-control-group {
   display: flex;
   gap: 12px;
}

.mobile-control-hint {
   display: none;
   width: min(100%, 760px);
   margin: 12px 0 0;
   color: white;
   font-size: clamp(16px, 4vw, 24px);
   line-height: 1.3;
   text-align: center;
   text-shadow: 2px 2px 4px #000000;
}

.game-control-button {
   width: 48px;
   height: 48px;
   border: 2px solid white;
   border-radius: 12px;
   color: white;
   background: rgba(0, 0, 0, 0.55);
   font-family: inherit;
   font-size: 28px;
   cursor: pointer;
   touch-action: none;
   user-select: none;
   transition: transform 80ms ease, background 120ms ease;
}

.game-control-button:active {
   background: rgba(0, 0, 0, 0.85);
   transform: scale(0.9);
}

.game-container:fullscreen {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100vw;
   height: 100vh;
   background: black;
}

.game-container:fullscreen .canvas-toolbar {
   width: 100%;
   top: 12px;
   right: 12px;
}

.game-container:fullscreen canvas {
   width: 100vw;
   height: 100vh;
   object-fit: contain;
}

.game-container:fullscreen .keyboard-controls-overlay {
   width: 100vw;
   height: 100vh;
   padding: clamp(8px, 3vw, 32px);
}

.game-container:fullscreen .keyboard-controls-overlay img {
   max-width: 100vw;
   max-height: 100vh;
}

@media (max-width: 420px) {
   .menu-screen {
      padding-inline: 12px;
   }

   .play-button img {
      width: min(86vw, 360px);
   }

   .keybinds {
      width: min(92vw, 420px);
   }
}

@media (hover: none) and (pointer: coarse) {
   .mobile-control-hint {
      display: block;
   }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
   .mobile-control-row {
      display: flex;
   }

   .mobile-control-hint {
      display: none;
   }
}

@media (max-height: 460px) and (orientation: landscape) {
   .menu-screen {
      justify-content: flex-start;
      padding-block: 10px;
   }

   #startMenu {
      gap: 8px;
      margin-block: 0;
   }

   .play-button img {
      width: min(42vw, 320px);
   }

   .header {
      width: min(80%, 760px);
   }

   .keybinds {
      width: min(54vw, 420px);
      max-height: 45dvh;
   }
}

@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}

body.is-playing .header {
   width: min(49%, 200px);
   position: fixed;
   left: 10px;
   top: 10px;
}

body.is-playing {
   overscroll-behavior: none;
   touch-action: none;
   user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
}

body.is-playing * {
   user-select: none;
   -webkit-user-select: none;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
}

body.is-playing button,
body.is-playing canvas,
body.is-playing img {
   -webkit-user-drag: none;
}

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
   canvas {
      width: 100%;
   }
}

/* Smartphones ----------- */
@media only screen and (max-height: 480px) {
   .mobile-control-row {
      position: absolute;
      right: 12px;
      bottom: 12px;
      left: 12px;
      z-index: 2;
      width: auto;
      margin-top: 0;
      pointer-events: none;
   }

   .mobile-control-group {
      pointer-events: auto;
   }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
   body.is-playing {
      width: 100vw;
      height: 100dvh;
      min-height: 100dvh;
      overflow: hidden;
   }

   body.is-playing .menu-screen {
      justify-content: center;
      width: 100vw;
      height: 100dvh;
      min-height: 100dvh;
      padding: 8px;
      overflow: hidden;
   }

   body.is-playing .game-container {
      justify-content: center;
      width: 100%;
      height: 100%;
   }

   body.is-playing .game-container canvas {
      width: auto;
      height: calc(100dvh - 16px);
      max-width: calc(100dvw - 16px);
      max-height: calc(100dvh - 16px);
      object-fit: contain;
   }

   body.is-playing .canvas-toolbar {
      top: 8px;
      right: 8px;
   }

   body.is-playing .mobile-control-row {
      position: absolute;
      right: 8px;
      bottom: 8px;
      left: 8px;
      z-index: 2;
      width: auto;
      margin-top: 0;
      pointer-events: none;
   }

   body.is-playing .mobile-control-group {
      pointer-events: auto;
   }

   body.is-playing .keyboard-controls-overlay {
      width: 100%;
      height: 100%;
      padding: 8px;
   }
}