:root{--bg:#0f1420;--bg-elevated:#171d2c;--border:#262f44;--text:#e8ecf5;--text-muted:#8d98b0;--accent:#4c8dff;--square-light:#e8d5b5;--square-dark:#7d5a3c;--square-dark-active:#a07347;--red-piece:#e04352;--red-piece-dark:#96202d;--blue-piece:#3d7bd6;--blue-piece-dark:#1b4382;--target:#4ade80;--hop:.23s}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none;font-family:Noto Sans Thai,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.app{max-width:1180px;margin:0 auto;padding:20px 16px 48px}.app-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;display:flex}.app-header h1{letter-spacing:-.01em;margin:0;font-size:1.5rem}.subtitle{color:var(--text-muted);margin:4px 0 0;font-size:.9rem}.layout{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);align-items:start;gap:24px;display:grid}@media (width<=900px){.layout{grid-template-columns:1fr}}.board{aspect-ratio:1;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:12px;width:100%;position:relative;overflow:hidden;box-shadow:0 16px 40px #00000073}.squares{grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);display:grid;position:absolute;inset:0}.square{justify-content:flex-start;align-items:flex-end;display:flex;position:relative}.square.light{background:var(--square-light)}.square.dark{background:var(--square-dark)}.square-number{color:#ffffff52;pointer-events:none;padding:2px 0 0 3px;font-size:.55rem}.square.last-move:after{content:"";background:#ffd66647;position:absolute;inset:0}.square.selected:after{content:"";box-shadow:inset 0 0 0 3px var(--accent);position:absolute;inset:0}.square.drop-target:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px #ffffffb3}.target-dot{background:var(--target);opacity:.85;pointer-events:none;border-radius:50%;width:26%;height:26%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.pieces{pointer-events:none;position:absolute;inset:0}.board .piece{width:12.5%;height:12.5%;transition:transform var(--hop) cubic-bezier(.34, 1.2, .64, 1), opacity .18s ease;will-change:transform;justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0}.board .piece.dragging{z-index:5;transition:none}.board .piece.captured{opacity:0;transform-origin:50%}.piece-body{border-radius:50%;justify-content:center;align-items:center;width:76%;height:76%;display:flex;position:relative;box-shadow:0 3px 6px #00000073,inset 0 -3px 6px #0000004d,inset 0 3px 5px #ffffff47}.piece.red .piece-body{background:radial-gradient(circle at 35% 28%, #ff7a86 0%, var(--red-piece) 45%, var(--red-piece-dark) 100%)}.piece.blue .piece-body{background:radial-gradient(circle at 35% 28%, #7fb0ff 0%, var(--blue-piece) 45%, var(--blue-piece-dark) 100%)}.crown{color:#ffe08a;text-shadow:0 1px 2px #0009;font-size:1.05rem;line-height:1}@media (width<=520px){.crown{font-size:.8rem}}.arrow-layer{pointer-events:none;color:#4c8dffe6;stroke:#4c8dffe6;position:absolute;inset:0}.turn-row{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px;display:flex}.turn-label{color:var(--text-muted);font-size:.9rem}.turn-toggle{border:1px solid var(--border);border-radius:10px;display:inline-flex;overflow:hidden}.turn-btn{background:var(--bg-elevated);color:var(--text-muted);font:inherit;cursor:pointer;border:0;padding:8px 18px;font-size:.9rem}.turn-btn.red.active{background:var(--red-piece);color:#fff}.turn-btn.blue.active{background:var(--blue-piece);color:#fff}.badge{color:#ffc157;background:#ffc15729;border-radius:999px;padding:4px 10px;font-size:.8rem}.controls{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.controls.secondary{margin-top:8px}button{font:inherit;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);cursor:pointer;border-radius:9px;padding:9px 14px;font-size:.88rem;transition:background .14s,border-color .14s}button:hover:not(:disabled){background:#1f2739;border-color:#33405c}button:disabled{opacity:.42;cursor:not-allowed}button.active{border-color:var(--accent);color:var(--accent)}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}button.primary:hover:not(:disabled){background:#3d7bef}.lang{flex:none}.status-banner{text-align:center;background:#4c8dff24;border:1px solid #4c8dff59;border-radius:10px;margin-top:12px;padding:10px 14px;font-weight:600}.tray{background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;margin-bottom:12px;padding:10px 12px}.tray-label{color:var(--text-muted);margin-bottom:8px;font-size:.78rem;display:block}.tray-items{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.tray-item{touch-action:none;justify-content:center;align-items:center;width:52px;height:52px;padding:0;display:flex}.tray-item.active{border-color:var(--accent);background:#4c8dff24}.tray-item .piece{pointer-events:none;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.tray-item.eraser{width:auto;color:var(--text-muted);gap:6px;padding:0 12px}.eraser-text{font-size:.8rem}.drag-ghost{pointer-events:none;z-index:50;width:44px;height:44px;margin:-22px 0 0 -22px;position:fixed}.drag-ghost .piece{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.panel{background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;margin-bottom:16px;padding:16px}.panel h2{margin:0 0 12px;font-size:1rem}.panel h3{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:0 0 8px;font-size:.82rem}.panel-header{justify-content:space-between;align-items:center;display:flex}.analysis{padding-left:34px;position:relative}.eval-bar{background:var(--blue-piece);border-radius:5px;flex-direction:column;justify-content:flex-end;width:8px;display:flex;position:absolute;top:16px;bottom:16px;left:14px;overflow:hidden}.eval-red{background:var(--red-piece);width:100%;transition:height .26s}.best-move-row{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.move-chip{font-variant-numeric:tabular-nums;border-radius:8px;padding:6px 12px}.move-chip.large{color:var(--accent);border-color:#4c8dff66;font-size:1.15rem;font-weight:700}.score-value{font-variant-numeric:tabular-nums;font-size:1.2rem;font-weight:700}.score-value.decisive{color:#ffc157;font-size:.95rem}.actions{gap:8px;margin-bottom:14px;display:flex}.actions .primary{flex:1}.stats{gap:20px;margin:0 0 12px;display:flex}.stats div{flex-direction:column;gap:2px;display:flex}.stats dt{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.72rem}.stats dd{font-variant-numeric:tabular-nums;margin:0;font-weight:600}.subsection{border-top:1px solid var(--border);margin-top:12px;padding-top:12px}.candidate-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.candidate-list li{justify-content:space-between;align-items:center;gap:10px;display:flex}.candidate-score{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:.9rem}.pv{font-variant-numeric:tabular-nums;color:var(--text-muted);word-break:break-word;margin:0;font-size:.9rem;line-height:1.7}.settings{flex-direction:column;gap:12px;display:flex}.field{color:var(--text-muted);flex-direction:column;gap:6px;font-size:.85rem;display:flex}.field input[type=range]{width:100%;accent-color:var(--accent)}.checkbox{cursor:pointer;align-items:center;gap:8px;font-size:.88rem;display:flex}.checkbox input{accent-color:var(--accent);width:16px;height:16px}.engine-note{color:var(--text-muted);margin:12px 0 0;font-size:.75rem}.muted{color:var(--text-muted)}.move-list{font-variant-numeric:tabular-nums;flex-wrap:wrap;gap:6px;max-height:220px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.move-list li{background:#ffffff0a;border-radius:7px;align-items:center;gap:6px;padding:4px 10px;font-size:.85rem;display:flex}.move-list .dot{border-radius:50%;width:8px;height:8px}.move-list li.red .dot{background:var(--red-piece)}.move-list li.blue .dot{background:var(--blue-piece)}.spinner{border:2px solid #fff3;border-top-color:var(--accent);border-radius:50%;width:15px;height:15px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.board .piece{transition:none}.spinner{animation:none}}.preset-row{gap:6px;margin-top:6px;display:flex}.preset{flex:1;padding:5px 8px;font-size:.78rem}.preset.active{border-color:var(--accent);color:var(--accent);background:#4c8dff1f}.header-status{align-items:center;gap:8px;display:flex}.book-badge{color:var(--target);white-space:nowrap;background:#4ade8024;border-radius:999px;padding:3px 9px;font-size:.72rem}.small{font-size:.82rem}.link-button{color:var(--text-muted);background:0 0;border:0;padding:0;font-size:.8rem}.review .primary{width:100%;margin-top:10px}.review-progress{flex-direction:column;gap:6px;display:flex}.progress-track{background:#ffffff14;border-radius:3px;height:6px;overflow:hidden}.progress-fill{background:var(--accent);height:100%;transition:width .2s}.eval-graph{background:#ffffff08;border-radius:8px;width:100%;height:70px;margin:4px 0 12px;display:block}.eval-graph-axis{stroke:#ffffff2e;stroke-width:1px;vector-effect:non-scaling-stroke}.eval-graph-area{fill:#e043522e}.eval-graph-line{fill:none;stroke:var(--red-piece);stroke-width:2px;vector-effect:non-scaling-stroke}.review-sides{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;display:grid}.review-side-head{flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px;font-size:.85rem;display:flex}.review-side-head .dot{border-radius:50%;width:8px;height:8px}.review-side.red .dot{background:var(--red-piece)}.review-side.blue .dot{background:var(--blue-piece)}.accuracy{color:var(--text-muted);font-size:.78rem}.band-list{flex-direction:column;gap:2px;margin:0;padding:0;font-size:.78rem;list-style:none;display:flex}.band-list li{color:var(--text-muted);gap:6px;display:flex}.band-count{text-align:right;font-variant-numeric:tabular-nums;min-width:1.4em;color:var(--text)}.graded-moves{flex-direction:column;gap:3px;max-height:260px;margin:0;padding:0;font-size:.82rem;list-style:none;display:flex;overflow-y:auto}.graded-moves li{background:#ffffff08;border-radius:6px;flex-wrap:wrap;align-items:baseline;gap:7px;padding:4px 8px;display:flex}.graded-moves .ply{color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:2em}.graded-moves .played{font-variant-numeric:tabular-nums;font-weight:600}.tag{border-radius:999px;padding:1px 7px;font-size:.7rem}.tag.best{color:#4ade80;background:#4ade8029}.tag.good{color:#7dd3fc;background:#7dd3fc24}.tag.inaccuracy{color:#facc15;background:#facc1529}.tag.mistake{color:#fb923c;background:#fb923c29}.tag.blunder{color:#f87171;background:#f871712e}.better{color:var(--text-muted);font-size:.78rem}.better em{color:#f87171;font-style:normal}.refining{color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.72rem}.header-actions{flex:none;gap:8px;display:flex}.watch-stage{background:#000;border-radius:10px;width:100%;min-height:120px;margin:10px 0;position:relative;overflow:hidden}.watch-video{width:100%;height:auto;display:block}.watch-canvas{display:none}.watch-overlay{cursor:crosshair;touch-action:none;width:100%;height:100%;position:absolute;inset:0}.watch-box{fill:none;stroke:var(--target);stroke-width:2px;vector-effect:non-scaling-stroke}.watch-box.dragging{stroke:#fff;stroke-dasharray:6 4}.watch-box.uncertain{stroke:#f87171}.watch-arrow{stroke:#facc15;stroke-width:4px;color:#facc15;vector-effect:non-scaling-stroke}.watch-status{color:var(--text-muted);margin:0;font-size:.82rem}.watch-status.uncertain{color:#f87171}.watch-suggestion{color:#facc15;font-variant-numeric:tabular-nums;margin:6px 0 0;font-size:1.05rem;font-weight:700}.watch-turn{white-space:nowrap;border-radius:999px;padding:3px 9px;font-size:.75rem}.watch-turn.you{color:var(--target);background:#4ade8029}.watch-turn.them{color:var(--text-muted);background:#ffffff14}.watch-help{color:var(--text-muted);flex-direction:column;gap:8px;margin:8px 0 0;padding-left:20px;font-size:.8rem;line-height:1.65;display:flex}.watch-help li::marker{color:var(--accent)}.build-id{color:var(--text-muted);opacity:.65;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.72rem}.watch-reading{margin:8px 0}.watch-reading-grid{grid-template-columns:repeat(8,1fr);gap:2px;max-width:190px;display:grid}.watch-reading-grid .rc{aspect-ratio:1;background:#ffffff0a;border-radius:3px}.watch-reading-grid .rc.off{background:0 0}.watch-reading-grid .rc.empty{background:#ffffff1a}.watch-reading-grid .rc.bottom{background:var(--red-piece)}.watch-reading-grid .rc.top{background:var(--blue-piece)}.watch-reading-grid .rc.unknown{background:repeating-linear-gradient(45deg,#f87171 0 3px,#0000 3px 6px)}.watch-reading-counts{color:var(--text-muted);font-variant-numeric:tabular-nums;margin:6px 0 0;font-size:.75rem}.watch-problems{color:#facc15;flex-direction:column;gap:6px;margin:8px 0;padding-left:18px;font-size:.8rem;line-height:1.55;display:flex}.watch-history{font-variant-numeric:tabular-nums;background:#ffffff08;border-radius:8px;max-height:190px;margin:10px 0 0;padding:0;list-style:none;overflow-y:auto}.watch-history li{border-bottom:1px solid #ffffff0d;align-items:baseline;gap:10px;padding:6px 10px;font-size:13px;display:flex}.watch-history li:first-child{background:#facc1514}.watch-history li:last-child{border-bottom:none}.watch-history .who{flex:0 0 3.2rem;font-size:12px;font-weight:600}.watch-history li.user .who{color:#4ade80}.watch-history li.bot .who{color:#f87171}.watch-history .what{color:#d5dbe8}