:root {
  color-scheme: dark;
  --game-width: min(800px, calc(100vw - 2rem), calc((100vh - 8rem) * 4 / 3));
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #0a0a0a;
  color: #8cff9a;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.github-link {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: #5fd67a;
  border-radius: 999px;
  touch-action: manipulation;
  pointer-events: auto;
  -webkit-user-select: auto;
  user-select: auto;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.github-link:hover,
.github-link:focus-visible {
  color: #d8ffe6;
  background: #102016;
  outline: none;
}

.github-link:focus-visible {
  box-shadow: 0 0 0 1px #4fd67a;
}

.github-link svg {
  width: 1.6rem;
  height: 1.6rem;
  display: block;
}

.header {
  text-align: center;
  max-width: 52rem;
}

.header h1 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.header p {
  margin: 0;
  color: #5fd67a;
  font-size: 0.9rem;
  line-height: 1.5;
}

.controls-mobile {
  display: none;
}

kbd {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border: 1px solid #2d6b3c;
  border-radius: 0.2rem;
  background: #102016;
  color: #b8ffd0;
  font-size: 0.85em;
}

.game-shell {
  border: 1px solid #1f5f31;
  box-shadow: 0 0 24px rgba(32, 255, 100, 0.08);
  background: #000;
  touch-action: none;
  width: var(--game-width);
  aspect-ratio: 4 / 3;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.touch-controls {
  display: none;
  width: var(--game-width);
  gap: 0.75rem;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

.touch-controls * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.touch-row {
  display: grid;
  gap: 0.75rem;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.touch-row--fly {
  grid-template-columns: 1fr 1.2fr 1fr;
}

.touch-row--actions {
  grid-template-columns: repeat(3, 1fr);
}

.touch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.75rem;
  border: 1px solid #2d6b3c;
  border-radius: 0.5rem;
  background: #102016;
  color: #b8ffd0;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  cursor: pointer;
}

.touch-btn::before {
  display: block;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.touch-btn--left::before {
  content: "◀";
}

.touch-btn--main::before {
  content: "▲";
}

.touch-btn--right::before {
  content: "▶";
}

.touch-btn[data-action="autopilot"]::before {
  content: "AP";
}

.touch-btn[data-action="reset"]::before {
  content: "R";
}

.touch-btn[data-action="new"]::before {
  content: "N";
}

.touch-btn--main {
  font-size: 1.35rem;
}

.touch-btn:active,
.touch-btn.is-active {
  background: #1a4a28;
  border-color: #4fd67a;
  color: #d8ffe6;
  box-shadow: inset 0 0 12px rgba(32, 255, 100, 0.15);
}

.touch-btn[data-action="autopilot"].is-active {
  background: #1f5c30;
  border-color: #6dff95;
  color: #eafff1;
  box-shadow: inset 0 0 14px rgba(32, 255, 100, 0.28);
}

.header-title::before {
  content: "Lunar Lander";
}

@media (hover: none) and (pointer: coarse) {
  .header {
    display: none;
  }

  html,
  body,
  *,
  *::before,
  *::after {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
  }

  html {
    /* Avoid touch-action: none here; it blocks taps on the GitHub link. */
    overflow: hidden;
    height: 100%;
  }

  body {
    overflow: hidden;
    overscroll-behavior: none;
    position: fixed;
    inset: 0;
    width: 100%;
  }

  ::selection {
    background: transparent;
  }

  .controls-desktop {
    display: none;
  }

  .controls-mobile {
    display: none;
  }

  .touch-controls {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    isolation: isolate;
  }

  .page {
    justify-content: flex-start;
    padding-top: 1rem;
    height: 100%;
    overflow: hidden;
  }

  html.lunar-thrust-active,
  html.lunar-thrust-active * {
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  /* Keep the GitHub control tappable despite the page-wide touch lock. */
  .github-link,
  .github-link * {
    touch-action: manipulation !important;
    pointer-events: auto !important;
    -webkit-touch-callout: default !important;
    -webkit-user-select: auto !important;
    user-select: auto !important;
  }

  :root {
    --game-width: min(
      800px,
      calc(100vw - 2rem),
      calc((100vh - 14rem - env(safe-area-inset-bottom)) * 4 / 3)
    );
  }
}