:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #131a27; color: #f2efe0; }
body { margin: 0; } main { max-width: 55rem; margin: auto; padding: 1.5rem; }
button, input, select { font: inherit; padding: .65rem; min-height: 44px; } button { margin: .25rem; cursor: pointer; }
a { color: #b2d9ff; } :focus-visible { outline: 3px solid #ffda6a; outline-offset: 4px; }
#game { padding: 1rem; border: 2px solid #8595b0; border-radius: .5rem; min-height: 6rem; } #current { white-space: pre-wrap; line-height: 1.6; }
details { margin-block: 1rem; } summary { cursor: pointer; padding: .7rem; } #history { max-height: 30rem; overflow: auto; } #history li { margin-bottom: .8rem; white-space: pre-wrap; }
dialog { max-width: min(90vw, 35rem); } dialog::backdrop { background: #000a; } dialog input { display: block; margin: .8rem 0; width: 90%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

[hidden] { display: none !important; }
section { margin-block: 1.4rem; }
h1 { margin-bottom: .5rem; } h2 { font-size: 1.25rem; }
#play-panel, #account-panel { padding: 1rem; border: 1px solid #52647d; border-radius: .6rem; background: #1b2638; }
#account-status { min-height: 1.5em; }
button:disabled { cursor: default; opacity: .65; }
#controls { display: flex; flex-wrap: wrap; gap: .2rem; }
#start { font-weight: 650; }
.migration-warning { border: .25rem solid #ffd166; padding: 1.2rem; background: #352600; color: #fff; }
.migration-warning h2 { font-size: 1.6rem; color: #ffd166; }
.migration-warning a { color: #fff; text-decoration: underline; }
@media (max-width: 40rem) { main { padding: .8rem; } button, select, input { max-width: 100%; box-sizing: border-box; } #account-panel button { display: block; width: 100%; margin-inline: 0; } }