* {
  box-sizing: border-box;
}

html,
body {
  height: 100vh;
}

body {
  margin: 0;
  overflow: hidden;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 16% 18%, rgba(168, 213, 217, 0.22), transparent 30%),
    radial-gradient(circle at 84% 82%, rgba(223, 143, 165, 0.2), transparent 34%),
    linear-gradient(165deg, #695978 0%, #41364f 48%, #241f2d 100%);
  font-family: 'Comic Sans MS', 'Chalkboard SE', 'Segoe Print', 'Comic Neue', cursive;
  color: #3f564c;
}

#stage {
  position: relative;
}

#game {
  display: block;
  aspect-ratio: 16 / 9;
  width: min(100vw, calc(100vh * 16 / 9));
  height: auto;
  image-rendering: auto;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(31, 24, 39, 0.62), 0 0 0 3px rgba(201, 182, 211, 0.42);
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 1.6vh, 1.1rem);
  padding: clamp(1rem, 4vh, 2.5rem);
  overflow: hidden;
  text-align: center;
  background: rgba(249, 242, 248, 0.84);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-radius: 18px;
  animation: overlay-in 0.4s ease-out both;
}

.hidden {
  display: none;
}

h1 {
  margin: 0;
  font-size: clamp(1.6rem, 5.2vh, 3rem);
  letter-spacing: 0.06em;
  color: #695978;
  text-shadow: 0 2px 8px rgba(201, 182, 211, 0.58);
}

.subtitle {
  margin: 0;
  font-size: clamp(0.95rem, 2.6vh, 1.4rem);
  color: #c87995;
  letter-spacing: 0.12em;
}

.story {
  margin: 0;
  max-width: 60%;
  line-height: 1.5;
  font-size: clamp(0.85rem, 2.2vh, 1.1rem);
  color: #54485e;
}

.story b {
  color: #75668d;
}

.prompt {
  margin: 0;
  font-size: clamp(0.95rem, 2.6vh, 1.3rem);
  font-weight: bold;
  color: #695978;
}

.prompt b {
  color: #b96886;
}

.blink {
  animation: blink 1.2s ease-in-out infinite;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.3rem, 1.2vh, 0.6rem);
  max-width: 80%;
}

.controls span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.3em 0.95em;
  border-radius: 999px;
  border: 2px solid #a8d5d9;
  background: #fbf5fa;
  font-size: clamp(0.65rem, 1.8vh, 0.85rem);
  color: #54485e;
  box-shadow: 0 2px 6px rgba(105, 89, 120, 0.16);
}

.controls b {
  color: #75668d;
}

.hint {
  margin: 0;
  font-size: clamp(0.6rem, 1.7vh, 0.8rem);
  font-style: italic;
  color: #8f7f9c;
}

.hero-img {
  height: 26vh;
  width: auto;
  max-width: 90%;
  filter: drop-shadow(0 12px 22px rgba(105, 89, 120, 0.34));
  animation: wobble 3s ease-in-out infinite alternate;
}

#complete-friend {
  height: 22vh;
  width: auto;
  max-width: 90%;
  filter: drop-shadow(0 10px 18px rgba(105, 89, 120, 0.3));
  animation: bounce-in 0.6s cubic-bezier(0.28, 0.84, 0.42, 1) both;
}

.mini {
  height: 14vh;
  width: auto;
  max-width: 90%;
  filter: drop-shadow(0 6px 12px rgba(105, 89, 120, 0.28));
}

.level1-friend {
  height: 25vh;
  border-radius: 22%;
}

@keyframes overlay-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@keyframes wobble {
  from {
    transform: rotate(-2deg);
  }
  to {
    transform: rotate(2deg);
  }
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  60% {
    opacity: 1;
    transform: scale(1.08);
  }
  80% {
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Touch-Steuerung: wird von Input nur auf Geräten mit grobem Zeiger aktiviert. */
#mobile-controls,
#orientation-lock,
.mobile-confirm {
  display: none;
}

.touch-mode {
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

.touch-mode .overlay .prompt,
.touch-mode .overlay .controls {
  display: none;
}

.touch-mode .mobile-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  min-height: 44px;
  padding: .7em 1.4em;
  border: 2px solid rgba(255, 255, 255, .86);
  border-radius: 999px;
  background: linear-gradient(105deg, #695978, #6f9fa8 58%, #c87995);
  box-shadow: 0 8px 18px rgba(65, 54, 79, .28);
  color: #fffdf4;
  font: 800 clamp(13px, 2.4vh, 17px)/1 system-ui, sans-serif;
  letter-spacing: .03em;
  touch-action: manipulation;
}

.touch-mode .mobile-confirm.is-active {
  transform: translateY(2px) scale(.98);
  filter: brightness(1.08);
}

.touch-mode[data-game-state="play"] #mobile-controls {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  touch-action: none;
}

.mobile-control,
.orientation-button {
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-move,
.mobile-actions,
.mobile-utilities {
  position: absolute;
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.mobile-move {
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  gap: 8px;
}

.mobile-actions {
  right: max(18px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
}

.mobile-utilities {
  top: max(9px, env(safe-area-inset-top));
  left: 50%;
  gap: 6px;
  transform: translateX(-50%);
}

.mobile-control {
  display: grid;
  width: clamp(48px, 12vh, 66px);
  height: clamp(48px, 12vh, 66px);
  place-items: center;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: rgba(55, 45, 68, .55);
  box-shadow: 0 5px 13px rgba(25, 18, 32, .27), inset 0 1px 1px rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .94);
  font: 800 clamp(17px, 4.2vh, 25px)/1 system-ui, sans-serif;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .3);
  touch-action: none;
}

.mobile-control.is-active {
  transform: scale(.92);
  border-color: #fff;
  background: rgba(200, 121, 149, .82);
  box-shadow: 0 2px 7px rgba(25, 18, 32, .35), inset 0 2px 4px rgba(56, 37, 62, .24);
}

.mobile-down {
  width: clamp(42px, 10vh, 56px);
  height: clamp(42px, 10vh, 56px);
  align-self: flex-end;
}

.mobile-jump {
  width: clamp(70px, 17vh, 92px);
  height: clamp(70px, 17vh, 92px);
  grid-template-rows: 1fr auto;
  padding: 10px 4px 9px;
  background: rgba(105, 89, 120, .66);
}

.mobile-jump b {
  align-self: end;
  font-size: clamp(23px, 5.3vh, 34px);
}

.mobile-jump span {
  align-self: start;
  font-size: clamp(8px, 1.8vh, 11px);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mobile-utilities .mobile-control {
  width: clamp(34px, 8.5vh, 45px);
  height: clamp(34px, 8.5vh, 45px);
  background: rgba(55, 45, 68, .42);
  font-size: clamp(13px, 3vh, 18px);
}

#stage:fullscreen,
#stage:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background: #241f2d;
}

#stage:fullscreen #game,
#stage:-webkit-full-screen #game {
  width: min(100vw, calc(100vh * 16 / 9));
  max-height: 100vh;
}

#stage:fullscreen .overlay,
#stage:-webkit-full-screen .overlay {
  width: auto;
  left: 0;
  right: 0;
}

.touch-mode.touch-portrait #orientation-lock {
  position: absolute;
  z-index: 50;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 30%, rgba(168, 213, 217, .35), transparent 36%),
    linear-gradient(160deg, rgba(249, 242, 248, .98), rgba(222, 215, 235, .98));
  color: #54485e;
  text-align: center;
  touch-action: manipulation;
}

#orientation-lock h2 {
  margin: 0;
  color: #695978;
  font-size: clamp(24px, 7vw, 38px);
}

#orientation-lock p {
  margin: 0 0 6px;
  font-size: clamp(14px, 4vw, 18px);
}

.rotate-device {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border: 3px solid #a8d5d9;
  border-radius: 22px;
  color: #c87995;
  font: 800 48px/1 system-ui, sans-serif;
  animation: rotate-hint 1.8s ease-in-out infinite;
}

.orientation-button {
  min-height: 44px;
  padding: .65em 1.25em;
  border: 0;
  border-radius: 999px;
  background: #695978;
  box-shadow: 0 6px 14px rgba(65, 54, 79, .24);
  color: #fff;
  font: 800 14px/1 system-ui, sans-serif;
}

@keyframes rotate-hint {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rotate-device { animation: none; }
}