* { box-sizing: border-box; }
html, body { margin: 0; background: #000; color: #ddd; font-family: "Courier New", monospace; }
body { display: flex; flex-direction: column; align-items: center; min-height: 100vh; }
#wrap { position: relative; width: min(100vw, calc((100vh - 110px) * 3 / 4)); aspect-ratio: 3 / 4; margin-top: 6px; }
canvas { width: 100%; height: 100%; display: block; background: #000; border: 1px solid #222; image-rendering: pixelated; touch-action: none; }
.help { font-size: 12px; color: #777; text-align: center; margin: 6px; }
#nameEntry { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.92); border: 2px solid #ff0; padding: 20px 24px; text-align: center; color: #fff; width: max-content; max-width: 94%; }
#nameEntry h2 { margin: 0 0 8px; letter-spacing: 4px; color: #ff0; }
#nameEntry label { display: block; font-size: 13px; margin: 8px 0; color: #aaa; }
#nameEntry input { font: inherit; font-size: 22px; text-align: center; width: 22ch; max-width: 70vw; background: #000; color: #fff; border: 1px solid #fff; padding: 4px; }
#nameEntry button { font: inherit; font-size: 18px; margin: 8px 0 0 8px; background: #ff0; color: #000; border: 0; padding: 6px 14px; cursor: pointer; }
.err { color: #f66; min-height: 1em; font-size: 13px; margin: 6px 0 0; }
.hidden { display: none !important; }
#touch { display: none; width: 100%; max-width: 600px; justify-content: space-between; padding: 6px 10px; user-select: none; -webkit-user-select: none; }
#touch .grp { display: flex; gap: 10px; }
#touch button { width: 72px; height: 60px; font: inherit; font-size: 18px; background: #111; color: #fff; border: 1px solid #666; border-radius: 10px; touch-action: none; }
#touch button.on { background: #444; }
@media (pointer: coarse) { #touch { display: flex; } .help { display: none; } }