:root { color-scheme: light; --md-default-bg-color: #f2f7fb; --md-default-fg-color: #081727; --md-primary-fg-color: #041c35; --md-primary-fg-color--dark: #020812; --md-primary-fg-color--light: #09223d; --md-accent-fg-color: #0169fb; --md-code-bg-color: #eaf1f8; }
html[data-gamesm-theme="dark"] { color-scheme: dark; --md-default-bg-color: #030b16; --md-default-fg-color: #edf6ff; --md-default-fg-color--light: #b8cbe0; --md-primary-fg-color: #041c35; --md-primary-fg-color--dark: #020812; --md-primary-fg-color--light: #09223d; --md-accent-fg-color: #21e5ff; --md-code-bg-color: #071426; --md-code-fg-color: #edf6ff; }
body { background: var(--md-default-bg-color); color: var(--md-default-fg-color); }
.md-main, .md-sidebar, .md-content, .md-content__inner { background-color: var(--md-default-bg-color); }
.md-typeset { color: var(--md-default-fg-color); }
.md-typeset a { color: var(--md-accent-fg-color); }
.md-typeset table:not([class]) th { background: #09223d; color: #fff; }
html[data-gamesm-theme="dark"] .md-typeset table:not([class]) { background: #071426; color: #edf6ff; }
html[data-gamesm-theme="dark"] .md-typeset table:not([class]) td, html[data-gamesm-theme="dark"] .md-typeset table:not([class]) th { border-color: #1e3a5a; }
.gamesm-controls { margin: 16px 0 22px; padding: 12px 14px; border: 1px solid #bed0e3; border-radius: 8px; background: var(--md-default-bg-color); display: flex; flex-wrap: wrap; gap: 12px; }
html[data-gamesm-theme="dark"] .gamesm-controls { border-color: #1e3a5a; }
.gamesm-controls label { display: grid; grid-template-columns: auto minmax(130px, 1fr); align-items: center; gap: 9px; color: var(--md-default-fg-color); font-size: 13px; font-weight: 600; }
.gamesm-controls select { min-height: 38px; padding: 0 10px; border: 1px solid #bed0e3; border-radius: 6px; color: var(--md-default-fg-color); background: var(--md-default-bg-color); font: inherit; }
html[data-gamesm-theme="dark"] .gamesm-controls select { border-color: #315779; }
.gamesm-controls :focus-visible { outline: 2px solid #0169fb; outline-offset: 2px; }
.gamesm-intro, .gamesm-empty { margin: 18px 0; }
@media (max-width: 600px) { .gamesm-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; } .gamesm-controls label { grid-template-columns: 1fr; gap: 4px; } .gamesm-controls select { min-width: 0; width: 100%; } }