* { 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: 448 / 576; width: min(96vw, calc(86vh * 448 / 576));
  background: #000; outline: none; box-shadow: 0 0 40px rgba(33,33,255,.25); }
.help { margin: 0; font-size: 12px; opacity: .7; text-align: center; padding: 0 8px; }
#touch { display: none; position: relative; width: 168px; height: 168px; }
#touch button { position: absolute; width: 56px; height: 56px; border-radius: 12px; border: 2px solid #2121ff;
  background: rgba(33,33,255,.15); color: #ffe600; font-size: 22px; user-select: none; -webkit-user-select: none; }
#touch button:active { background: rgba(33,33,255,.45); }
#touch .up { left: 56px; top: 0; } #touch .down { left: 56px; top: 112px; }
#touch .left { left: 0; top: 56px; } #touch .right { left: 112px; top: 56px; }
@media (pointer: coarse) {
  #touch { display: block; }
  #game { width: min(96vw, calc(62vh * 448 / 576)); }
  .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; }