:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  background: #090d1b;
  color: #eef5ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 0%, #28386a 0, #0d1328 42%, #070a13 100%);
}

main { width: min(1280px, 100%); padding: 18px 14px 28px; }

header { text-align: center; margin-bottom: 12px; }
h1 { margin: 2px 0; font-size: clamp(28px, 4vw, 48px); letter-spacing: .16em; color: #ffe69a; }
header p { margin: 2px; color: #aec1df; }
.eyebrow { font-size: 12px; letter-spacing: .18em; color: #6be1ff; }

canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid #ffe8a5;
  border-radius: 6px;
  background: #111a33;
  box-shadow: 0 0 0 4px #2a3154, 0 18px 50px #000a;
  image-rendering: pixelated;
}

.touch-controls {
  display: none;
  margin-top: 12px;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  user-select: none;
  -webkit-user-select: none;
}
.touch-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; background: #101a30; border: 1px solid #42628d; }
.touch-group span { flex-basis: 100%; color: #fff1be; font-size: 12px; font-weight: 700; }
.touch-group button { min-width: 40px; min-height: 38px; border: 1px solid #9fb9e8; border-radius: 5px; background: #283b64; color: #fff; font: 700 15px inherit; touch-action: none; }
.touch-group button:active { background: #63d7ff; color: #0a1630; }
.p2-touch { border-color: #c45c8a; }
.p2-touch button { background: #66324d; border-color: #f09abb; }

.controls {
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  max-width: 1100px;
  color: #c9d5ea;
  font-size: 14px;
}
.controls div { display: grid; gap: 3px; padding: 9px 12px; border-left: 3px solid #5fd7ff; background: #111a2bcc; }
.controls div:nth-child(2) { border-color: #ff6fa8; }
.controls strong { color: #fff1be; }
.controls p { grid-column: 1 / -1; text-align: center; margin: 3px 0; }
kbd { padding: 1px 6px; border: 1px solid #91a7ce; border-radius: 3px; background: #202d4a; color: white; }

@media (hover: none), (pointer: coarse) { .touch-controls { display: grid; } }
@media (max-width: 720px) { .controls { grid-template-columns: 1fr; font-size: 12px; } .touch-controls { gap: 6px; } .touch-group { gap: 4px; } }