:root{--text: #4f5b6c;--text-strong: #111827;--muted: #738094;--bg: #f6f8fb;--border: #dbe2ea;font:16px/145% system-ui,Segoe UI,Roboto,Noto Sans TC,sans-serif;letter-spacing:0;color-scheme:light;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100svh}body{margin:0}*{box-sizing:border-box}h1{color:var(--text-strong);font-size:clamp(30px,4vw,46px);line-height:1;letter-spacing:0;font-weight:900}h2{color:var(--text-strong);font-size:18px;line-height:1.2;letter-spacing:0;font-weight:900}p{margin:0}.move-log{display:flex;flex-direction:column;background:var(--surface-soft);border:1px solid var(--panel-border);border-radius:8px;overflow:hidden;max-height:240px}.move-log-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:color-mix(in srgb,var(--panel-border) 30%,var(--surface));border-bottom:1px solid var(--panel-border)}.move-log-title{margin:0;font-size:14px;font-weight:800;color:var(--text-strong)}.export-button{background:transparent;border:none;padding:4px;min-height:unset;color:var(--muted);cursor:pointer;border-radius:4px;display:grid;place-items:center}.export-button:hover{background:#0000000d;color:var(--text-strong)}.move-list-container{overflow-y:auto;flex:1}.move-empty{padding:20px;text-align:center;color:var(--muted);font-size:14px}.move-list{list-style:none;margin:0;padding:0}.move-item{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:13px;border-bottom:1px solid color-mix(in srgb,var(--panel-border) 40%,transparent)}.move-item:last-child{border-bottom:none}.move-log-actions{display:flex;align-items:center;gap:4px}.replay-exit{width:auto;min-width:unset;padding:4px 8px;font-size:12px;font-weight:800;color:var(--move-target)}.move-item.is-clickable{cursor:pointer;transition:background .15s}.move-item.is-clickable:hover{background:color-mix(in srgb,var(--panel-border) 30%,transparent)}.move-item.is-active{background:color-mix(in srgb,var(--move-target) 18%,transparent);box-shadow:inset 3px 0 0 var(--move-target)}.move-num{color:var(--muted);min-width:24px;text-align:right;font-variant-numeric:tabular-nums}.move-player{font-weight:900}.move-detail{display:flex;align-items:center;gap:6px;color:var(--text-strong);font-family:monospace}.move-badge{background:color-mix(in srgb,var(--move-target) 15%,transparent);color:var(--move-target);padding:2px 6px;border-radius:4px;font-size:11px;font-weight:800;font-family:system-ui,sans-serif}.victory-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#11182766;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:overlay-fade-in .5s ease-out}.victory-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.victory-content{position:relative;z-index:10;background:var(--surface);border-radius:24px;padding:40px 60px;text-align:center;box-shadow:0 20px 40px #0003;border:4px solid var(--winner-color);animation:pop-in .6s cubic-bezier(.175,.885,.32,1.275)}.victory-close{position:absolute;top:12px;right:16px;background:transparent;border:none;font-size:18px;line-height:1;color:var(--muted);cursor:pointer;padding:6px 9px;border-radius:8px;transition:background .15s,color .15s}.victory-close:hover{color:var(--text-strong);background:#0000000f}.victory-badge{font-size:64px;line-height:1;margin-bottom:16px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}.victory-content h2{font-size:36px;margin:0 0 16px;color:var(--winner-color);text-shadow:0 2px 4px rgba(0,0,0,.1)}.victory-stats{font-size:18px;color:var(--text);margin-bottom:32px}.victory-stats span{font-weight:800;color:var(--text-strong)}.victory-button{font-size:20px;padding:16px 32px;border-radius:999px;background:var(--winner-color);color:#fff;border:none;font-weight:800;cursor:pointer;box-shadow:0 4px 12px color-mix(in srgb,var(--winner-color) 40%,transparent);transition:transform .2s,box-shadow .2s}.victory-button:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 8px 16px color-mix(in srgb,var(--winner-color) 60%,transparent)}.victory-button:active{transform:translateY(1px) scale(.95)}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.checker-board{display:block;width:min(100%,780px);max-height:calc(100svh - 148px);aspect-ratio:1 / 1;touch-action:manipulation}.checker-board.is-interaction-disabled,.checker-board.is-interaction-disabled .board-cell,.checker-board.is-interaction-disabled .piece{cursor:wait}.board-cell{cursor:pointer;outline:none}.board-cell .cell-visual{fill:var(--cell-center);stroke:var(--cell-center-stroke);stroke-width:1.5;transition:fill .14s ease,stroke .14s ease}.board-cell:hover .cell-visual,.board-cell:focus-visible .cell-visual{fill:var(--cell-hover);stroke:#72839a}.camp-north .cell-visual,.camp-south .cell-visual{fill:var(--camp-red);stroke:var(--camp-red-stroke)}.camp-northEast .cell-visual,.camp-southWest .cell-visual{fill:var(--camp-green);stroke:var(--camp-green-stroke)}.camp-southEast .cell-visual,.camp-northWest .cell-visual{fill:var(--camp-violet);stroke:var(--camp-violet-stroke)}.board-cell.is-last-move-cell .cell-visual{fill:#fff1b8;stroke:var(--move-last)}.target-ring{fill:none;stroke:var(--move-target);stroke-width:4;stroke-linecap:round;stroke-dasharray:8 7;pointer-events:none}.move-path{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.last-move-path{stroke:color-mix(in srgb,var(--move-last) 58%,transparent);stroke-width:9}.legal-move-path{stroke:color-mix(in srgb,var(--move-target) 20%,transparent);stroke-width:6}.hint-move-path{stroke:color-mix(in srgb,var(--move-target) 60%,transparent);stroke-width:8;stroke-dasharray:12 12;animation:hint-dash 1s linear infinite}@keyframes hint-dash{to{stroke-dashoffset:-24}}.piece{cursor:pointer;outline:none;transition:transform .2s ease}.piece.is-animating{transition:none}.piece-shadow{fill:#171c2633;filter:blur(1px)}.piece-rim{fill:var(--piece-dark);stroke:#ffffff85;stroke-width:1.2}.piece-body{fill:var(--piece-color);stroke:var(--piece-dark);stroke-width:2;filter:drop-shadow(0 2px 2px rgba(16,24,40,.26));transition:filter .14s ease,stroke-width .14s ease}.piece-glow{fill:var(--piece-light);opacity:.42;pointer-events:none}.piece-highlight{fill:#ffffffb8;pointer-events:none}.piece.is-current-turn .piece-body{filter:saturate(1.08)}.piece.is-selected .piece-body,.piece:focus-visible .piece-body{stroke:#111827;stroke-width:4.2}@media(max-width:760px){.checker-board{max-height:none}}.editor-shell{height:100dvh;min-height:0;overflow:hidden;padding-top:env(safe-area-inset-top)}.editor-header{flex:0 0 auto;padding:12px clamp(14px,4vw,24px);border-bottom:1px solid var(--panel-border)}.editor-header h1{margin:0 0 4px;font-size:22px}.editor-board{flex:1 1 auto;min-height:0;display:grid;place-items:center;padding:8px;overflow:hidden}.editor-board .checker-board{width:100%;height:100%;max-width:560px;max-height:100%}.editor-controls{flex:0 0 auto;display:grid;gap:10px;padding:12px clamp(14px,4vw,24px) calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--panel-border);background:var(--surface)}.editor-row{display:flex;align-items:center;gap:12px}.editor-label{min-width:48px;font-weight:800;color:var(--text-strong)}.editor-row .segmented-control{flex:1}.editor-brush{grid-template-columns:repeat(3,1fr)}.editor-apply{background:var(--move-target);color:#fff;border:0}.editor-apply:hover:not(:disabled),.editor-apply:focus-visible:not(:disabled){background:var(--move-target);filter:brightness(1.06)}.app-shell{--surface: #ffffff;--surface-soft: #f8fafc;--panel-border: #dbe2ea;--button-bg: #f8fafc;--button-hover: #eef4f7;--cell-center: #e7ebf1;--cell-center-stroke: #c7d0dd;--cell-hover: #f6f8fb;--camp-red: #f4dedb;--camp-red-stroke: #d8a29e;--camp-green: #dceee8;--camp-green-stroke: #9fcfbd;--camp-violet: #e6e2f4;--camp-violet-stroke: #b9acd9;--move-target: #1c8b80;--move-last: #d6a520;min-height:100svh;display:flex;flex-direction:column;color:var(--text);background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.82),transparent 26rem),var(--bg)}.app-shell[data-theme=wood]{--text: #564338;--text-strong: #211711;--muted: #7b6758;--bg: #f3e7d5;--surface: #fff8ec;--surface-soft: #f9eddc;--panel-border: #d5b993;--button-bg: #fff5e6;--button-hover: #f4dfc3;--cell-center: #ead7bb;--cell-center-stroke: #c29a6e;--cell-hover: #fff2db;--camp-red: #f1c7bd;--camp-red-stroke: #bd7469;--camp-green: #d9e2c5;--camp-green-stroke: #8da569;--camp-violet: #dfd1e3;--camp-violet-stroke: #9a7fa7;--move-target: #3c7d65;--move-last: #b87921}.app-shell[data-theme=night]{--text: #c9d4df;--text-strong: #f6fbff;--muted: #92a2b3;--bg: #111823;--surface: #182232;--surface-soft: #1f2d40;--panel-border: #314156;--button-bg: #223149;--button-hover: #2c3d58;--cell-center: #253449;--cell-center-stroke: #425775;--cell-hover: #33465f;--camp-red: #54313c;--camp-red-stroke: #8d5161;--camp-green: #24483f;--camp-green-stroke: #4f8777;--camp-violet: #3d3459;--camp-violet-stroke: #7566a3;--move-target: #65d1bf;--move-last: #e0b94b}.app-shell[data-theme=jade]{--text: #405b58;--text-strong: #102522;--muted: #64807c;--bg: #eef8f3;--surface: #ffffff;--surface-soft: #eff9f5;--panel-border: #bddbd0;--button-bg: #f3fbf7;--button-hover: #e4f5ee;--cell-center: #dcefe8;--cell-center-stroke: #9fcaba;--cell-hover: #f4fffb;--camp-red: #f0d9d5;--camp-red-stroke: #cf9690;--camp-green: #c7eadc;--camp-green-stroke: #78b59c;--camp-violet: #dde2f4;--camp-violet-stroke: #9eaed5;--move-target: #147b70;--move-last: #c7a12d}.app-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px clamp(18px,4vw,44px);border-bottom:1px solid var(--panel-border)}.eyebrow{margin:0 0 4px;color:var(--muted);font-size:13px;font-weight:700;letter-spacing:0;text-transform:uppercase}.app-header h1{margin:0}.turn-badge{--player-color: #1c8b80;min-width:184px;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--player-color) 42%,var(--border));border-left:8px solid var(--player-color);border-radius:8px;padding:10px 14px;color:var(--text-strong);background:color-mix(in srgb,var(--player-color) 9%,var(--surface));font-weight:800;text-align:left}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}.fold-toggle{white-space:nowrap}.game-layout{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:0}.board-stage{min-width:0;display:grid;place-items:center;padding:clamp(14px,3vw,34px);overflow:hidden}@media(min-width:961px){.board-stage{align-self:start;position:sticky;top:0}}.side-panel{border-left:1px solid var(--panel-border);background:var(--surface);padding:24px;text-align:left}.panel-section+.panel-section{margin-top:28px;padding-top:24px;border-top:1px solid var(--panel-border)}.panel-section h2{margin:0 0 14px}.status-list{display:grid;gap:10px;margin:0}.status-list div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:baseline}.status-list dt{color:var(--muted);font-size:14px;font-weight:700}.status-list dd{margin:0;color:var(--text-strong);font-weight:800;overflow-wrap:anywhere}.button-row{display:flex;gap:10px;flex-wrap:wrap}.segmented-control{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.segmented-control button{width:100%}.segmented-control button.is-active{border-color:var(--move-target);background:color-mix(in srgb,var(--move-target) 14%,var(--surface))}.color-picker-group{margin-top:16px}.color-picker-title{margin:0 0 8px;color:var(--text-strong);font-size:14px;font-weight:800}.swatch-row{display:grid;grid-template-columns:repeat(6,32px);gap:8px}.color-swatch{--swatch-color: #d84e45;min-height:32px;width:32px;border-radius:999px;padding:0;border:2px solid color-mix(in srgb,var(--swatch-color) 36%,var(--panel-border));background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.8),transparent 28%),var(--swatch-color);box-shadow:inset 0 -4px 7px #00000038}.color-swatch.is-active{outline:3px solid color-mix(in srgb,var(--swatch-color) 42%,transparent);outline-offset:2px}.checkbox-control,.select-control{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text-strong);font-weight:800}.checkbox-control{justify-content:flex-start;margin-bottom:12px}.checkbox-control input{width:18px;height:18px;accent-color:#1c8b80}.select-control select{min-width:128px;border:1px solid #b8c2d0;border-radius:8px;padding:8px 10px;color:var(--text-strong);background:var(--button-bg);font:inherit;font-weight:800}.select-control select:focus-visible{border-color:#59687d;outline:2px solid rgba(28,139,128,.28);outline-offset:2px}.select-control select:disabled{color:#9aa6b5;background:var(--surface-soft)}.control-note{margin-top:10px;color:var(--muted);font-size:14px}button{min-height:40px;border:1px solid #b8c2d0;border-radius:8px;padding:8px 14px;color:var(--text-strong);background:var(--button-bg);font:inherit;font-weight:800;cursor:pointer}button:hover:not(:disabled),button:focus-visible:not(:disabled){border-color:#59687d;background:var(--button-hover);outline:none}button:disabled{color:#9aa6b5;cursor:not-allowed}.rule-list{display:grid;gap:10px;margin:0;padding-left:18px;color:var(--text)}@media(max-width:960px){.app-header{align-items:stretch;flex-direction:column;padding:16px;gap:16px}.header-actions{width:100%}.turn-badge{flex:1 1 auto;min-width:0}.game-layout{grid-template-columns:1fr;display:flex;flex-direction:column}.board-stage{flex:1;padding:10px;align-items:flex-start}.side-panel{border-top:1px solid var(--panel-border);border-left:0;padding:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;max-height:45vh;overflow-y:auto;background:var(--surface);box-shadow:0 -4px 16px #0000000d}.panel-section+.panel-section{margin-top:0;padding-top:24px}}@media(max-width:480px){.side-panel{grid-template-columns:1fr}}.app-shell[data-folded=true]{height:100svh;min-height:0;overflow:hidden}.app-shell[data-folded=true] .app-header{flex:0 0 auto;flex-direction:row;align-items:center;gap:12px;padding:10px clamp(14px,3vw,28px)}.app-shell[data-folded=true] .app-header h1{font-size:clamp(22px,2.6vw,28px)}.app-shell[data-folded=true] .eyebrow{display:none}.app-shell[data-folded=true] .header-actions{width:auto}.app-shell[data-folded=true] .turn-badge{flex:0 1 auto}.app-shell[data-folded=true] .game-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0}.app-shell[data-folded=true] .board-stage{align-self:stretch;position:static;min-height:0;padding:clamp(8px,1.5vw,16px)}.app-shell[data-folded=true] .checker-board{width:100%;height:100%;max-width:100%;max-height:100%}.app-shell[data-mobile]{height:100dvh;min-height:0;overflow:hidden}.mobile-setup,.mobile-play{flex:1;min-height:0;display:flex;flex-direction:column}.mobile-setup .app-header{flex:0 0 auto}.m-setup-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px clamp(14px,4vw,22px);display:flex;flex-direction:column;gap:22px}.m-setup-scroll .panel-section+.panel-section{margin-top:0;padding-top:0;border-top:0}.m-start{flex:0 0 auto;border:0;border-radius:0;min-height:56px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));font-size:18px;font-weight:800;color:#fff;background:var(--move-target)}.m-start:hover:not(:disabled),.m-start:focus-visible:not(:disabled){background:var(--move-target);filter:brightness(1.06)}.mobile-play{height:100dvh;padding-top:env(safe-area-inset-top)}.m-statusbar{--player-color: #1c8b80;flex:0 0 auto;display:flex;align-items:center;gap:8px;text-align:center;padding:6px 8px;font-weight:800;color:var(--text-strong);background:color-mix(in srgb,var(--player-color) 10%,var(--surface));border-bottom:2px solid var(--player-color)}.m-statusbar .fold-toggle{flex:0 0 auto;min-height:36px;padding:4px 10px;font-size:13px}.m-status-text{flex:1 1 auto;min-width:0;padding:4px 0}@media(pointer:coarse){.m-status-text{padding-right:44px}}.m-statusbar.is-replay{--player-color: var(--move-last)}.m-statusbar.is-replay .m-status-text{cursor:pointer}.m-board{flex:1 1 auto;min-height:0;display:grid;place-items:center;padding:8px;overflow:hidden}.m-board .checker-board{width:100%;height:100%;max-width:100%;max-height:100%}.m-toolbar{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--panel-border);background:var(--surface)}.m-toolbar button{min-height:48px;padding:6px 4px}