@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/press-start-2p-latin-400-normal.woff2") format("woff2");
}
:root {
  --bg: #0b1020;
  --panel: #121a33;
  --ink: #e8ecf8;
  --muted: #8b95b8;
  --accent: #fbbf24;
  --accent-2: #14b8a6;
  --btn: #1d2747;
  --btn-active: #2d3c6b;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Press Start 2P", ui-monospace, Menlo, Consolas, monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}
header { text-align: center; margin: 4px 0 10px; }
h1 {
  font-size: clamp(16px, 4.5vw, 26px);
  margin: 0;
  letter-spacing: 1px;
  color: var(--ink);
}
h1 span { color: var(--accent); }
#wrap {
  width: min(100%, calc((100svh - 150px) * 480 / 560), 480px);
  aspect-ratio: 480 / 560;
  border: 3px solid var(--panel);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #000, 0 10px 40px rgba(0,0,0,.5);
}
canvas { display: block; width: 100%; height: 100%; touch-action: none; -webkit-touch-callout: none; }
#pad { touch-action: none; }
.bar {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  flex-wrap: wrap; margin-top: 10px; font-size: 9px; color: var(--muted);
  line-height: 1.8; text-align: center;
}
button {
  font: inherit; color: var(--ink); background: var(--btn);
  border: 2px solid #2a365f; border-radius: 6px; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.small { padding: 6px 10px; font-size: 9px; }
#pad { display: none; width: min(100%, 480px); margin-top: 10px; gap: 10px;
       justify-content: space-between; align-items: center; }
#pad .dpad { display: grid; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 50px); gap: 4px; }
#pad .dpad::after { content: ""; grid-column: 2; grid-row: 2; background: var(--btn); border-radius: 6px; }
#pad button { font-size: 16px; }
#pad button.on { background: var(--btn-active); border-color: var(--accent); }
#pad .up { grid-column: 2; grid-row: 1; }
#pad .left { grid-column: 1; grid-row: 2; }
#pad .down { grid-column: 2; grid-row: 3; }
#pad .right { grid-column: 3; grid-row: 2; }
#pad .jump { width: 96px; height: 96px; border-radius: 50%; font-size: 11px; background: #3a2a0a; border-color: var(--accent); }
@media (hover: none) and (pointer: coarse) {
  #pad { display: flex; }
  #wrap { width: min(100%, calc((100svh - 300px) * 480 / 560), 480px); }
  .keys-help { display: none; }
}