:root{--bg: #0e1116;--bg-2: #151a22;--panel: #171d26;--panel-2: #1d2430;--line: #2a3340;--ink: #e6edf5;--ink-dim: #93a1b3;--accent: #4ea86b;--accent-dim: #2f6b45;--warn: #d9884a;--danger: #c85a52;--arcane: #9b6fd0;--radius: 10px;--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;--sans: system-ui, -apple-system, "Segoe UI", Inter, sans-serif;--display: var(--sans);--board-inner: #141a23;--board-outer: #0c0f14;--board-lattice: rgba(255, 255, 255, .045);--board-lattice-strong: rgba(255, 255, 255, .1);--board-trail: rgba(120, 180, 255, .35);--board-selected: #f2c14e;--board-hover: rgba(255, 255, 255, .22);--board-peek: #5ec8d8;--board-stack-badge: rgba(155, 111, 208, .92);--board-stack-badge-ink: #0e1116;--hl-move: rgba(78, 168, 107, .95);--hl-move-fill: rgba(78, 168, 107, .13);--hl-ability: rgba(217, 136, 74, .95);--hl-ability-fill: rgba(217, 136, 74, .14);--panel-image: none;--body-image: none;--card-shadow: 0 24px 60px rgba(0, 0, 0, .5);--btn-radius: 7px;--btn-pad: 5px 10px;--chip-pad: 5px 13px;--card-radius: 14px;--menu-card-radius: 12px;--menu-card-pad: 16px 18px;--soft-radius: 11px;--ring-radius: 8px;--input-radius: 8px;--action-pad: 7px 9px;--face-pad: 5px 6px;--skin-pad: 4px 11px}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background-color:var(--bg);background-image:var(--body-image);color:var(--ink);font:14px/1.45 var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}#app{display:flex;flex-direction:column;height:100vh;height:100dvh;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#app input,#app textarea,#app .code-display,#app [contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}.topbar{display:flex;align-items:center;gap:20px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto}.brand{display:flex;align-items:center;gap:9px}.brand .mark{color:var(--arcane);font-size:18px}.brand .title{font-weight:650;letter-spacing:.14em;text-transform:uppercase;font-size:13px;font-family:var(--display)}.status{flex:1;color:var(--ink-dim);font-size:13px}.status strong{color:var(--ink);font-weight:600}.status .win{color:var(--accent);font-weight:600}.controls{display:flex;align-items:center;gap:10px}.ctl{display:flex;align-items:center;gap:6px;color:var(--ink-dim);font-size:12px}select,.btn{background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:var(--btn-radius);padding:var(--btn-pad);font:inherit;font-size:12.5px;cursor:pointer}.btn:hover,select:hover{border-color:#3c4a5c;background:#232c39}.btn:disabled{opacity:.4;cursor:default}.layout{display:flex;flex:1;min-height:0}.rail{background:var(--panel);display:flex;flex-direction:column;min-height:0}.rail-left{width:238px;border-right:1px solid var(--line);flex:0 0 238px}.rail-right{width:292px;border-left:1px solid var(--line);flex:0 0 292px}.rail-head{padding:11px 14px 8px;border-bottom:1px solid var(--line);flex:0 0 auto}.rail-head h2{margin:0;font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}.face-toggle{display:flex;gap:4px;margin-top:9px}.face-toggle button{flex:1;padding:var(--face-pad);font-size:11.5px;background:var(--panel-2);color:var(--ink-dim);border:1px solid var(--line);border-radius:6px;cursor:pointer}.face-toggle button.active{background:var(--accent-dim);color:#eaf7ee;border-color:var(--accent)}.face-toggle button:disabled{opacity:.35;cursor:default}.hand{overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:12px}.hand-group h3{margin:0 0 6px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);font-weight:600}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.tile{position:relative;aspect-ratio:.866;padding:0;background:transparent;border:none;cursor:pointer;border-radius:6px;display:grid;place-items:center;transition:transform .08s ease}.tile canvas{width:100%;height:100%;display:block}.tile:hover{transform:translateY(-2px)}.tile.selected:after{content:"";position:absolute;inset:-3px;border:2px solid var(--accent);border-radius:var(--ring-radius)}.tile.unavailable{opacity:.28}.tile.unavailable:hover{transform:none}.tile.peeking:after{content:"";position:absolute;inset:-3px;border:2px dashed var(--board-peek);border-radius:var(--ring-radius)}.tile-badge{position:absolute;right:6px;bottom:4px;font:600 9px/1 var(--mono);letter-spacing:.06em;color:#7d8ea3;background:#0e1116b8;border-radius:4px;padding:2px 3px;pointer-events:none}.board-wrap{flex:1;position:relative;min-width:0;background:var(--bg)}#board{display:block;width:100%;height:100%;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}#board.dragging{cursor:grabbing}.board-actions{position:absolute;left:50%;transform:translate(-50%);top:10px;z-index:40;display:flex;flex-direction:column;gap:6px;width:max-content;max-width:min(340px,calc(100% - 20px));padding:7px;border-radius:var(--card-radius);background:var(--panel-2);border:1px solid var(--line);box-shadow:0 10px 26px #0006}.board-actions[hidden]{display:none}.board-actions button{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:var(--action-pad);border-radius:var(--soft-radius);font:600 13px/1.25 var(--ui);text-align:left;cursor:pointer;color:var(--ink);background:var(--panel);border:1px solid var(--line)}.board-actions button:hover{border-color:var(--accent)}.board-actions button.active{background:var(--accent-dim);border-color:var(--accent);color:#eaf7ee}.board-actions .ba-count{flex:none;min-width:20px;padding:1px 6px;border-radius:999px;font:600 11px/1.5 var(--ui);text-align:center;background:var(--panel-2);color:var(--ink-dim)}.board-actions button.active .ba-count{background:#0000003d;color:#eaf7ee}.board-actions .ba-note{margin:1px 2px 0;font:400 11.5px/1.45 var(--ui);color:var(--ink-dim)}.hint{position:absolute;left:50%;bottom:14px;transform:translate(-50%);background:#171d26f0;border:1px solid var(--line);border-radius:999px;padding:6px 15px;font-size:12.5px;color:var(--ink-dim);pointer-events:none;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}.inspect{padding:12px 14px;border-bottom:1px solid var(--line);flex:0 0 auto;max-height:46%;overflow-y:auto}.inspect h3{margin:0 0 2px;font-size:14px}.inspect .sub{color:var(--ink-dim);font-size:12px;margin:0 0 10px}.inspect .ability{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--soft-radius);padding:9px 10px;margin-bottom:8px}.inspect .ability b{display:block;font-size:12.5px;margin-bottom:3px;color:var(--warn)}.inspect .ability p{margin:0;font-size:11.8px;color:var(--ink-dim);line-height:1.4}.inspect .muted{color:var(--ink-dim);font-size:12.5px;margin:10px 0 0}.inspect .ability{margin-top:10px}.action-list{display:flex;flex-direction:column;gap:5px;margin-top:8px}.action-list button{text-align:left;padding:var(--action-pad);font-size:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--soft-radius);color:var(--ink);cursor:pointer}.action-list button:hover{border-color:var(--warn)}.action-list button.active{border-color:var(--warn);background:#2c2318}.log{flex:1;min-height:0;overflow-y:auto;margin:0;padding:8px 14px 18px 30px;font-size:12px;color:var(--ink-dim);font-family:var(--mono)}.log li{margin-bottom:3px;line-height:1.35}.log li.white-ply{color:#cfe3d6}.log li.black-ply{color:#a9b7c9}.log li em{color:var(--warn);font-style:normal}.hover-card{position:fixed;z-index:60;pointer-events:none;width:288px;max-width:78vw;background:#171d26fb;border:1px solid var(--line);border-radius:var(--soft-radius);padding:11px 13px;box-shadow:0 16px 40px #0000008c}.hover-card[hidden]{display:none}.hover-card h4,.inspect h4{margin:0 0 2px;font-size:14px;font-weight:650}.hover-card .sub,.inspect .sub{margin:0 0 7px;font-size:11.5px;color:var(--ink-dim);letter-spacing:.01em}.hover-card .move,.inspect .move{margin:0 0 8px;font-size:12.2px;color:#c3d2e2}.hover-card .rev,.inspect .rev{margin:7px 0 0;font-size:11.5px;color:var(--ink-dim)}.hover-card .rev b,.inspect .rev b{color:#b9c8da;font-weight:600}.hover-card .warn-line,.inspect .warn-line{margin:7px 0 0;font-size:11.5px;color:var(--warn)}.hover-card .ability{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 9px;margin:0}.hover-card .ability b{display:block;font-size:12px;margin-bottom:3px;color:var(--warn)}.hover-card .ability p{margin:0;font-size:11.6px;color:var(--ink-dim);line-height:1.42}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#080b0fc2;backdrop-filter:blur(2px);z-index:20}.overlay[hidden]{display:none}.card{background-color:var(--panel);background-image:var(--panel-image);border:1px solid var(--line);border-radius:var(--card-radius);padding:20px 22px;max-width:620px;max-height:82vh;overflow-y:auto;box-shadow:var(--card-shadow)}.card h2{margin:0 0 4px;font-size:17px}.card>p{color:var(--ink-dim);font-size:13px;margin:0 0 14px}.card h4{margin:16px 0 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--warn)}.card ul{margin:0;padding-left:18px;color:var(--ink-dim);font-size:12.8px}.card li{margin-bottom:4px}.card .row{display:flex;gap:10px;margin-top:18px;justify-content:flex-end}.menu-screen{position:fixed;inset:0;z-index:80;display:grid;place-items:center;overflow-y:auto;background-color:var(--board-outer);background-image:var(--menu-image, radial-gradient(circle at 50% 35%, #17202b 0%, #0b0e13 70%))}.menu-corner{position:fixed;top:14px;right:16px;z-index:1}.menu-screen[hidden]{display:none}.menu-panel{width:min(520px,92vw);padding:32px 0 40px}.menu-brand{display:flex;align-items:center;gap:12px;justify-content:center}.menu-brand .mark{color:var(--arcane);font-size:26px}.menu-brand h1{margin:0;font-size:22px;font-weight:650;letter-spacing:.2em;text-transform:uppercase;font-family:var(--display)}.menu-tagline{text-align:center;color:var(--ink-dim);font-size:13px;margin:10px 0 26px}.menu-card{background-color:var(--panel);background-image:var(--panel-image);border:1px solid var(--line);border-radius:var(--menu-card-radius);padding:var(--menu-card-pad);margin-bottom:12px;box-shadow:var(--card-shadow)}.menu-card h2{margin:0 0 4px;font-size:15px;font-weight:650}.menu-card>p{margin:0 0 12px;font-size:12.5px;color:var(--ink-dim);line-height:1.45}.menu-difficulty{display:flex;gap:6px;margin-bottom:12px}.chip{padding:var(--chip-pad);font:inherit;font-size:12px;cursor:pointer;background:var(--panel-2);color:var(--ink-dim);border:1px solid var(--line);border-radius:999px}.chip.active{background:var(--accent-dim);border-color:var(--accent);color:#eaf7ee}.menu-join{display:flex;gap:8px}.code-input{flex:1;padding:8px 12px;font:600 16px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:var(--input-radius)}.code-input:focus{outline:none;border-color:var(--accent)}.menu-error{margin:8px 0 0;font-size:12px;color:var(--danger);min-height:16px}.menu-back{display:block;width:100%;margin-top:8px}.menu-actions{display:flex;gap:8px;flex-wrap:wrap}.menu-wide{display:block;width:100%;margin-top:8px}.code-blob{display:block;width:100%;height:96px;resize:vertical;margin:12px 0 8px;padding:10px 12px;font:11.5px/1.5 var(--mono);word-break:break-all;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:var(--input-radius)}.code-blob:focus{outline:none;border-color:var(--accent)}.code-blob::placeholder{color:#5c6a7b}.code-display{margin:18px auto 4px;padding:14px 10px;width:fit-content;font:700 40px/1 var(--mono);letter-spacing:.3em;text-indent:.3em;color:#a8e4bd;background:var(--panel-2);border:1px solid var(--accent);border-radius:12px}.dice-row{display:flex;align-items:center;justify-content:center;gap:26px;margin:20px 0 6px}.dice-side{display:flex;flex-direction:column;align-items:center;gap:7px}.dice-who{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}.die{display:grid;place-items:center;width:86px;height:86px;line-height:1;font-size:74px;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:14px;transition:border-color .18s ease,color .18s ease}.die.winner{border-color:var(--accent);color:#a8e4bd}.dice-vs{color:var(--ink-dim);font-size:12px;letter-spacing:.1em}.dice-verdict{text-align:center;font-size:13px;color:var(--ink-dim);margin:12px 0 0;min-height:19px}.dice-verdict b{color:var(--ink)}.btn.primary{background:var(--accent-dim);border-color:var(--accent);color:#eaf7ee}.btn.primary:hover{background:#367a4e}.choice-grid{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}.choice{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer;width:118px;text-align:center;color:var(--ink)}.choice:hover{border-color:var(--danger)}.choice canvas{width:78px;height:90px;display:block;margin:0 auto 6px}.choice span{font-size:11.5px;color:var(--ink-dim)}.result-banner{position:absolute;top:14px;left:50%;transform:translate(-50%);background:var(--panel);border:1px solid var(--accent);color:var(--ink);border-radius:999px;padding:8px 20px;font-size:13.5px;font-weight:600;z-index:15}@media(max-width:1080px){.rail-left{width:190px;flex-basis:190px}.rail-right{width:230px;flex-basis:230px}}.skin-switch{display:inline-flex;gap:2px;padding:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:999px}.skin-option{display:inline-flex;align-items:center;gap:5px;padding:var(--skin-pad);border:none;border-radius:999px;cursor:pointer;background:transparent;color:var(--ink-dim);font:inherit;font-size:11.5px}.skin-option:hover{color:var(--ink)}.skin-option.active{background:var(--accent-dim);color:var(--ink)}.skin-glyph{font-size:13px;line-height:1}@media(max-width:1180px){.skin-option span:not(.skin-glyph){display:none}}:root[data-skin=cosy]{--bg: #221d1a;--bg-2: #2a2421;--panel: #322a26;--panel-2: #3e352f;--line: #493e38;--ink: #f4ede6;--ink-dim: #b3a89e;--accent: #8fae7d;--accent-dim: #46583d;--warn: #dda15e;--danger: #c9705f;--arcane: #b493c9;--radius: 14px;--board-inner: #392f29;--board-outer: #1b1715;--board-lattice: rgba(244, 237, 230, .065);--board-lattice-strong: rgba(244, 237, 230, .13);--board-trail: rgba(221, 161, 94, .38);--board-selected: #e9c46a;--board-hover: rgba(242, 235, 228, .2);--board-peek: #9dc4cf;--board-stack-badge: rgba(180, 147, 201, .94);--board-stack-badge-ink: #201c1a;--hl-move: rgba(143, 174, 125, .95);--hl-move-fill: rgba(143, 174, 125, .15);--hl-ability: rgba(221, 161, 94, .95);--hl-ability-fill: rgba(221, 161, 94, .16);--card-shadow: 0 18px 44px rgba(0, 0, 0, .4);--btn-radius: 10px;--card-radius: 16px;--menu-card-radius: 16px;--soft-radius: 12px;--ring-radius: 10px;--input-radius: 10px;--menu-image: radial-gradient(circle at 50% 30%, #3a302a 0%, #1c1816 70%)}:root[data-skin=cosy] .btn:hover,:root[data-skin=cosy] select:hover{background:#3d3532;border-color:#554a45}:root[data-skin=cosy] .hover-card{background:#322a26fb}:root[data-skin=cosy] .hint{border-color:var(--line)}:root[data-skin=cosy] .action-list button.active{background:#3a2f22}:root[data-skin=cosy] .tile-badge{color:#9a8f86;background:#201c1abf}:root[data-skin=cosy] .log li.white-ply{color:#ebe1d6}:root[data-skin=cosy] .log li.black-ply{color:#ab9f95}:root[data-skin=cosy] .hint{background:#322a26f0}:root[data-skin=cosy] .brand .mark,:root[data-skin=cosy] .menu-brand .mark{color:var(--warn)}:root[data-skin=cosy] .menu-tagline{color:#9f948b}.result-card{width:min(420px,92vw);text-align:center}.result-crest{font-size:42px;line-height:1;margin-bottom:6px;color:var(--ink-dim)}.result-card.is-win .result-crest{color:var(--accent)}.result-card.is-loss .result-crest{color:var(--danger)}.result-headline{margin:0 0 6px;font-size:27px;font-weight:650;letter-spacing:.04em;font-family:var(--display)}.result-card.is-win .result-headline{color:var(--accent)}.result-card.is-loss .result-headline{color:var(--danger)}.result-detail{margin:0 auto 18px;max-width:34ch;font-size:13px;color:var(--ink-dim);line-height:1.5}.result-stats{display:flex;justify-content:center;gap:8px;padding:14px 0;margin-bottom:4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.result-stats>div{flex:1;display:flex;flex-direction:column;gap:3px}.result-stats b{font-size:21px;font-weight:650;color:var(--ink)}.result-stats span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}.result-card .row{justify-content:center;flex-wrap:wrap}.name-field{display:block;margin-bottom:12px}.name-field>span{display:block;margin-bottom:5px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}.name-input{width:100%;padding:8px 11px;font:inherit;font-size:13.5px;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:var(--input-radius)}.name-input:focus{outline:none;border-color:var(--accent)}.name-input::placeholder{color:#5c6a7b}:root[data-skin=cosy] .name-input::placeholder{color:#7d7168}.scrim,.mobile-bar{display:none}@media(max-width:1024px){.rail-left{width:200px;flex-basis:200px}.rail-right{width:240px;flex-basis:240px}.topbar{gap:12px;padding:8px 12px}.status{font-size:12px}}@media(min-width:861px){.board-actions{display:none}}@media(max-width:860px){.topbar{gap:10px;padding:7px 10px}.brand .title{display:none}.status{flex:1 1 auto;min-width:0;font-size:11.5px;line-height:1.25;max-height:2.6em;overflow:hidden}.controls{flex:0 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}.controls::-webkit-scrollbar{display:none}.controls>*{flex:0 0 auto}.layout{position:relative;overflow:hidden}.rail{position:absolute;top:0;bottom:0;z-index:30;width:min(330px,88vw);flex-basis:auto;transition:transform .22s ease;box-shadow:0 0 44px #0000008c}.rail-left{left:0;transform:translate(-102%)}.rail-right{right:0;transform:translate(102%)}#app.drawer-left .rail-left,#app.drawer-right .rail-right{transform:none}.scrim{display:block;position:absolute;inset:0;z-index:20;background:#00000080}.scrim[hidden]{display:none}.inspect{max-height:none}.mobile-bar{display:flex;flex:0 0 auto;background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}.mobile-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px 6px;min-height:46px;background:none;border:none;cursor:pointer;color:var(--ink-dim);font:inherit;font-size:10.5px}.mobile-tab[aria-pressed=true]{color:var(--ink);background:var(--panel-2)}.mobile-glyph{font-size:16px;line-height:1}.hint{bottom:10px;font-size:11.5px;padding:5px 12px}.card{width:min(460px,94vw);padding:18px 16px;max-height:86vh}.card .row{flex-wrap:wrap}.menu-panel{width:min(520px,94vw);padding:22px 12px 32px}:root{--card-pad: 18px 16px}.menu-corner{top:10px;right:10px}.result-stats b{font-size:19px}.hover-card{display:none}}@media(max-width:480px){.brand{display:none}.status{font-size:11px}.menu-brand h1{font-size:18px}:root{--menu-card-pad: 14px}.card{padding:16px 13px}.result-headline{font-size:23px}.result-crest{font-size:34px}.choice{width:96px}.code-display{font-size:30px;letter-spacing:.22em}.tiles{grid-template-columns:repeat(4,1fr)}}@media(pointer:coarse){:root{--btn-pad: 8px 13px;--chip-pad: 7px 15px;--skin-pad: 7px 13px;--action-pad: 10px 11px;--face-pad: 8px 6px}.btn,select,.action-list button{font-size:13px}.tile:hover{transform:none}#board{cursor:default}}.hamburger{display:none}@media(max-width:860px){.topbar{position:relative}.hamburger{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:38px;height:34px;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:var(--btn-radius);font-size:15px;line-height:1;cursor:pointer}.hamburger[aria-expanded=true]{background:var(--accent-dim);border-color:var(--accent)}.controls{display:none;position:absolute;top:calc(100% + 6px);right:8px;z-index:70;flex-direction:column;align-items:stretch;gap:6px;width:min(240px,calc(100vw - 16px));padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:var(--card-shadow);overflow:visible}#app.tools-open .controls{display:flex}.controls>*{width:100%}.controls .btn{text-align:left}.ctl{justify-content:space-between}.ctl select{flex:1;margin-left:8px}.controls .skin-switch{display:flex}.controls .skin-option{flex:1;justify-content:center}.controls .skin-option span:not(.skin-glyph){display:inline}#menu,#recenter{display:none}.status{max-height:2.6em}}