html, body {
  margin: 0;
  height: 100%;
  background: #0b1020;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.show-cursor { cursor: auto; }

#wrap {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  width: min(100dvw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#backlink {
  display: none;
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 5;
  font: 10px "Press Start 2P", monospace;
  color: #c7d2fe;
  text-decoration: none;
  padding: 8px 10px;
  background: rgba(8, 10, 25, 0.6);
  border-radius: 6px;
  cursor: pointer;
}
#backlink:hover { color: #ffe14d; }
body.on-title #backlink { display: block; }

/* Full screen toggle: bottom-right corner of the game, always available */
#fsbtn {
  display: none;
  position: absolute;
  right: 1%;
  bottom: 1.5%;
  z-index: 5;
  width: 38px;
  height: 38px;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: #e2e8f0;
  background: rgba(8, 10, 25, 0.45);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.75;
}
#fsbtn:hover { opacity: 1; color: #ffe14d; }
body.fs-ok #fsbtn { display: flex; }
/* On touch screens the bottom corners hold the controls, so sit next to the pause button */
body.touch #fsbtn {
  bottom: auto;
  top: 9%;
  right: calc(max(1.5%, env(safe-area-inset-right)) + 50px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.55);
}

#touch { display: none; }
body.touch #touch { display: block; }
/* Swipe mode: no on-screen arrows/jump/? buttons (pause, full screen and enter stay) */
body.touch.swipe #touch .pad { display: none; }

.pad {
  position: absolute;
  bottom: 4%;
  display: flex;
  gap: 14px;
}
.pad.l { left: max(2%, env(safe-area-inset-left)); }
.pad.r { right: max(2%, env(safe-area-inset-right)); }

#touch button {
  width: clamp(54px, 11vh, 84px);
  height: clamp(54px, 11vh, 84px);
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.55);
  background: rgba(10, 15, 35, 0.4);
  color: #fff;
  font: 18px "Press Start 2P", monospace;
  padding: 0;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#touch button.down { background: rgba(255, 255, 255, 0.35); }
#touch button.ask { border-color: rgba(255, 225, 77, 0.8); color: #ffe14d; }
#touch button.jump { width: clamp(64px, 14vh, 100px); height: clamp(64px, 14vh, 100px); }

#touch #tpause {
  position: absolute;
  top: 9%;
  right: max(1.5%, env(safe-area-inset-right));
  width: 40px;
  height: 40px;
  font-size: 10px;
}

#touch #tenter {
  display: none;
  position: absolute;
  bottom: 22%;
  right: max(2%, env(safe-area-inset-right));
  border-color: rgba(255, 225, 77, 0.9);
  color: #ffe14d;
  animation: pulse 0.8s ease-in-out infinite alternate;
}
body.near-secret #touch #tenter { display: block; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.12); } }

#rotate {
  display: none;
  position: fixed;
  inset: 0;
  background: #0b1020;
  color: #ffe14d;
  font: 14px/1.8 "Press Start 2P", monospace;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  z-index: 10;
}
@media (orientation: portrait) {
  body.touch #rotate { display: flex; }
}