:root{--bg: #eef1f5;--card: #ffffff;--text: #1c2733;--muted: #5b6b7c;--border: #d4dae2;--accent: #1668e3;--accent-dark: #0f4fb3;--won: #d01818}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5}.app{max-width:760px;margin:0 auto;padding:20px 16px 32px;display:flex;flex-direction:column;align-items:center;gap:12px}header{text-align:center}h1{margin:0;font-size:2.2rem;letter-spacing:.02em}.subtitle{margin:2px 0 0;color:var(--muted)}.toolbar,.palette{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}button{font:inherit;padding:6px 16px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);cursor:pointer;transition:background .12s,border-color .12s}button:hover{background:#f3f6fa;border-color:#b7c1cd}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}.palette .tool{display:inline-flex;align-items:center;gap:7px;padding:5px 12px}.palette .tool.active{border-color:var(--accent);box-shadow:0 0 0 2px #1668e340}.chip{width:14px;height:14px;border-radius:50%;border:1px solid #20242a;display:inline-block}.chip-ground{background:#c9cdd3;border-radius:3px}.chip-channel{background:#20242a}.chip-source{background:#fff}.chip-drain{background:#12b83c}.chip-player{background:#e02020}.status{margin:0;min-height:1.5em;max-width:560px;text-align:center;color:var(--muted)}.status.won{color:var(--won);font-weight:600}.board-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px;box-shadow:0 2px 10px #1c273314;max-width:100%}.board-canvas{display:block;touch-action:manipulation}footer{color:var(--muted);font-size:.85rem;text-align:center}footer a{color:var(--accent)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#141a228c;display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}.modal{background:var(--card);border-radius:12px;padding:20px 24px;max-width:620px;max-height:85vh;overflow-y:auto;box-shadow:0 10px 40px #0000004d}.modal h2{margin-top:0}.modal h3{margin-bottom:4px}.modal code{background:#eef1f5;border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:.9em;word-break:break-all}.modal kbd{background:#f3f6fa;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:0 6px;font-family:inherit}.keys{border-collapse:collapse}.keys td{padding:3px 14px 3px 0;white-space:nowrap}.c-red{color:#e02020}.c-green{color:#0d9432}.c-blue{color:#1668e3}.modal-footnote{color:var(--muted);font-size:.85rem}.modal-buttons{display:flex;justify-content:flex-end}