:root{--bg:#0a0e12;--surface:#14181c;--surface-elevated:#1e232a;--border:#272c33;--border-soft:#1a1e24;--text-primary:#eae7e1;--text-muted:#8f8a82;--text-subtle:#4e535b;--gold:#c9a45b;--reveal-cyan:#5be3d3;--board-wood:#d4a668;--board-wood-dark:#c49558;--board-line:#1b130c;--piece-bg:#f5ebd3;--side-red:#cc3838;--side-green:#2e7d5b;--sem-warning:#e8b547;--sem-error:#e85a47;--sp-2xs:2px;--sp-xs:4px;--sp-sm:8px;--sp-md:16px;--sp-lg:24px;--sp-xl:32px;--sp-2xl:48px;--sp-3xl:64px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--font-serif:ui-serif, "New York", Georgia, serif;--font-sans:system-ui, -apple-system, sans-serif;--font-mono:ui-monospace, "SF Mono", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text-primary);font-family:var(--font-sans);min-height:100dvh;font-size:17px}.app{padding:var(--sp-lg) var(--sp-md);align-items:center;gap:var(--sp-md);flex-direction:column;min-height:100dvh;display:flex}.hero{font-family:var(--font-serif);color:var(--text-primary);letter-spacing:-.01em;font-size:28px;font-weight:600}.material{gap:var(--sp-lg);font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-primary);font-size:15px;display:flex}.material .mat b{margin-right:var(--sp-xs);font-weight:700}.material .cho b{color:var(--side-green)}.material .han b{color:var(--side-red)}.board{box-sizing:border-box;width:min(calc(100vw - var(--sp-lg) * 2), 432px);background:linear-gradient(135deg, var(--board-wood) 0%, var(--board-wood-dark) 100%);border-radius:var(--radius-md);border:2px solid var(--board-wood-dark);padding:clamp(30px,10%,42px);position:relative;box-shadow:inset 0 0 0 1px #00000059,0 4px 24px #00000080}.board-grid{aspect-ratio:8/9;width:100%;position:relative}.board-lines{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.board-lines line{stroke:var(--board-line);stroke-width:1.3px;stroke-linecap:round;vector-effect:non-scaling-stroke}.coord{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--board-line);opacity:.78;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:clamp(8px,1.9vw,11px);font-weight:600;line-height:1;position:absolute}.coord.file{margin-top:clamp(26px,10%,38px);top:100%;transform:translate(-50%,-50%)}.coord.rank{margin-left:calc(-1*clamp(26px,10%,38px));left:0;transform:translate(-50%,-50%)}.cell{aspect-ratio:1;cursor:default;justify-content:center;align-items:center;width:12.5%;display:flex;position:absolute;transform:translate(-50%,-50%)}:is(.cell:has(.piece),.cell:has(.legal-dot)){cursor:pointer}.piece{font-size:clamp(14px,3.2vw,28px);font-weight:700;font-family:var(--font-sans);background:var(--piece-bg);-webkit-user-select:none;user-select:none;border-radius:50%;justify-content:center;align-items:center;width:80%;height:80%;line-height:1;display:flex;box-shadow:0 1px 3px #0006}.piece.cho{color:var(--side-green);border:1.5px solid var(--side-green)}.piece.han{color:var(--side-red);border:1.5px solid var(--side-red)}.piece.small{width:66%;height:66%;font-size:clamp(11px,2.6vw,23px)}.cell.sel .piece{box-shadow:0 0 0 3px var(--gold), 0 1px 3px #0006}.legal-dot{pointer-events:none;background:#c8c8c88c;border-radius:50%;width:28%;height:28%;position:absolute}.arrow-overlay{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.evalbar{align-items:center;gap:var(--sp-sm);width:min(calc(100vw - var(--sp-lg) * 2), 432px);display:flex}.evalbar-track{border-radius:var(--radius-sm);background:var(--surface-elevated);border:1px solid var(--border);flex:1;height:10px;position:relative;overflow:hidden}.evalbar-fill{background:var(--text-muted);height:100%;transition:width .35s}.evalbar-label{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-primary);text-align:right;min-width:3.2em;font-size:15px}.pvline{align-items:center;gap:var(--sp-sm);width:min(calc(100vw - var(--sp-lg) * 2), 432px);min-height:28px;font-family:var(--font-sans);display:flex}.pv-depth{color:var(--text-muted);min-width:3ch;font-size:12px}.pv-moves{gap:var(--sp-sm);margin:0;padding:0;list-style:none;display:flex;overflow-x:auto}.pv-move{color:var(--text-muted);white-space:nowrap;font-size:15px}.pv-move.top{color:var(--reveal-cyan);font-weight:600}.pv-pending{color:var(--text-muted);font-size:15px}.status-banner-group{gap:var(--sp-xs);width:min(calc(100vw - var(--sp-lg) * 2), 432px);flex-direction:column;display:flex}.status-banner{align-items:center;gap:var(--sp-sm);padding:var(--sp-sm) var(--sp-md);border-radius:var(--radius-md);border:1px solid var(--border);font-size:13px;font-family:var(--font-sans);display:flex}.status-banner--warning{background:var(--surface-elevated);border-color:var(--sem-warning);color:var(--sem-warning)}.status-banner--loading{background:var(--surface);border-color:var(--border);color:var(--text-muted)}.status-banner--error{background:var(--surface-elevated);border-color:var(--sem-error);color:var(--sem-error)}.status-banner__text{flex:1}.status-banner__icon{flex-shrink:0}@keyframes spinner-rotate{to{transform:rotate(360deg)}}.status-banner__spinner{border:2px solid var(--border);border-top-color:var(--text-muted);border-radius:50%;flex-shrink:0;width:14px;height:14px;animation:.8s linear infinite spinner-rotate;display:inline-block}.status-banner__retry{padding:var(--sp-2xs) var(--sp-sm);color:var(--sem-error);border-color:var(--sem-error);flex-shrink:0;font-size:13px}.status-banner__retry:hover{background:#e85a471a}.controls{gap:var(--sp-sm);display:flex}.ctrl{font-family:var(--font-sans);color:var(--text-primary);background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--sp-sm) var(--sp-md);cursor:pointer;font-size:15px}.ctrl:hover{border-color:var(--text-muted)}.ctrl.on{background:var(--gold);color:#1a1a1a;border-color:var(--gold)}.editor{gap:var(--sp-sm);width:min(calc(100vw - var(--sp-lg) * 2), 432px);flex-direction:column;display:flex}.palette{gap:var(--sp-2xs);flex-direction:column;align-items:center;display:flex}.palette-row{gap:var(--sp-2xs);display:flex}.palette-chip{background:var(--piece-bg);cursor:pointer;border:1.5px solid #0000;border-radius:50%;width:40px;height:40px;font-size:22px;font-weight:700;line-height:1}.palette-chip.cho{color:var(--side-green);border-color:var(--side-green)}.palette-chip.han{color:var(--side-red);border-color:var(--side-red)}.editor-row{gap:var(--sp-sm);flex-wrap:wrap;justify-content:center;display:flex}.seg{border-radius:var(--radius-sm);display:flex;overflow:hidden}.seg-btn{color:var(--text-muted);cursor:pointer;background:#ffffff0f;border:none;padding:6px 12px}.seg-btn.on{background:var(--gold);color:#1a1a1a}.ctrl.primary:disabled{opacity:.4;cursor:not-allowed}.editor-hint{color:var(--text-muted);text-align:center;font-size:13px}.time-presets,.rule-presets{gap:var(--sp-sm);width:min(calc(100vw - var(--sp-lg) * 2), 432px);flex-wrap:wrap;justify-content:center;display:flex}.time-chip,.rule-chip{font-family:var(--font-sans);color:var(--text-muted);background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;padding:6px 14px;font-size:14px}.time-chip.on,.rule-chip.on{background:var(--gold);color:#1a1a1a;border-color:var(--gold)}.time-chip:disabled,.rule-chip:disabled{opacity:.4;cursor:not-allowed}.piece-picker{gap:var(--sp-sm);flex-direction:column;align-items:center;display:flex}.cell-picker{z-index:10;background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);max-width:calc(100% - 12px);padding:6px;position:absolute;box-shadow:0 6px 24px #00000073}.cell-picker .piece-picker{width:auto}