:root{--bg: #05070d;--panel: #0b1020;--cyan: #39e8ff;--cyan-dim: #1a6b7a;--text: #cfeeff;--text-muted: #86b8cc;--danger: #ff4d6a;--good: #39ff6a;--warn: #ffb020}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Source Code Pro,Consolas,SF Mono,Courier New,monospace;overflow:hidden;-webkit-tap-highlight-color:transparent}#app{display:flex;flex-direction:column;height:100vh;height:100dvh}#hud{padding:10px 16px;background:linear-gradient(180deg,#0c1326,#070b16);border-bottom:1px solid var(--cyan-dim);box-shadow:0 0 18px #39e8ff26}.brand{font-weight:700;letter-spacing:2px;color:var(--cyan);text-shadow:0 0 8px var(--cyan)}.brand span{color:var(--text)}button{background:#39e8ff14;color:var(--cyan);border:1px solid var(--cyan);padding:7px 14px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:15px;letter-spacing:1px;transition:background .15s,box-shadow .15s}button:hover{background:#39e8ff33;box-shadow:0 0 12px #39e8ff66}button:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}button.active{background:#39e8ff40;box-shadow:0 0 12px #39e8ff80;border-color:var(--cyan)}.home-btn{display:inline-block;background:#39e8ff14;color:var(--cyan);border:1px solid var(--cyan);padding:7px 14px;border-radius:4px;font-family:inherit;font-size:15px;letter-spacing:1px;text-decoration:none;white-space:nowrap;touch-action:manipulation;transition:background .15s,box-shadow .15s}.home-btn:hover{background:#39e8ff33;box-shadow:0 0 12px #39e8ff66}.donate-btn{display:inline-block;background:#ff4d6a14;color:var(--danger);border:1px solid var(--danger);padding:7px 14px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:15px;letter-spacing:1px;text-decoration:none;transition:background .15s,box-shadow .15s}.donate-btn:hover{background:#ff4d6a33;box-shadow:0 0 12px #ff4d6a66}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#02040ad9;display:flex;align-items:center;justify-content:center}.overlay[hidden]{display:none}.overlay-card{text-align:center;padding:40px 60px;border:1px solid var(--cyan);border-radius:8px;background:var(--panel);box-shadow:0 0 40px #39e8ff4d}:root{--magenta: #ff2e8f}#hud{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:8px;column-gap:16px}.hud-section{display:flex;align-items:center;flex-wrap:wrap;row-gap:6px;gap:14px;min-width:0}.hud-left{justify-content:flex-start}.hud-right{justify-content:flex-end;gap:10px}.stat{font-size:13px;font-weight:600;padding:5px 10px;border-radius:6px;background:#39e8ff14;border:1px solid var(--cyan-dim);white-space:nowrap}.turn-badge.turn-white{color:var(--cyan);border-color:var(--cyan-dim);background:#39e8ff14}.turn-badge.turn-black{color:var(--magenta);border-color:#ff2e8f73;background:#ff2e8f1a}.status-badge{color:var(--danger);border-color:var(--danger);background:#ff4d6a1a}.auto-toggle{font-size:13px;color:var(--text-muted);display:flex;align-items:center;gap:7px;cursor:pointer;letter-spacing:.5px;text-transform:uppercase}.auto-toggle input[type=checkbox]{-moz-appearance:none;appearance:none;-webkit-appearance:none;margin:0;width:32px;height:18px;border:1px solid var(--cyan-dim);border-radius:10px;background:#39e8ff0d;position:relative;cursor:pointer;flex-shrink:0;transition:border-color .15s,background .15s,box-shadow .15s}.auto-toggle input[type=checkbox]:after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--cyan-dim);transition:left .15s,background .15s,box-shadow .15s}.auto-toggle input[type=checkbox]:hover{border-color:var(--cyan)}.auto-toggle input[type=checkbox]:checked{border-color:var(--cyan);background:#39e8ff26;box-shadow:0 0 8px #39e8ff59}.auto-toggle input[type=checkbox]:checked:after{left:16px;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}.auto-toggle input[type=checkbox]:focus-visible{outline:1px solid var(--cyan);outline-offset:2px}button:disabled{pointer-events:none}#main{flex:1;display:flex;min-height:0}#main[hidden]{display:none}#dashboard{flex:1;overflow-y:auto;padding:28px 32px 40px}#dashboard[hidden]{display:none}.dash-title{font-size:15px;letter-spacing:2px;color:var(--cyan);text-shadow:0 0 10px rgba(57,232,255,.4);margin:0 0 18px}.dash-subtitle{font-size:13px;letter-spacing:1.5px;color:var(--text-muted);text-transform:uppercase;margin:28px 0 12px;padding-top:18px;border-top:1px solid var(--cyan-dim)}.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}.game-tile{position:relative;background:var(--panel);border:1px solid var(--cyan-dim);border-radius:10px;padding:16px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s}.game-tile:hover{border-color:var(--cyan);box-shadow:0 0 16px #39e8ff33;transform:translateY(-2px)}.game-tile.new-tile{display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:13px;letter-spacing:1px;min-height:96px;border-style:dashed}.game-tile.new-tile:hover{color:var(--cyan)}.tile-kind{display:inline-block;font-size:10px;letter-spacing:1px;padding:3px 8px;border-radius:10px;margin-bottom:10px}.tile-kind.kind-cpu{color:var(--cyan);background:#39e8ff1f}.tile-kind.kind-online{color:var(--magenta);background:#ff2e8f1f}.tile-preview{display:block;width:100%;aspect-ratio:1 / 1;border-radius:4px;background:#060a14;margin-bottom:10px}.tile-info{font-size:13px;color:var(--text);line-height:1.6}.tile-meta{font-size:11px;color:var(--text-muted);margin-top:8px}.tile-delete{position:absolute;top:10px;right:10px;width:22px;height:22px;padding:0;line-height:1;border-radius:50%;font-size:13px;color:var(--text-muted);background:#ff4d6a14;border-color:var(--cyan-dim)}.tile-delete:hover{color:var(--danger);border-color:var(--danger);background:#ff4d6a2e}.history-list{display:flex;flex-direction:column;gap:6px}.history-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--panel);border:1px solid var(--cyan-dim);border-radius:8px;font-size:12px;color:var(--text-muted);cursor:pointer;transition:border-color .15s}.history-row:hover{border-color:var(--cyan)}.history-row .tile-kind{margin-bottom:0;flex-shrink:0}.history-row .history-result{color:var(--text);flex:1}.history-row .history-delete{width:22px;height:22px;padding:0;line-height:1;border-radius:50%;font-size:13px;flex-shrink:0}.history-row .history-delete:hover{color:var(--danger);border-color:var(--danger)}.dash-empty{color:var(--text-muted);font-size:13px}#canvasWrap{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:0;overflow:hidden;padding:16px}#board{display:block;flex-shrink:0;box-shadow:0 0 28px #39e8ff2e;border-radius:4px;cursor:pointer;touch-action:manipulation}.confirm-move-btn{position:absolute;z-index:5;width:38px;height:38px;padding:0;margin:0;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--good);background:#05070deb;color:var(--good);font-size:20px;font-weight:700;line-height:1;box-shadow:0 0 12px #39ff6a99;touch-action:manipulation}.confirm-move-btn:hover{background:#39ff6a2e;box-shadow:0 0 16px #39ff6acc}.confirm-move-btn[hidden]{display:none}.replay-controls{display:flex;align-items:center;gap:10px}.replay-controls[hidden]{display:none}.replay-controls button{font-size:13px;padding:7px 12px}.replay-counter{font-size:13px;color:var(--text-muted);min-width:64px;text-align:center}#sidebar{width:260px;flex-shrink:0;padding:16px;overflow-y:auto;background:var(--panel);border-left:1px solid var(--cyan-dim)}#sidebar h2{font-size:13px;letter-spacing:1px;color:var(--cyan);margin:0 0 8px;text-transform:uppercase}#sidebar h2:not(:first-child){margin-top:18px}.mode-toggle{display:flex;gap:8px;margin-bottom:10px}.mode-btn{flex:1;font-size:11px;padding:8px 6px}.mode-btn.active{background:#39e8ff2e;border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 10px #39e8ff40}.diff-select{display:flex;gap:6px;margin-bottom:18px}.diff-select[hidden]{display:none}.diff-btn{flex:1;padding:7px 4px;border:1px solid var(--cyan-dim);border-radius:14px;background:var(--panel);color:var(--text-muted);font-size:10px;letter-spacing:.5px;cursor:pointer;text-align:center;line-height:1.5;transition:border-color .15s,color .15s,background .15s,box-shadow .15s}.diff-btn .diff-elo{display:block;font-size:9px;opacity:.75}.diff-btn:hover{border-color:var(--cyan);color:var(--text)}.diff-btn.active{color:var(--bg);font-weight:600}.diff-btn.diff-easy.active{background:var(--good);border-color:var(--good);box-shadow:0 0 10px #39ff6a80}.diff-btn.diff-normal.active{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 10px #39e8ff80}.diff-btn.diff-hard.active{background:var(--danger);border-color:var(--danger);box-shadow:0 0 10px #ff4d6a80}.online-panel{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}.online-panel[hidden]{display:none}.text-input{font-family:inherit;font-size:12px;background:#39e8ff0d;border:1px solid var(--cyan-dim);border-radius:6px;color:var(--text);padding:7px 9px;width:100%}.text-input:focus{outline:none;border-color:var(--cyan)}.online-row{display:flex;gap:6px}.online-row .code-input{flex:1;min-width:0}.online-divider{font-size:11px;color:var(--text-muted);text-align:center;text-transform:uppercase;letter-spacing:1px}.online-status{margin-bottom:16px}.online-status:empty{display:none}#newGameStatus{margin:4px 0 0}.online-state{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:1.5px;line-height:1.4;text-transform:uppercase;color:var(--cyan)}.online-dot{width:9px;height:9px;flex-shrink:0;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}.state-active{color:var(--good)}.state-waiting{color:var(--warn)}.state-error{color:var(--danger)}.state-waiting .online-dot,.state-busy .online-dot{animation:online-pulse 1.4s ease-in-out infinite}@keyframes online-pulse{50%{opacity:.25}}.online-players{display:flex;align-items:center;gap:8px;margin:12px 0}.online-player{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;color:var(--text)}.online-player .piece-icon{width:24px;height:24px}.online-player span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.online-player.pending span{color:var(--text-muted);font-style:italic}.online-vs{font-size:11px;color:var(--text-muted);text-transform:uppercase}.code-copy-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:8px 12px;font-size:19px;font-weight:700;letter-spacing:3.5px}.code-copy-btn.copied{color:var(--good);border-color:var(--good)}.code-icon{display:flex;flex-shrink:0}.code-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.captured-row{margin-bottom:8px}.captured-label{font-size:11px;color:var(--text-muted);margin-bottom:4px}.captured-pieces{display:flex;flex-wrap:wrap;gap:2px;min-height:26px}.piece-icon{width:26px;height:26px;flex-shrink:0;filter:drop-shadow(0 0 3px currentColor)}.undo-btn{display:block;width:100%;font-size:13px;padding:8px;margin-bottom:10px}.move-list{list-style:none;margin:0;padding:0;font-size:13px}.move-list li{display:flex;gap:8px;padding:3px 0;border-bottom:1px solid rgba(57,232,255,.08)}.move-list .move-num{color:var(--text-muted);width:24px;flex-shrink:0}.replay-move{cursor:pointer;border-radius:3px;padding:0 3px;margin:0 -3px}.replay-move:hover{background:#39e8ff26}.replay-move.current{background:#39e8ff4d;color:var(--cyan)}.overlay{z-index:10}.overlay-card{max-width:420px}.overlay-card h2{margin:0 0 10px;color:var(--cyan);text-shadow:0 0 10px rgba(57,232,255,.5)}.overlay-card p{color:var(--text-muted);font-size:13px;line-height:1.6;text-align:left}.overlay-card p em{font-style:normal;color:var(--cyan)}.overlay-card button{margin-top:12px}.newgame-card{position:relative;text-align:center;width:min(320px,calc(100vw - 48px));padding:26px 24px 28px}.newgame-card h2{margin-bottom:18px}.newgame-card .mode-toggle,.newgame-card .diff-select,.newgame-card .online-panel{text-align:left}.newgame-card .mode-toggle{margin-bottom:14px}.newgame-card .diff-select{margin-bottom:0}.newgame-card .diff-btn{border-radius:6px;padding:10px 4px;font-size:11px}.newgame-card .diff-btn .diff-elo{font-size:10px;margin-top:2px}.settings-card{text-align:left}.settings-card h2{text-align:center}.settings-label{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}.settings-card .settings-hint{margin:6px 0 16px;font-size:11px}.settings-toggle{margin-bottom:12px}.settings-save{display:block;width:100%;margin-top:18px}.overlay-close{position:absolute;top:10px;right:10px;width:26px;height:26px;padding:0;margin-top:0;line-height:1;border-radius:50%;font-size:16px;color:var(--text-muted);background:#39e8ff0d;border-color:var(--cyan-dim)}.overlay-close:hover{color:var(--cyan);border-color:var(--cyan);background:#39e8ff26}.promo-options{display:flex;gap:10px;justify-content:center;margin-top:6px}.promo-options button{display:flex;align-items:center;justify-content:center;padding:8px}.promo-options .piece-icon{width:48px;height:48px}@media(max-width:720px){#main{flex-direction:column}#canvasWrap{padding:8px}#sidebar{width:auto;border-left:none;border-top:1px solid var(--cyan-dim);max-height:160px}}