/* The preview page around the game. None of this exists on the device. */
:root { --scale: 2; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: #19171b; color: #d9d3dc; font: 15px/1.5 system-ui, sans-serif; }
main { max-width: 1000px; margin: 0 auto; padding: 16px 12px 48px; display: grid; justify-items: center; gap: 20px; }
h1 { font-size: 17px; font-weight: 600; margin: 0; justify-self: start; }
h1 span, h2 span { font-weight: 400; color: #8f8794; margin-left: 6px; }
h2 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }

.device { width: calc(320px * var(--scale)); }
#screen { display: block; width: calc(320px * var(--scale)); height: calc(240px * var(--scale)); image-rendering: pixelated; image-rendering: crisp-edges; background: #000; outline: 1px solid #3a3540; }
/* three buttons under the screen, each below its label on the screen's bottom strip */
.buttons { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; }
.buttons button { justify-self: center; width: min(88px, 90%); height: 44px; border-radius: 8px; border: 1px solid #55505b; background: #2c2830; color: #eee9f0; font: inherit; cursor: pointer; touch-action: none; user-select: none; display: flex; align-items: center; justify-content: center; gap: 8px; }
.buttons button.down { background: #4a4350; transform: translateY(1px); }
.buttons button:focus-visible, select:focus-visible, .tools button:focus-visible { outline: 2px solid #ff9db0; outline-offset: 2px; }
kbd { font: 11px ui-monospace, monospace; color: #9a92a0; border: 1px solid #4a4550; border-radius: 3px; padding: 0 4px; }

section { width: 100%; max-width: 640px; }
section p { margin: 8px 0; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 4px 12px 4px 0; border-top: 1px solid #2e2a32; vertical-align: top; }
th { width: 2em; }
td:last-child { color: #8f8794; white-space: nowrap; }
.tools { border-top: 1px solid #3a3540; padding-top: 16px; }
.tools label { margin-right: 16px; white-space: nowrap; }
.tools button, select { font: inherit; color: inherit; background: #2c2830; border: 1px solid #55505b; border-radius: 6px; padding: 4px 10px; margin: 2px 0; }
.tools button { cursor: pointer; }
.note, #saved { color: #8f8794; }
@media (max-width: 420px) { td:last-child { white-space: normal; } }