:root{--bg: #0b1220;--panel: #121d2f;--line: #2a3c56;--ink: #e2e9f4;--dim: #90a2bd;--accent: #f2b880;--stone: #e8eef9;--gone: #33455f;--trail: #4cc9f0;--legal: #6fd3a8;--ghostline: #f2b880;--good: #6fd3a8;--bad: #f87171;--cell: 44px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#16273f 0%,var(--bg) 60%);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Helvetica Neue,sans-serif;line-height:1.65}main{max-width:900px;margin:0 auto;padding:2.2rem 1.2rem 4rem}header h1{font-size:2.1rem;margin:0 0 .5rem;letter-spacing:-.02em}header h1 span{color:var(--trail)}.sub{color:var(--dim);margin:0 0 1.4rem;font-size:.95rem}.sub strong{color:var(--ink)}.sub em{color:var(--accent);font-style:italic}#wrap{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;justify-content:center}h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin:0 0 8px;font-weight:600}h3.spaced{margin-top:20px}.stage{flex:0 0 auto}#boardwrap{padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;display:inline-block}#boardbox{position:relative;line-height:0}#board{display:grid;gap:0;border:3px solid #e6eefa;background:#0f1a2b}#trail{position:absolute;left:3px;top:3px;pointer-events:none}.cell{width:var(--cell);height:var(--cell);position:relative;display:flex;align-items:center;justify-content:center;background:#0f1a2b;border:1px solid #22334c;-webkit-user-select:none;user-select:none;touch-action:none;cursor:default;font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;color:#0b1220;transition:background .12s ease}.cell .disc{width:68%;height:68%;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent}.cell.stone{cursor:pointer}.cell.stone .disc{background:radial-gradient(circle at 35% 30%,#ffffff 0%,var(--stone) 45%,#a9b8cd 100%);box-shadow:0 1px 3px #0000008c}.cell.taken .disc{background:none;border:2px dashed #3d5273;color:#8fa8c9;box-shadow:none}.cell.head .disc{outline:3px solid var(--trail);outline-offset:2px;border-color:var(--trail);color:var(--trail)}.cell.legal{background:#13304a}.cell.legal .disc{outline:2px solid var(--legal);outline-offset:2px}.cell.rung .disc{outline:3px solid var(--ghostline);outline-offset:2px}.cell.flash{animation:flash .8s ease}@keyframes flash{0%,to{background:#0f1a2b}40%{background:#2f4c6b}}.side{flex:1 1 280px;min-width:260px;max-width:340px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.86rem}.panel .row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:var(--dim)}.panel .row b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}#status{margin-top:12px;min-height:3.2em;font-size:.88rem;color:var(--dim)}#status .win{color:var(--good)}#status .err{color:var(--bad)}.controls{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}label.sel,label.chk{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--dim)}select,button{font:inherit;font-size:.85rem;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer}button:hover,select:hover{border-color:var(--trail)}.notes{margin-top:2.6rem;font-size:.93rem}.notes h2{font-size:1.15rem;margin:2rem 0 .6rem;letter-spacing:-.01em}.notes p{color:#c4d1e4}.notes strong{color:var(--ink)}.notes em{color:var(--accent);font-style:normal}.notes table{border-collapse:collapse;width:100%;margin:.9rem 0 1.4rem;font-size:.85rem;font-variant-numeric:tabular-nums}.notes th,.notes td{border:1px solid var(--line);padding:5px 9px;text-align:right}.notes tr>th:first-child,.notes tr>td:first-child{text-align:left}.notes tr:first-child th{background:#16233a;color:var(--dim);font-weight:600;text-align:left}.notes pre{background:#0d1625;border:1px solid var(--line);border-radius:8px;padding:10px 12px;overflow-x:auto;font-size:.8rem;line-height:1.5;color:#c4d1e4}.notes a{color:var(--trail)}footer{margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--line);color:var(--dim);font-size:.82rem}footer a{color:var(--trail)}@media (max-width: 720px){:root{--cell: 34px}}