html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #f4f3ee; }
/* Keep the host's dark title readable even before it supplies a theme. */
html[data-theme="dark"], html[data-theme="dark"] body { background: #07061a; }
body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
#root { position: relative; width: 100vw; height: 100vh; min-height: 300px; overflow: hidden; }
#game { position: absolute; display: block; image-rendering: pixelated; image-rendering: crisp-edges; outline: none; touch-action: none; }
.ui { position: absolute; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 2px; background: transparent; color: transparent; font-size: 0; overflow: hidden; cursor: pointer; }
.ui[hidden] { display: none; }
.ui:focus-visible, .ui:focus-within { outline: 2px dashed #fff7dc; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(16, 37, 26, 0.7); }
.ui input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.message { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); box-sizing: border-box; max-width: min(92vw, 520px); margin: 0; padding: 8px 14px; border: 2px solid #0d0a2a; background: rgba(8, 6, 30, 0.88); color: #e9fffb; font: 600 16px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; pointer-events: none; }
.message:empty { display: none; }
.message.error { color: #ffc2c2; border-color: #7c1d22; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }