:root { color-scheme: dark; font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background:#14212b; color:#e6ebe7; }
body { margin:0; }
.site-content { box-sizing:border-box; width: min(100% - 40px, 800px); margin:0 auto; padding:56px 0; line-height:1.9; overflow-wrap:anywhere; }
.site-content h1 { font-size:clamp(1.8rem, 4vw, 2.6rem); line-height:1.4; letter-spacing:-.03em; margin:12px 0 24px; }
.site-content h2 { margin:42px 0 16px; font-size:1.45rem; line-height:1.5; }
.site-content h3 { margin:0 0 12px; font-size:1.08rem; line-height:1.6; }
.site-content p { margin:0 0 18px; color:#c5d0ce; }
a { color:#b2cb98; text-underline-offset:4px; }
a:hover { color:#d7e7c5; }
a:focus-visible { outline:2px solid #b2cb98; outline-offset:5px; }
.content-nav { max-width:1000px; margin:auto; padding:18px 20px; display:flex; gap:24px; align-items:center; justify-content:space-between; border-bottom:1px solid #304350; }
.content-nav a { text-decoration:none; }
.eyebrow { color:#b2cb98!important; font-size:.85rem; letter-spacing:.08em; }
.meta { font-size:.88rem; }
.toc { padding:22px 26px; border:1px solid #304350; border-radius:12px; background:#1c2d38; }
.toc ol { padding-left:22px; columns:2; column-gap:34px; margin-bottom:0; }
.toc li { margin-bottom:10px; break-inside:avoid; }
.faq-item { padding:24px 0 10px; border-top:1px solid #304350; scroll-margin-top:20px; }
.callout { border:1px solid #536c49; background:#1e302c; padding:24px; border-radius:12px; margin-top:40px; }
.play-link { display:inline-block; text-decoration:none; padding:10px 18px; background:#b2cb98; color:#14212b; font-weight:650; border-radius:6px; }
.play-link:hover { background:#d7e7c5; color:#14212b; }
.references { font-size:.9rem; border-top:1px solid #304350; margin-top:40px; padding-top:12px; }
section.site-content { border-top:1px solid #304350; }
@media(max-width:600px) { .toc ol { columns:1; } .site-content { padding:32px 0; } .content-nav { font-size:.9rem; gap:12px; } }
.game-intro { box-sizing:border-box; width:min(100% - 32px, 900px); margin:0 auto; padding:22px 0 16px; }
.game-intro h1 { font-size:clamp(1.35rem, 3vw, 1.9rem); line-height:1.25; margin:0 0 8px; letter-spacing:-.02em; }
.game-intro p { margin:0 0 14px; color:#b6c3c0; line-height:1.5; font-size:.95rem; }
.new-game-form { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:.9rem; }
.new-game-form select, .new-game-form button { min-height:44px; font:inherit; border-radius:6px; border:1px solid #3c5261; padding:8px 14px; }
.new-game-form select { color:#e6ebe7; background:#203440; }
.new-game-form button { cursor:pointer; background:#b2cb98; color:#14212b; font-weight:650; }
.site-footer { box-sizing:border-box; max-width:1000px; margin:auto; padding:24px 20px 40px; display:flex; flex-wrap:wrap; gap:20px; border-top:1px solid #304350; font-size:.9rem; }
.table-scroll { overflow-x:auto; }
.site-content table { border-collapse:collapse; font-size:.92rem; line-height:1.65; width:100%; }
.site-content th, .site-content td { padding:12px; border:1px solid #304350; text-align:left; vertical-align:top; }
.site-content th { background:#1c2d38; }
.site-content caption { text-align:left; margin-bottom:10px; color:#b6c3c0; }
.steps { padding-left:24px; }
.steps li { padding-left:6px; margin-bottom:16px; color:#c5d0ce; }
.example-boards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:24px 0; }
.example-boards figure { margin:0; padding:10px; border:1px solid #304350; border-radius:8px; }
.example-boards svg { display:block; width:100%; height:auto; }
.example-boards figcaption { font-size:.8rem; color:#c5d0ce; line-height:1.5; }
@media(max-width:600px) { .new-game-form label { font-size:.82rem; } .new-game-form select,.new-game-form button { padding:8px 10px; } .game-intro { padding-top:16px; } .example-boards { grid-template-columns:1fr; max-width:260px; margin-left:auto; margin-right:auto; } }
/* Reserve the client-rendered board's space before React mounts. */
#root { min-height:100dvh; }
/* Keep the whole board and its controls within a typical desktop viewport. */
@media(min-width:640px) {
  .reversi-stage .reversi-board, .reversi-stage .reversi-score, .reversi-stage .reversi-controls {
    max-width:min(640px, calc(100dvw - 2rem), max(320px, calc(100dvh - 400px)));
  }
}
@media(max-width:440px) { .reversi-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } }