:root{--bg:#0f1419;--text:#e7e9ea;--muted:#8b98a5;--board-bg:#e8d4b8;--line:#4a3728;--river:#5c4a3a;--btn:#1d9bf0;--btn-hover:#1a8cd8;color:var(--text);background:var(--bg);font-family:system-ui,Segoe UI,Roboto,sans-serif;line-height:1.45}*{box-sizing:border-box}body{margin:0}#app{max-width:520px;margin:0 auto;padding:1.25rem 1rem 2rem}.top h1{margin:0 0 .35rem;font-size:1.35rem;font-weight:600}.sub{color:var(--muted);margin:0;font-size:.9rem}.bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.85rem;margin:1.25rem 0;display:flex}@media (width<=520px){.bar{text-align:center;justify-content:center}}.mode-row{flex-wrap:wrap;gap:1rem;margin-top:.75rem;display:flex}.radio{cursor:pointer;color:var(--text);align-items:center;gap:.4rem;font-size:.92rem;display:inline-flex}.radio input{accent-color:var(--btn)}.status{font-weight:500}.bar-right{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;display:flex}@media (width<=520px){.bar-right{gap:.6rem}.btn{padding:.45rem .9rem;font-size:.88rem}}.diff-row{color:var(--muted);align-items:center;gap:.4rem;font-size:.88rem;display:inline-flex}.diff-row[hidden]{display:none!important}.select{font:inherit;color:var(--text);cursor:pointer;background:#0f141a;border:1px solid #2a2f37;border-radius:8px;padding:.3rem .55rem;font-size:.88rem}.btn{color:#fff;background:var(--btn);cursor:pointer;white-space:nowrap;border:none;border-radius:999px;padding:.5rem 1.1rem;font-size:.92rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 10px #1d9bf01a}.btn:active{transform:scale(.95);box-shadow:0 2px 5px #1d9bf033}.btn:hover{background:var(--btn-hover)}.btn-start{background:#16a34a}.btn-start:hover{background:#15803d}.btn-start[hidden]{display:none!important}.start-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:5;background:#070b1080;place-items:center;animation:.16s ease-out fadeIn;display:grid;position:absolute;inset:0}.start-overlay[hidden]{display:none!important}.start-card{text-align:center;background:linear-gradient(#16202b 0%,#0f1620 100%);border:1px solid #2a3441;border-radius:14px;min-width:240px;max-width:320px;padding:1.1rem 1.3rem;box-shadow:0 12px 32px #00000073}.start-title{color:#f8fafc;margin-bottom:.35rem;font-size:1.1rem;font-weight:700}.start-sub{color:var(--muted);margin-bottom:.85rem;font-size:.86rem;line-height:1.45}.start-card .btn-start{padding:.5rem 1.2rem;font-size:.92rem}.wrap{background:#111820;border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:1rem;padding:.5rem;display:flex;box-shadow:0 8px 32px #00000059}.board-stage{flex-direction:column;align-items:center;gap:.5rem;padding:.55rem 0;display:flex}.board-area{border-radius:12px;position:relative;overflow:hidden}.board-bg-layer{z-index:0;pointer-events:none;background-color:#7a5035;background-image:none;background-position:0 0;background-repeat:no-repeat;border-radius:12px;position:absolute;top:0;left:0}#board{z-index:1;touch-action:manipulation;background:0 0;display:block;position:relative}.clock-cell{background:linear-gradient(#18222e 0%,#111922 100%);border:1px solid #2a3441;border-radius:50%;width:72px;height:72px;transition:border-color .18s,transform .18s,box-shadow .18s;position:relative;box-shadow:0 4px 14px #0006}.clock-cell[hidden]{display:none!important}.clock-cell.clock-active{border-color:#3b82f6bf;transform:scale(1.05);box-shadow:0 0 0 3px #3b82f62e,0 6px 16px #00000073}.clock-ring{width:100%;height:100%;position:absolute;inset:0;transform:rotate(-90deg)}.clock-ring .ring-bg{fill:none;stroke:#ffffff1f;stroke-width:7px}.clock-ring .ring-fg{fill:none;stroke-width:7px;stroke-linecap:round;transition:stroke-dashoffset .18s,stroke .2s}.clock-black .ring-fg{stroke:#93c5fd}.clock-red .ring-fg{stroke:#fca5a5}.clock-ring .ring-fg.ring-urgent{stroke:#ef4444;animation:.9s ease-in-out infinite ringPulse}@keyframes ringPulse{0%,to{opacity:1}50%{opacity:.55}}.clock-inner{flex-direction:column;justify-content:center;align-items:center;gap:.05rem;display:flex;position:absolute;inset:0}.clock-side{text-transform:uppercase;letter-spacing:.06em;color:#ffffff8c;white-space:nowrap;font-size:.6rem;font-weight:700;line-height:1}.clock-time{font-variant-numeric:tabular-nums;color:#e8f0f8;font-size:1.05rem;font-weight:700;line-height:1.1}.clock-black .clock-time{color:#bfdbfe}.clock-red .clock-time{color:#fecaca}@media (width<=420px){.clock-cell{width:60px;height:60px}.clock-side{font-size:.55rem}.clock-time{font-size:.92rem}}.timer{color:#c9e7ff;background:#1d9bf01f;border:1px solid #1d9bf059;border-radius:10px;align-items:center;gap:.55rem;margin:.65rem 0 0;padding:.45rem .75rem;font-size:.88rem;font-weight:500;display:inline-flex}.timer-dot{background:#1d9bf0;border-radius:50%;width:8px;height:8px;animation:1s ease-in-out infinite pulse;display:inline-block}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}.hint code{color:#c4cdd5;word-break:break-all;font-size:.82em}.hint{color:var(--muted);margin:.85rem 0 0;font-size:.82rem}.sound-toggle{white-space:nowrap;font-size:.9rem}.gameover{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;background:#070b1099;place-items:center;animation:.16s ease-out fadeIn;display:grid;position:fixed;inset:0}.gameover[hidden]{display:none}.gameover-card{text-align:center;background:linear-gradient(#16202b 0%,#0f1620 100%);border:1px solid #2a3441;border-radius:16px;min-width:280px;max-width:360px;padding:1.5rem 1.75rem;animation:.22s cubic-bezier(.2,.9,.3,1.2) popIn;box-shadow:0 18px 48px #0000008c}.gameover-title{color:#f8fafc;letter-spacing:.01em;margin-bottom:.45rem;font-size:1.4rem;font-weight:700}.gameover-sub{color:var(--muted);margin-bottom:1.15rem;font-size:.92rem;line-height:1.5}.gameover-card .btn{padding:.55rem 1.4rem;font-size:.95rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.history-stage{background:#0f1620;border:1px solid #2a3441;border-radius:12px;flex-direction:column;flex:200px;min-width:240px;max-width:300px;height:520px;margin-top:.55rem;display:flex}.history-stage[hidden]{display:none!important}.history-header{color:#e8f0f8;border-bottom:1px solid #2a3441;justify-content:space-between;align-items:center;padding:.75rem 1rem;font-weight:600;display:flex}.history-list{font-variant-numeric:tabular-nums;flex-direction:column;flex:1;gap:.25rem;padding:.5rem;font-size:.85rem;display:flex;overflow-y:auto}.history-row{background:#ffffff05;border-radius:6px;align-items:center;padding:.35rem .5rem;display:flex}.history-row:nth-child(2n){background:0 0}.history-row.active-move{background:#1d9bf026;border:1px solid #1d9bf04d}.history-num{width:28px;color:var(--muted)}.history-move{text-align:center;flex:1}.history-move.red{color:#fca5a5}.history-move.black{color:#93c5fd}.history-controls{background:#16202b;border-top:1px solid #2a3441;border-radius:0 0 12px 12px;justify-content:center;gap:.25rem;padding:.75rem;display:flex}.history-controls .btn{color:#e8f0f8;background:#2a3441;padding:.4rem .75rem;font-size:1rem}.history-controls .btn:hover{background:#3b4859}.history-controls .btn:disabled{opacity:.4;cursor:not-allowed;background:#1f2731}@media (width<=768px){#app{max-width:100%}.history-stage{width:100%;max-width:unset;height:300px;margin-bottom:1rem}}.online-panel{margin:1rem 0 0;animation:.2s ease-out fadeIn}.online-panel[hidden]{display:none!important}.online-panel-card{background:linear-gradient(#16202b 0%,#0f1a26 100%);border:1px solid #2a3e55;border-radius:16px;flex-direction:column;gap:.85rem;padding:1.25rem 1.4rem;display:flex}.online-panel-title{color:#e8f5ff;font-size:1.1rem;font-weight:700}.online-label{color:#8b98a5;flex-direction:column;gap:.35rem;font-size:.85rem;font-weight:500;display:flex}.online-name-input{font:inherit;color:#e8f0f8;background:#0d1620;border:1.5px solid #2a3e55;border-radius:10px;outline:none;padding:.5rem .8rem;font-size:.95rem;transition:border-color .2s}.online-name-input:focus{border-color:#1d9bf0}.online-btn-group{flex-wrap:wrap;gap:.65rem;display:flex}.btn-online-primary{background:linear-gradient(135deg,#1d9bf0,#07c);flex:1;min-width:140px;box-shadow:0 4px 14px #1d9bf040}.btn-online-primary:hover{background:linear-gradient(135deg,#1a8cd8,#0066b3)}.btn-online-secondary{background:#1e2d3e;border:1.5px solid #2a3e55;flex:1;min-width:120px}.btn-online-secondary:hover{background:#243447;border-color:#3a5470}.online-join-row{align-items:center;gap:.5rem;display:flex}.online-room-code{font:inherit;letter-spacing:.12em;text-transform:uppercase;color:#1d9bf0;background:#0d1620;border:1.5px solid #2a3e55;border-radius:10px;outline:none;width:130px;padding:.5rem .75rem;font-size:.95rem;font-weight:700;transition:border-color .2s}.online-room-code:focus{border-color:#1d9bf0}.online-status{color:#1d9bf0;min-height:1.2em;font-size:.9rem;font-weight:500}.online-room-share{color:#8b98a5;background:#1d9bf014;border:1px solid #1d9bf040;border-radius:10px;flex-wrap:wrap;align-items:center;gap:.6rem;padding:.65rem .85rem;font-size:.85rem;display:flex}.online-room-share[hidden]{display:none!important}.online-room-link{color:#7dd3fc;word-break:break-all;flex:1;font-size:.82rem}.btn-online-copy{background:#1e3a5f;border:1px solid #2a5485;border-radius:8px;padding:.3rem .7rem;font-size:.8rem}.btn-online-cancel{color:#f87171;background:#2a1a1a;border:1px solid #4a2525}.btn-online-cancel:hover{background:#3a1f1f}.btn-online-cancel[hidden]{display:none!important}.online-player-bar{background:linear-gradient(90deg,#12202e,#0f1a26,#12202e);border:1px solid #2a3e55;border-radius:40px;justify-content:center;align-items:center;gap:1rem;margin:.5rem 0;padding:.6rem 1rem;animation:.2s ease-out fadeIn;display:flex}.online-player-bar[hidden]{display:none!important}.player-bar-item{align-items:center;gap:.5rem;font-size:.92rem;font-weight:600;display:flex}.player-bar-vs{color:#4a5a6a;letter-spacing:.08em;font-size:.78rem;font-weight:700}.player-bar-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.red-dot{background:#ef4444;box-shadow:0 0 6px #ef444499}.black-dot{background:#475569;box-shadow:0 0 6px #47556999}.player-bar-name{color:#e8f0f8;text-overflow:ellipsis;white-space:nowrap;max-width:110px;overflow:hidden}.online-countdown{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:200;background:#070b12d1;place-items:center;animation:.2s ease-out fadeIn;display:grid;position:fixed;inset:0}.online-countdown[hidden]{display:none!important}.online-countdown-card{text-align:center;flex-direction:column;align-items:center;gap:.65rem;display:flex}.online-opponent-name{color:#e8f5ff;font-size:1.25rem;font-weight:700}.online-my-color{color:#8b98a5;font-size:.95rem}.online-countdown-num{color:#1d9bf0;text-shadow:0 0 40px #1d9bf080;font-size:5rem;font-weight:900;line-height:1;animation:1s ease-out infinite countPulse}@keyframes countPulse{0%{opacity:.7;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}.online-disconnect{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:150;background:#070b12bf;place-items:center;animation:.2s ease-out fadeIn;display:grid;position:fixed;inset:0}.online-disconnect[hidden]{display:none!important}.online-disconnect-card{text-align:center;background:linear-gradient(#1a1208 0%,#120d06 100%);border:1px solid #3a2e18;border-radius:16px;flex-direction:column;align-items:center;gap:.65rem;padding:2rem 2.5rem;display:flex;box-shadow:0 20px 60px #0009}.online-disconnect-title{color:#fbbf24;font-size:1.1rem;font-weight:700}.online-grace-timer{color:#8b7a4a;font-variant-numeric:tabular-nums;font-size:1rem}