:root{--bg:#f4f1ea;--panel:#fffdf8;--ink:#2b2620;--muted:#7a7065;--line:#ddd4c4;--accent:#2f6f8f;--sq-light:#ecdcb9;--sq-dark:#b8915f;--sq-last:#ffd64073;--sq-selected:#2f6f8f8c;--sq-zone:#2f6f8f29;--target:#1e3c5061;--check:#dc1e1ed9;--warn-bg:#fff3cd;--warn-ink:#6b4e00;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--ink);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#1d1b18;--panel:#282521;--ink:#ece6dc;--muted:#a59c90;--line:#3d3832;--accent:#6fb3d2;--sq-light:#c9b48f;--sq-dark:#8a6a43;--warn-bg:#3d3313;--warn-ink:#f2d98a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;margin:0}button{font:inherit;color:inherit}.app{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:20px;padding:16px;display:flex}.play-area{--cell:min(calc((100vw - 70px) / (var(--files,7) + 2)), calc((100vh - 210px) / (var(--ranks,9) + 2)), 68px);--coords:18px;grid-template-columns:var(--cell) auto var(--cell);grid-template-areas:".far-player."".far-reserve.""far-converts board near-converts"".near-reserve."".near-player.";justify-content:center;gap:6px;display:grid}.play-area .board-frame{grid-area:board}.board-frame{justify-content:center;padding:0 0 18px 18px;display:flex;position:relative}.board{width:calc(var(--cell) * var(--files,9));height:calc(var(--cell) * var(--ranks,9));grid-template-rows:repeat(var(--ranks,9), 1fr);-webkit-user-select:none;user-select:none;border:2px solid #5a4630;border-radius:3px;display:grid;box-shadow:0 2px 10px #0000002e}.board-row{grid-template-columns:repeat(var(--files,9), 1fr);display:grid}.square{cursor:default;outline-offset:-3px;border:0;justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:relative}.board.interactive .square{cursor:pointer}.square.light{background:var(--sq-light)}.square.dark{background:var(--sq-dark)}.square:before{content:"";pointer-events:none;position:absolute;inset:0}.square.zone:before{background:var(--sq-zone)}.square.last:before{background:var(--sq-last)}.square.selected:before{background:var(--sq-selected)}.square.check:before{background:radial-gradient(circle, var(--check) 0%, #dc1e1e59 45%, transparent 72%)}.square.target:after{content:"";background:var(--target);pointer-events:none;border-radius:50%;width:30%;height:30%;position:absolute}.square.target.capture:after{border:5px solid var(--target);background:0 0;width:92%;height:92%}.square:hover.target:after{background:#1e3c508c}.square:hover.target.capture:after{background:0 0;border-color:#1e3c5099}.coord{color:var(--muted);pointer-events:none;font-size:12px;font-weight:600;position:absolute}.coord.rank{top:50%;left:-16px;transform:translateY(-50%)}.coord.file{bottom:-18px;left:50%;transform:translate(-50%)}.piece{z-index:1;pointer-events:none;width:92%;height:92%;position:relative}.piece.rotated{transform:rotate(180deg)}.piece.physical{filter:sepia(.35)saturate(1.3)drop-shadow(0 1px 1px #00000059)}.player-bar{margin-left:var(--coords);align-items:baseline;gap:6px;min-width:0;font-weight:600;display:flex}.player-bar.far{grid-area:far-player}.player-bar.near{grid-area:near-player}.player-bar .side-dot{flex:none;align-self:center}.player-bar .player-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.player-side,.to-move{white-space:nowrap;font-size:11px;font-weight:500}.player-side{color:var(--muted)}.to-move{background:var(--accent);color:#fff;border-radius:9px;margin-left:auto;padding:0 8px}.side-dot{border:1.5px solid #333;border-radius:50%;width:12px;height:12px;display:inline-block}.side-dot.w{background:#fff}.side-dot.b{background:#222}.pool{--edge:var(--line);--edge-width:1px;position:relative}.pool.active{--edge:var(--accent);--edge-width:2px}.pool-label{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:10px}.pool-pieces{display:flex}.pool-slot{width:var(--cell);height:var(--cell);flex:none;position:relative}.pool-piece{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:0;display:flex}.pool-piece:disabled{cursor:default}.pool.active .pool-piece:not(:disabled):hover{border-color:var(--accent)}.pool-piece.selected{background:var(--sq-selected);border-color:var(--accent)}.pool-piece .count{z-index:2;background:var(--accent);color:#fff;text-align:center;border-radius:8px;min-width:16px;height:16px;padding:0 4px;font-size:11px;font-weight:700;line-height:16px;position:absolute;bottom:0;right:0}.pool.reserve{margin-left:var(--coords);background:var(--panel);box-shadow:inset 0 0 0 var(--edge-width) var(--edge);min-height:calc(var(--cell) + 6px);border-radius:12px;align-items:center;gap:8px;padding:3px 8px;display:flex}.pool.reserve.far{grid-area:far-reserve}.pool.reserve.near{grid-area:near-reserve}.pool.reserve .pool-pieces{flex-wrap:wrap;flex:1;justify-content:center}.pool.converts{--tip:calc(var(--cell) * .5);--shape:polygon(50% 0, 100% var(--tip), 100% 100%, 0 100%, 0 var(--tip));width:var(--cell);padding:var(--tip) 0 3px}.pool.converts.near{margin-bottom:var(--coords);grid-area:near-converts;align-self:end}.pool.converts.far{--shape:polygon(0 0, 100% 0, 100% calc(100% - var(--tip)), 50% 100%, 0 calc(100% - var(--tip)));padding:3px 0 var(--tip);grid-area:far-converts;align-self:start}.pool.converts:before,.pool.converts:after{content:"";background:var(--edge);clip-path:var(--shape);position:absolute;inset:0}.pool.converts:after{inset:var(--edge-width);background:var(--panel)}.pool.converts .pool-pieces{z-index:1;flex-direction:column;position:relative}.pool.converts.near .pool-pieces{flex-direction:column-reverse}.pool.converts .pool-label{writing-mode:vertical-rl;position:absolute;left:50%;transform:translate(-50%)}.pool.converts.near .pool-label{bottom:calc(100% + 4px)}.pool.converts.far .pool-label{top:calc(100% + 4px)}.side-panel{flex-direction:column;gap:12px;width:320px;max-width:100%;display:flex}.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px}.panel h1{margin:0 0 2px;font-size:20px}.subtitle{color:var(--muted);margin:0;font-size:13px}.status{font-weight:600}.status .in-check{color:#c62828}.warning{background:var(--warn-bg);color:var(--warn-ink);border-radius:4px;margin-top:8px;padding:6px 8px;font-size:13px}.viewing{color:var(--muted);justify-content:space-between;align-items:center;gap:8px;margin-top:8px;font-size:13px;display:flex}.controls{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.btn{border:1px solid var(--line);background:var(--bg);cursor:pointer;border-radius:5px;padding:6px 8px;font-size:13px}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.45;cursor:default}.btn.wide{grid-column:span 3}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.toggles{flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:13px;display:flex}.toggles label{cursor:pointer;align-items:center;gap:4px;display:flex}.moves{font-variant-numeric:tabular-nums;max-height:300px;overflow-y:auto}.moves table{border-collapse:collapse;width:100%;font-size:14px}.moves td{padding:1px 4px}.moves td.num{color:var(--muted);text-align:right;width:36px}.ply{cursor:pointer;text-align:left;background:0 0;border:0;border-radius:3px;width:100%;padding:1px 6px}.ply:hover{background:#7f7f7f26}.ply.current{background:var(--accent);color:#fff}.moves-empty{color:var(--muted);font-size:13px;font-style:italic}.result-line{text-align:center;margin-top:6px;font-weight:600}.footer{color:var(--muted);font-size:11px}.footer a{color:inherit}.presets{flex-wrap:wrap;gap:6px;margin-bottom:12px;display:flex}.preset{border:1px solid var(--line);background:var(--bg);cursor:pointer;border-radius:14px;padding:5px 10px;font-size:13px}.preset.selected{background:var(--accent);border-color:var(--accent);color:#fff}.setup-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 14px;display:grid}.setup-grid label{color:var(--muted);flex-direction:column;gap:3px;font-size:12px;font-weight:600;display:flex}.setup-grid select,.setup-grid input{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:4px 6px;font-size:14px;font-weight:400}.setup-facts{margin:14px 0 0;padding-left:18px;font-size:13px;line-height:1.45}.backdrop{z-index:10;background:#00000073;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.dialog{background:var(--panel);color:var(--ink);border-radius:8px;width:100%;max-width:560px;max-height:90vh;padding:18px 20px;overflow-y:auto;box-shadow:0 10px 40px #00000059}.dialog h2{margin:0 0 8px;font-size:20px}.dialog .actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:14px;display:flex}.dialog textarea{border:1px solid var(--line);background:var(--bg);width:100%;color:var(--ink);resize:vertical;border-radius:4px;padding:6px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}.dialog .field{margin-top:10px}.dialog .field-head{justify-content:space-between;align-items:center;margin-bottom:3px;font-size:13px;font-weight:600;display:flex}.error{color:#c62828;white-space:pre-wrap;margin-top:6px;font-size:13px}.ok{color:#2e7d32;font-size:13px}@media (width<=720px){.side-panel{width:100%}}a{color:var(--accent)}a.btn{color:var(--ink);text-align:center;text-decoration:none;display:inline-block}a.btn.primary{color:#fff}button.link{color:var(--accent);cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.page{max-width:720px;margin:0 auto;padding:20px 16px 48px;line-height:1.5}.site-nav{gap:14px;margin-bottom:6px;font-size:13px;display:flex}.notice{background:var(--panel);border:1px solid var(--line);border-radius:6px;margin-top:24px;padding:16px}.home h1{margin:24px 0 0;font-size:34px}.tagline{color:var(--muted);margin:4px 0 16px;font-style:italic}.home-actions{flex-wrap:wrap;align-items:center;gap:10px 14px;margin:24px 0 10px;display:flex}.btn.big{padding:10px 18px;font-size:16px}.games-list{background:var(--panel);border:1px solid var(--line);border-radius:6px;margin:0;padding:0;list-style:none}.games-list li{justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;display:flex}.games-list li+li{border-top:1px solid var(--line)}.game-text{overflow-wrap:anywhere;min-width:0}.game-detail,.games-empty{color:var(--muted)}.games-empty{margin:0;font-size:14px}.games-more{margin-top:6px;font-size:14px}.tag{border:1px solid var(--line);color:var(--muted);white-space:nowrap;border-radius:9px;padding:0 6px;font-size:11px;display:inline-block}.games h2,.leaderboard h2{margin:28px 0 8px;font-size:18px}.leaderboard .rank{min-width:26px;color:var(--muted);display:inline-block}.leaderboard .subtitle{margin-top:6px}.tag.yours{border-color:var(--accent);color:var(--accent)}.quick-rules{background:var(--panel);border:1px solid var(--line);border-radius:8px;margin:16px 0 28px;padding:16px 18px}.quick-rules>p:first-child{margin-top:0}.quick-rules>p:last-child{margin-bottom:0}.quick-rules-points{grid-template-columns:repeat(6,1fr);gap:10px;margin:12px 0;padding:0;list-style:none;display:grid}.quick-rules-points li{background:var(--bg);border:1px solid var(--line);border-radius:6px;grid-column:span 3;padding:12px 14px}.quick-rules-points li.main{grid-column:span 2}.quick-rules-points img{background:var(--sq-light);border-radius:4px;width:40px;height:40px;margin-bottom:8px;padding:2px;display:block}.quick-rules-points li:nth-child(2n) img{background:var(--sq-dark)}.quick-rules-points h3{margin:0 0 4px;font-size:15px;line-height:1.3}.quick-rules-points p{color:var(--muted);margin:0;font-size:14px}@media (width<=720px){.quick-rules-points{grid-template-columns:1fr}.quick-rules-points li,.quick-rules-points li.main{grid-column:auto}.quick-rules-points li.main{align-items:flex-start;gap:10px;display:flex}.quick-rules-points img{flex:none;margin:2px 0 0}}.whoami{margin-top:24px;font-size:14px}.name-form{flex-direction:column;gap:6px;display:flex}.name-form label{font-weight:600}.name-form input,.chat-form input,.invite input{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:4px;min-width:0;padding:6px 8px;font-size:16px}.side-choice{align-items:baseline;gap:10px;display:flex}.side-choice-label{font-size:13px;font-weight:600}.advanced-toggle{font-size:13px}.advanced{margin-top:12px}.prose h1{margin-bottom:0;font-size:30px}.prose h2{border-bottom:1px solid var(--line);margin-top:28px;padding-bottom:2px;font-size:20px}.prose h3{margin-bottom:4px;font-size:16px}.prose table{border-collapse:collapse;width:100%;font-size:14px}.prose th,.prose td{border:1px solid var(--line);text-align:left;vertical-align:top;padding:5px 8px}.prose hr{border:0;border-top:1px solid var(--line);margin:28px 0 12px}.seats{flex-direction:column;gap:6px;margin-top:10px;display:flex}.seat{align-items:center;gap:6px;min-height:30px;font-size:14px;display:flex}.seat-side{width:44px;color:var(--muted);font-size:13px}.seat-name{overflow-wrap:anywhere;font-weight:600}.seat-rating{color:var(--muted);white-space:nowrap;font-size:13px}.seat-rating .up,.rating-line .up{color:#3f9d5a}.seat-rating .down,.rating-line .down{color:#c9584c}.rating-line{text-align:center;margin:8px 0 0;font-size:14px}.seat-empty{color:var(--muted);font-style:italic}.badge{border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:0 6px;font-size:11px}.presence{background:var(--line);border-radius:50%;flex:none;width:8px;height:8px;margin-left:auto}.presence.on{background:#3a9a4a}.watchers{margin-top:8px}.invite{margin-top:12px;font-size:13px}.invite-row{gap:6px;margin-top:4px;display:flex}.invite-row input{flex:1;font-size:13px}.offer{border:1px solid var(--accent);border-radius:4px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding:6px 8px;font-size:13px;display:flex}.offer-actions{gap:6px;display:flex}.chat-messages{min-height:60px;max-height:220px;font-size:14px;overflow-y:auto}.chat-message{overflow-wrap:anywhere;margin:0 0 4px}.chat-author{font-weight:600}.chat-author.me{color:var(--accent)}.chat-message.spectators{color:var(--muted)}.chat-tag{text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--line);vertical-align:1px;border-radius:3px;margin-right:5px;padding:0 4px;font-size:10px}.chat-form{gap:6px;margin-top:8px;display:flex}.chat-form input{flex:1}@media (width<=720px){.app{gap:12px;padding:8px}.btn{padding:9px 8px;font-size:14px}.moves{max-height:180px}.dialog{padding:14px}}