* { 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) * 4 / 3)); aspect-ratio: 4 / 3; margin-top: 6px; }
canvas { width: 100%; height: 100%; display: block; background: #000; border: 1px solid #222; 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,20,.94); border: 2px solid #f60; padding: 20px 28px; text-align: center; color: #fff; }
#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: 24px; text-align: center; width: 22ch; max-width: 70vw; background: #000; color: #fff; border: 1px solid #f60; padding: 4px; }
#nameEntry button { font: inherit; font-size: 18px; margin-left: 8px; background: #f60; 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: 960px; justify-content: space-between; padding: 6px 10px; user-select: none; -webkit-user-select: none; }
#touch .grp { display: flex; gap: 8px; }
#touch button { width: 58px; height: 54px; font: inherit; font-size: 16px; background: #111; color: #fff; border: 1px solid #666; border-radius: 10px; touch-action: none; }
#touch button.on { background: #444; }
#touch button.wide { width: 76px; font-size: 17px; font-weight: bold; }
#touch button[data-k="drop"] { border-color: #f80; color: #fc8; }
#touch button[data-k="bomb"] { border-color: #f33; color: #f88; }
@media (pointer: coarse), (max-width: 900px) { #touch { display: flex; } }
@media (pointer: coarse) { .help { display: none; } }