:root { color-scheme: dark; }
html, body { margin: 0; height: 100%; background: #111; color: #ddd; font: 13px/1.4 system-ui, sans-serif; }
body { display: flex; flex-direction: column; }
.stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px; }
.stage { overflow: hidden; }
.stage canvas { display: block; image-rendering: pixelated; background: #000; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)); background: #1b1b1f; border-top: 1px solid #2a2a30; }
.bar .brand { font-weight: 700; letter-spacing: .08em; margin-right: 6px; color: #b5b8ff; }
.bar button, .bar select { background: #2a2a33; color: #eee; border: 1px solid #3a3a46; border-radius: 6px; padding: 5px 10px; font: inherit; cursor: pointer; }
.bar button.on { background: #4b50c9; border-color: #4b50c9; }
.bar .status { color: #9a9; margin-left: 6px; }
.help { margin-left: auto; position: relative; }
.help summary { cursor: pointer; padding: 5px 10px; border: 1px solid #3a3a46; border-radius: 6px; list-style: none; }
.help div { position: absolute; right: 0; bottom: calc(100% + 8px); width: min(420px, 90vw); background: #1b1b1f; border: 1px solid #3a3a46; border-radius: 8px; padding: 6px 14px; box-shadow: 0 10px 30px #0008; }
:fullscreen .bar { display: none; }
:fullscreen .stage { padding: 0; }
.help.games { margin-left: auto; }
.help.games + .help { margin-left: 0; }
.help.games div { width: min(480px, 92vw); max-height: 70vh; overflow: auto; }
.game { padding: 8px 0; border-top: 1px solid #2a2a30; }
.game.cur b { color: #b5b8ff; }
.game a { color: #cfd2ff; }
.game span, .game small { color: #999; }
.game p { margin: 3px 0; }
.muted { color: #999; }