:root{color-scheme:light;--bg: #ecebe7;--fg: #1d1d1b;--muted: #6d6c67;--panel: #f7f7f5;--line: #d9d8d3;--cell: #ffffff;--cell-stroke: #b3b2ad;--accent: #2d5bd7;--danger: #c4372b;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--fg);background:var(--bg)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg: #1b1b1a;--fg: #ecebe7;--muted: #9b9a95;--panel: #262625;--line: #3a3a38;--cell: #d9d8d3;--cell-stroke: #8d8c87}}:root[data-theme=dark]{color-scheme:dark;--bg: #1b1b1a;--fg: #ecebe7;--muted: #9b9a95;--panel: #262625;--line: #3a3a38;--cell: #d9d8d3;--cell-stroke: #8d8c87}*{box-sizing:border-box}html{overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;height:100vh;height:100dvh;overflow:hidden;display:grid;place-items:center;background:var(--bg)}#app{width:min(100vw - 24px,1600px);max-height:100%;padding:12px 0}button,select,input{font:inherit;color:inherit;border:0;border-radius:2px;background:var(--line)}button{cursor:pointer;padding:8px 14px}button:hover:not(:disabled){filter:brightness(.95)}button:disabled{cursor:default;opacity:.5}:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.menu{display:grid;gap:12px;justify-items:center;text-align:center}h1{margin:0;font-size:clamp(1.6rem,6vh,2.2rem)}.tagline{margin:0 0 12px;color:var(--muted)}.primary{min-width:260px}.modes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:stretch}.modes .primary{min-width:180px}.split{position:relative;display:flex;gap:1px}.split .arrow{padding:8px;font-size:.8rem}.split [aria-expanded=true]{filter:brightness(.9)}.bot-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:10;display:grid;gap:8px;min-width:100%;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:2px;box-shadow:0 4px 14px #00000026;text-align:left}.bot-menu[hidden]{display:none}.bot-levels{display:grid;margin:0;padding:0;border:0}.bot-level{position:relative;cursor:pointer}.bot-level input{position:absolute;opacity:0}.bot-level span{display:block;padding:6px 10px;border-radius:2px}.bot-level:hover span{background:var(--bg)}.bot-level input:checked+span{background:var(--line);font-weight:600}.bot-level input:focus-visible+span{outline:2px solid var(--accent);outline-offset:-2px}.bot-menu .styles{margin:0;padding-top:6px;border-top:1px solid var(--line);flex-wrap:nowrap;gap:2px}.bot-menu .style-choice span{padding:6px 8px}select{margin-left:6px;padding:4px}.teams{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0;padding:0;border:0;font-size:.9rem}.styles{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0 0;padding:0;border:0;min-width:0}.style-choice{position:relative;cursor:pointer}.style-choice input{position:absolute;opacity:0}.style-choice span{display:block;padding:8px 12px;border-radius:2px}.style-choice input:checked+span{background:var(--line)}.style-choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}.match{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr);gap:16px;height:calc(100vh - 24px);height:calc(100dvh - 24px)}.board-wrap{position:absolute;inset:0}.board{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-user-select:none;user-select:none}.board3d-loading{position:absolute;top:50%;left:50%;z-index:1;width:40px;height:40px;margin:-20px 0 0 -20px;border:3px solid var(--line);border-top-color:var(--muted);border-radius:50%;animation:board3d-spin .8s linear infinite}@keyframes board3d-spin{to{transform:rotate(360deg)}}.board3d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}.cell{fill:var(--cell);stroke:var(--cell-stroke);stroke-width:1}.cell.castle{fill:#e3b64a}.piece{cursor:pointer}.token .plate{stroke-width:1.5;stroke-linejoin:miter}.token.p2 .plate{fill:#ece8de;stroke:#b9ae95}.token.p1 .plate{fill:#30333b;stroke:#151719}.token.p0 .plate{fill:#b9b6ae;stroke:#6d6a62}.token .star{fill:#2a2620;stroke:none;pointer-events:none}.token.p1 .star{fill:#efe6d4}.token .lord{fill:#f0bf3c;stroke:#6b4a08;stroke-width:1.1;stroke-linejoin:round;paint-order:stroke;pointer-events:none}.piece.selected .plate{stroke:var(--accent);stroke-width:3.5}.piece.forbidden .token{opacity:.45}.threat-ring{fill:none;stroke:var(--danger);stroke-width:2.5;stroke-dasharray:5 3}.hl{pointer-events:none}.hl-move,.hl-place{fill:var(--accent)}.hl-preview{fill:var(--muted);opacity:.8}.hl-next{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:4 3}.cell.danger{fill:color-mix(in srgb,var(--danger) 16%,var(--cell))}.hl-capture{fill:none;stroke:var(--danger);stroke-width:3.5}.hl-lord{fill:none;stroke:#e0a91a;stroke-width:3.5}.hl-target{cursor:pointer}.hl-hit{fill:transparent}.hl-target:hover .hl{transform:scale(1.35)}.hl-target .hl{transition:transform .12s ease}@media(prefers-reduced-motion:reduce){.hl-target .hl{transition:none}}.icon{display:block}.panel{display:grid;gap:10px;align-content:center;align-self:center;min-height:0;max-height:100%;overflow:auto}.clock{display:flex;align-items:baseline;gap:8px;padding:10px 14px;border:1px solid;border-radius:2px;font-variant-numeric:tabular-nums}.clock.p1{background:#1d1d1b;color:#f4f4f2;border-color:#1d1d1b}.clock.p2{background:#fbfbfa;color:#1d1d1b;border-color:#c9c6bd}.clock .time{margin-left:auto;font-size:1.8rem;font-weight:600}.clock:not(.running) .time{opacity:.55}.clock.low .time{color:var(--danger)}.clock.p1.low .time{color:#ff6b5e}.forbidden{position:relative;width:fit-content;margin:0 auto}.forbidden:after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:3px;background:var(--danger);border-radius:2px;transform:rotate(-45deg)}.setup[hidden]{display:none}.choices{display:flex;flex-wrap:wrap;gap:6px}.choices.faces{justify-content:center}.face-choice{display:grid;justify-items:center;padding:6px;background:var(--panel);border:1px solid var(--line)}.face-choice.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}small{color:var(--muted);font-size:.75rem}.tools{position:fixed;top:10px;left:10px;z-index:20;font-size:.85rem}.notice{margin:0;color:var(--danger);font-size:.85rem}.notice[hidden]{display:none}.actions{display:flex;align-items:center;justify-content:center;gap:14px;min-height:36px;font-size:.9rem}.icon-btn{display:grid;place-items:center;padding:6px;background:none;color:var(--muted)}.icon-btn:hover:not(:disabled){color:var(--fg)}.icon-btn[data-act=resign]:hover{color:var(--danger)}.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.actions .link{background:none;color:var(--muted);text-decoration:underline}.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:#0000004d}.modal[hidden]{display:none}.modal-card{display:grid;gap:14px;justify-items:center;padding:20px 24px;background:var(--bg);border-radius:2px;box-shadow:0 8px 30px #00000040}.modal-card p{margin:0;font-weight:600}.modal-buttons{display:flex;gap:8px}.modal .danger{background:var(--danger);color:#fff}.share{display:flex;gap:6px;width:min(100%,520px)}.share input{flex:1;min-width:0;padding:8px 10px}@media(max-height:760px){.panel{gap:6px}.clock{padding:6px 10px}.clock .time{font-size:1.4rem}button{padding:6px 12px}}@media(max-width:800px){.match{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:8px}.panel{align-self:end;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}.clock .name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panel>:not(.clock){grid-column:1 / -1}.clock{grid-row:1;padding:4px 8px}.clock .time{font-size:1.15rem}button{padding:6px 10px}}.board-area{position:relative;min-width:0;min-height:0}.end{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:#0000004d;animation:end-fade .2s ease-out .45s both}.end[hidden]{display:none}.end-card{display:grid;gap:6px;justify-items:center;text-align:center;min-width:min(300px,100%);padding:20px 24px;background:var(--bg);border-radius:2px}.end h2{margin:0;font-size:1.8rem}.end.loss h2{color:var(--danger)}.end-reason{margin:0 0 10px;max-width:34ch;color:var(--muted)}.end-note{margin:0 0 10px;font-weight:600}.end-buttons{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.end-buttons .primary{min-width:0;width:100%}@keyframes end-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){.end{animation:none}}.capture-ghost{pointer-events:none}.clock .time:empty{display:none}.clock:has(.time:empty):not(.running){opacity:.55}.tools{display:flex;gap:6px}.home-bar{position:fixed;top:8px;left:16px;right:16px;display:flex;justify-content:space-between;gap:12px}.home-bar>div{display:flex;align-items:center;gap:18px;min-width:0}.settings{position:relative}.settings [aria-expanded=true]{text-decoration:underline}.settings-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:10;display:grid;gap:10px;padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-radius:2px;box-shadow:0 4px 14px #00000026;width:max-content;white-space:nowrap}.settings-menu[hidden]{display:none}.settings-menu .styles{flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:2px;margin:0}.settings-menu legend{float:left;min-width:4.5em;padding:0;color:var(--muted);font-size:.9rem}.settings-menu .style-choice span{padding:6px 10px}@media(max-width:600px){.home-bar{flex-direction:column;align-items:flex-start;gap:2px}.home-bar>div{max-width:100%}}.settings-menu{max-width:calc(100vw - 16px)}@media(max-width:400px){.home-bar{left:10px;right:10px;font-size:.9rem}.home-bar>div{gap:10px}.home-bar [data-account]{min-width:0}.home-bar [data-account] .link{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.learn{display:flex;gap:18px}.link{padding:4px 2px;background:none;color:var(--muted);text-decoration:underline}.link:hover:not(:disabled){color:var(--fg)}.rules-page,.tuto-side{--link: #1a3a99;font-family:Georgia,Times New Roman,serif}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .rules-page,:root:not([data-theme=light]) .tuto-side{--link: #9db4ee}}:root[data-theme=dark] .rules-page,:root[data-theme=dark] .tuto-side{--link: #9db4ee}.rules-page{display:grid;grid-template-rows:auto minmax(0,1fr);gap:4px;height:calc(100vh - 24px);height:calc(100dvh - 24px)}.rules-head{max-width:640px;width:100%;margin:0 auto}.rules-page .link,.rules-head button,.tuto-nav button{padding:0;background:none;color:var(--link);text-decoration:underline}.rules-page .link:hover,.rules-head button:hover,.tuto-nav button:hover:not(:disabled){filter:none;color:var(--fg)}.rules-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain}.rules-text{max-width:640px;margin:0 auto;padding:0 4px 32px;line-height:1.55;font-size:1.05rem}.rules-text h1{margin:8px 0 12px;font-size:1.9rem;font-weight:400;text-align:left}.rules-text h2{margin:28px 0 6px;font-size:1.25rem;font-weight:700}.rules-text p{margin:0 0 10px}.rules-text ul,.rules-text ol{margin:0 0 10px;padding-left:28px}.rules-text .note{margin-top:14px;font-style:italic}.rules-text table{margin:8px 0 14px;border-collapse:collapse}.rules-text th,.rules-text td{padding:4px 8px;border:1px solid var(--cell-stroke);text-align:left;vertical-align:top}.rules-text td:first-child{white-space:nowrap}.face-cards{display:flex;flex-wrap:wrap;gap:24px;margin:4px 0 8px}.face-card{display:grid;gap:2px;justify-items:center;margin:0}.face-card figcaption{font-size:.9rem;font-style:italic}.diagram{width:120px;max-width:100%}.mini-cell{fill:var(--cell);stroke:var(--cell-stroke);stroke-width:.6}.mini-cell.hit{fill:color-mix(in srgb,var(--accent) 22%,var(--cell))}.mini-dot{fill:var(--accent)}.cycle{margin:4px 0 0}.cycle-stars{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.cycle-star{display:grid;justify-items:center;gap:2px;padding:4px;background:none;font-size:.9rem;font-style:italic}.cycle-star:hover:not(:disabled){filter:none}.cycle-star svg{width:64px;height:64px}.cycle-arrow{font-size:1.2rem}.zone-schema{display:grid;justify-items:start;gap:4px;margin:10px 0 0}.zone-schema .board{position:static;width:min(100%,280px);height:auto;pointer-events:none}.zone-schema figcaption{display:flex;flex-wrap:wrap;gap:14px;font-size:.9rem}.dot{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px}.dot.white{background:var(--accent)}.dot.black{background:var(--muted)}.dot.castle{background:#e3b64a}.tuto{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:center;height:calc(100vh - 24px);height:calc(100dvh - 24px)}.tuto-board{position:relative;height:100%;min-height:0}.tuto-side{display:grid;gap:10px;align-content:center;max-height:100%;overflow-y:auto;line-height:1.5}.tuto-side h2{margin:0;font-size:1.4rem;font-weight:400}.tuto-side p{margin:0}.tuto-step{font-size:.9rem;font-style:italic}.tuto-face,.tuto-forbidden{display:flex;align-items:center;gap:10px;font-size:.95rem}.tuto-face span{flex:1}.tuto-forbidden .forbidden,.tuto-msg{margin:0}.tuto-msg.ok{color:#1f6b33}.tuto-msg.ko{color:var(--danger)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .tuto-msg.ok{color:#7fc68f}}:root[data-theme=dark] .tuto-msg.ok{color:#7fc68f}.tuto-side .face-choice{background:none;border:1px solid transparent;border-radius:0}.tuto-side .face-choice.selected{border-color:var(--fg);box-shadow:none}.tuto-proceed{display:flex;flex-wrap:wrap;gap:8px}.tuto-side .tuto-proceed button{border:1px solid var(--cell-stroke);border-radius:0;background:var(--cell);color:#1d1d1b}.go{font-weight:700}.tuto-nav{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;font-size:.9rem}.tuto-nav button:disabled{color:var(--muted);text-decoration:none}@media(max-width:800px){.tuto{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:8px}.tuto-side{align-content:start;max-height:48dvh}.face-cards{gap:12px}.diagram{width:90px}.rules-text td:first-child{white-space:normal}}.form{display:grid;gap:10px;width:min(100%,340px);text-align:left}.form label{display:grid;gap:4px;color:var(--muted);font-size:.9rem}.form input,.join-code input{padding:8px 10px;background:var(--panel);border:1px solid var(--line);color:var(--fg);font-size:1rem}.form .primary{min-width:0;margin-top:4px}.form .concealed{visibility:hidden}.form .show-password{display:flex;align-items:center;gap:6px;cursor:pointer}.inline{display:flex;gap:6px}.inline input{flex:1;min-width:0}.hint{margin:0;color:var(--muted);font-size:.85rem}.form-error{min-height:1.3em;margin:0;color:var(--danger);font-size:.9rem}.tabs{display:flex;gap:12px}.tabs [aria-selected=true]{background:var(--accent);color:#fff}.rating-card{display:grid;justify-items:center}.rating-value{font-size:2.6rem;font-weight:600;font-variant-numeric:tabular-nums}.rating-label{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 20px;margin:0}.stats div{display:grid}.stats dt{color:var(--muted);font-size:.8rem}.stats dd{margin:0;font-weight:600}.page{display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;height:calc(100vh - 24px);height:calc(100dvh - 24px);max-width:560px;margin:0 auto}.page-head{display:flex;align-items:baseline;gap:16px}.page-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain}.ranking{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.ranking th{position:sticky;top:0;background:var(--bg);color:var(--muted);font-weight:400;font-size:.85rem;text-align:left}.ranking th,.ranking td{padding:6px 8px;border-bottom:1px solid var(--line)}.ranking td:first-child,.ranking th:first-child{width:3em;color:var(--muted)}.ranking td:nth-child(n+3),.ranking th:nth-child(n+3){text-align:right}.ranking td:nth-child(2){overflow-wrap:anywhere}.ranking tr.me td{background:var(--panel);font-weight:600}.players-online{font-size:.5em;font-weight:400;color:var(--muted);white-space:nowrap}.lobby-modes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.lobby-modes .mode{width:160px;padding:14px;text-align:center}.join-code{display:grid;gap:4px;width:min(100%,300px);text-align:left;color:var(--muted);font-size:.9rem}.join-code input{letter-spacing:.15em}.search-time,.code{margin:0;font-size:2rem;font-weight:600;font-variant-numeric:tabular-nums}.code{letter-spacing:.12em}.resume{display:grid;gap:8px;justify-items:center;padding:12px 16px;border:1px solid var(--accent);border-radius:2px;background:var(--panel)}.resume[hidden]{display:none}.resume p{margin:0}.moves{display:none}@media(min-width:801px){.match{grid-template-rows:minmax(0,1fr) auto}.board-area{grid-row:1 / -1}.panel{grid-column:2;grid-row:1}.moves{display:grid;grid-template-rows:auto minmax(0,1fr);grid-column:2;grid-row:2;height:min(30vh,260px);min-height:0;padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-radius:2px}.moves h2{margin:0 0 4px;color:var(--muted);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.moves ol{margin:0;padding:0;min-height:0;overflow-y:auto;list-style:none;font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:.85rem;font-variant-numeric:tabular-nums}.moves li{display:grid;grid-template-columns:4ch 1fr 1fr;gap:8px;padding:1px 2px}.moves .num{color:var(--muted);text-align:right}.moves[hidden]{display:none}.moves .mv.last{color:var(--accent);font-weight:600}}.coord{fill:var(--muted);font-size:12px;text-anchor:middle;dominant-baseline:central;pointer-events:none;-webkit-user-select:none;user-select:none}