:root { color-scheme: dark; font-family: system-ui, "Microsoft YaHei", sans-serif; background: #101214; color: #c9cdd1; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
main { height: 100%; height: 100dvh; display: grid; grid-template-rows: minmax(0, 1fr) 38px; }
.arena { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #000; }
#game { display: block; width: 0; height: 0; outline: none; }
#game:focus-visible { outline: 1px solid #e7ba62; outline-offset: -1px; }
footer { display: flex; align-items: center; gap: 10px; padding: 4px 8px; min-width: 0; border-top: 1px solid #282c30; }
.help { min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; }
.help::-webkit-scrollbar { display: none; }
#key-help { margin: 0; white-space: nowrap; font-size: 12px; line-height: 28px; }
button { flex: none; padding: 3px 12px; border: 1px solid #525451; border-radius: 4px; background: #242725; color: #e7d4ac; font: inherit; font-size: 12px; line-height: 20px; cursor: pointer; }
button:hover { background: #383b35; }
button:focus-visible { outline: 2px solid #e7ba62; outline-offset: 1px; }
button:disabled { opacity: .45; cursor: wait; }
[hidden] { display: none !important; }
#loading, #paused { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: #0d1013ed; padding: 16px; }
#loading h1 { font-size: 18px; font-weight: 500; }
#loading p { max-width: 36em; font-size: 13px; color: #9ca5ac; overflow-wrap: anywhere; }
progress { width: min(200px, 65vw); height: 5px; accent-color: #e7ba62; }
#percentage { margin-left: 10px; font-size: 12px; }
#paused { background: #000b; cursor: pointer; }
#paused span { font-size: 20px; }
#paused small { margin-top: 10px; color: #b5bcc2; }
@media (max-width: 600px) { footer { gap: 6px; padding-inline: 5px; } #key-help { font-size: 11px; } button { padding-inline: 9px; } }