html, body { height: 100%; margin: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #fff; color: #111; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 12px; }
.top h1 { margin: 0 0 8px; }

.panel { border: 1px solid #ddd; border-radius: 10px; padding: 10px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.help { margin: 8px 0 0; }

.status { margin-top: 8px; padding: 8px; border-left: 4px solid #222; background: #f6f6f6; min-height: 20px; }

#game { display: block; width: 100%; height: min(70vh, 640px); border: 2px solid #111; border-radius: 12px; margin-top: 12px; outline: none; }

.foot { margin-top: 10px; color: #444; }

.sr-only {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}