@font-face {
  font-family: "Press Start 2P";
  src: url("press-start-2p.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

* { box-sizing: border-box; }

html, body, main {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #0040ff;
}

main { display: flex; align-items: center; justify-content: center; }

canvas {
  display: block;
  width: 256px;
  height: 240px;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: manipulation;
}

.game-viewport {
  position: relative;
  flex: none;
  width: 240px;
  height: 224px;
  overflow: hidden;
  background: #000;
}

.game-viewport canvas { position: absolute; top: 0; left: 0; max-width: none; }

.start-button {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: #0040ff;
  color: #fff;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(18px, 5vw, 32px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.12em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.start-button:disabled { cursor: default; }
.start-button[hidden] { display: none; }
.start-button:focus-visible { outline: 3px solid #fff; outline-offset: -12px; }
.start-button:active:not(:disabled) { color: #bcbcbc; }
.touch-controls, .touch-controls[hidden] { display: none; }

@media (hover: none) and (pointer: coarse) {
  main { padding-bottom: max(168px, calc(env(safe-area-inset-bottom) + 150px)); }
  .touch-controls:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: block;
    pointer-events: none;
    font-family: "Press Start 2P", monospace;
    -webkit-user-select: none;
    user-select: none;
  }
  .touch-key {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.82);
    background: rgba(0, 22, 118, 0.62);
    color: #fff;
    font: inherit;
    pointer-events: auto;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }
  .touch-key:active { background: rgba(255, 255, 255, 0.72); color: #001676; }
  .touch-dpad { position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); width: 132px; height: 132px; }
  .touch-dpad .touch-key { position: absolute; width: 46px; height: 46px; border-radius: 5px; font-family: system-ui, sans-serif; font-size: 20px; }
  .touch-up { top: 0; left: 43px; }
  .touch-left { top: 43px; left: 0; }
  .touch-right { top: 43px; right: 0; }
  .touch-down { bottom: 0; left: 43px; }
  .touch-actions { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(27px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 14px; }
  .touch-actions .touch-key { width: 58px; height: 58px; border-radius: 50%; font-size: 16px; }
  .touch-b { transform: translateY(12px); }
  .touch-menu { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; gap: 10px; transform: translateX(-50%); }
  .touch-pill { min-width: 64px; height: 30px; padding: 0 8px; border-radius: 15px; font-size: 7px; }
}

@media (hover: none) and (pointer: coarse) and (max-width: 520px) {
  .touch-menu { bottom: max(92px, calc(env(safe-area-inset-bottom) + 74px)); }
}