* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: #ccc;
  font-family: "Courier New", monospace; overflow: hidden; touch-action: none; }
#wrap { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
#game { display: block; aspect-ratio: 560 / 640; width: min(96vw, calc(88vh * 560 / 640));
  background: #000; outline: none; box-shadow: 0 0 40px rgba(80,255,120,.18); }
.help { margin: 0; font-size: 12px; opacity: .7; text-align: center; padding: 0 8px; }
#touch { display: none; gap: 12px; }
#touch button { width: 84px; height: 64px; border-radius: 14px; border: 2px solid #3cff6a;
  background: rgba(60,255,106,.12); color: #3cff6a; font: bold 22px "Courier New", monospace;
  user-select: none; -webkit-user-select: none; }
#touch button.fire { width: 120px; color: #fff; border-color: #fff; background: rgba(255,255,255,.1); }
#touch button.on { background: rgba(60,255,106,.4); }
@media (pointer: coarse) {
  #touch { display: flex; }
  #game { width: min(96vw, calc(74vh * 560 / 640)); }
  .help { display: none; }
}
/* high score name entry */
#wrap { position: relative; }
.hs-entry { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 10;
  background: rgba(0,0,0,.92); border: 2px solid var(--hs, #ffe600); border-radius: 10px; padding: 18px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: "Courier New", monospace;
  color: #fff; min-width: 260px; text-align: center; touch-action: manipulation; }
.hs-title { color: var(--hs, #ffe600); font-size: 22px; font-weight: bold; }
.hs-score { font-size: 20px; }
.hs-entry label { font-size: 13px; color: #aaa; }
.hs-entry input { font: bold 26px "Courier New", monospace; width: 11ch; text-align: center; text-transform: uppercase;
  background: #000; color: var(--hs, #ffe600); border: 2px solid #555; border-radius: 6px; padding: 4px; outline: none; }
.hs-entry input:focus { border-color: var(--hs, #ffe600); }
.hs-entry button { font: bold 18px "Courier New", monospace; padding: 8px 28px; border-radius: 8px; cursor: pointer;
  background: var(--hs, #ffe600); color: #000; border: 0; }
.hs-err { color: #ff5050; font-size: 12px; min-height: 14px; }
.hs-hint { font-size: 11px; color: #888; }
.hs-entry { --hs: #3cff6a; }