*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg,#05070f);color:#dbe9ff;-webkit-font-smoothing:antialiased;font-family:PingFang SC,Microsoft YaHei,Noto Sans CJK SC,sans-serif;overflow:hidden}:root{--bg:#04070d;--panel:#080e1a9e;--panel-strong:#080e1ae6;--line:#00e5ff8c;--line-soft:#00e5ff66;--accent:#00e5ff;--accent-dim:#00e5ffb3;--text:#dbe9ff;--text-dim:#dbe9ff9e;--text-faint:#dbe9ff66;--danger:#ff3d2e;--danger-text:#ff8a5c;--danger-soft:#ff3d2e8c;--gold:#ffe066;--gold-soft:#ffe06666;--turn-red:#ff3d2e;--turn-black:#7ab8ff;--turn-red-text:#ff8a5c;--turn-black-text:#7ab8ff;--title-grad:linear-gradient(90deg, #00e5ff, #ff3d2e, #00e5ff);--star-a:#ffffffb3;--star-b:#00e5ffa6;--star-c:#00e5ff80;--star-d:#ff3d2e80;--backdrop:#04070dad;--scrollbar:#00e5ff80}:root[data-theme=wood]{--bg:#261708;--panel:#422a14b3;--panel-strong:#422a14f0;--line:#ffecbea6;--line-soft:#ffecbe73;--accent:#f2dca8;--accent-dim:#f2dca8d9;--text:#fdf4dd;--text-dim:#fdf4ddc7;--text-faint:#fdf4dd85;--danger:#e07a48;--danger-text:#f0b890;--danger-soft:#e07a4899;--gold:#ffe08a;--gold-soft:#ffe08a73;--turn-red:#cf5a3c;--turn-black:#f2dca8;--turn-red-text:#f0b890;--turn-black-text:#f2dca8;--title-grad:linear-gradient(90deg, #f2dca8, #cf5a3c, #f2dca8);--star-a:#fdf4ddb3;--star-b:#f2dca899;--star-c:#f2dca880;--star-d:#e07a488c;--backdrop:#261708b8;--scrollbar:#f2dca899}.app{height:100%;padding:calc(12px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom));flex-direction:column;gap:10px;display:flex;position:relative}.starfield{z-index:0;pointer-events:none;background:radial-gradient(1px 1px at 12% 22%, var(--star-a), transparent 60%), radial-gradient(1px 1px at 33% 71%, var(--star-b), transparent 60%), radial-gradient(1.5px 1.5px at 51% 12%, var(--star-a), transparent 60%), radial-gradient(1px 1px at 67% 84%, var(--star-c), transparent 60%), radial-gradient(1px 1px at 82% 35%, var(--star-a), transparent 60%), radial-gradient(1.5px 1.5px at 93% 66%, var(--star-d), transparent 60%), radial-gradient(1px 1px at 7% 88%, var(--star-c), transparent 60%), radial-gradient(1px 1px at 45% 45%, var(--star-a), transparent 60%);animation:4s ease-in-out infinite alternate twinkle;position:fixed;inset:0}@keyframes twinkle{0%{opacity:.55}to{opacity:1}}.btn{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 0 10px var(--line-soft);border-radius:8px;padding:6px 14px;font-size:14px;transition:transform .15s,box-shadow .15s,color .15s}.btn:hover:not(:disabled){box-shadow:0 0 18px var(--accent-dim);color:#fff;transform:translateY(-1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.active{border-color:var(--gold);color:var(--gold);box-shadow:0 0 14px var(--gold-soft)}.btn-primary{background:linear-gradient(135deg, var(--danger-soft), var(--accent-dim));border-color:var(--danger);color:#fff;box-shadow:0 0 16px var(--danger-soft)}.btn-primary:hover:not(:disabled){box-shadow:0 0 26px var(--danger-soft)}.topbar{z-index:3;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex;position:relative}.topbar-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.turn-indicator{letter-spacing:2px;background:var(--panel);border:1px solid var(--line-soft);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:8px;align-items:center;gap:8px;padding:6px 14px;font-size:16px;font-weight:700;display:flex}.turn-dot{border-radius:50%;width:12px;height:12px;box-shadow:0 0 10px}.turn-dot.red{background:var(--turn-red);color:var(--turn-red)}.turn-dot.black{background:var(--turn-black);color:var(--turn-black)}.turn-text.red{color:var(--turn-red-text);text-shadow:0 0 8px var(--danger-soft)}.turn-text.black{color:var(--turn-black-text);text-shadow:0 0 8px var(--accent-dim)}.check-badge{color:var(--danger);font-size:14px;animation:.8s ease-in-out infinite alternate pulse-badge}@keyframes pulse-badge{0%{opacity:.55;text-shadow:0 0 4px var(--danger-soft)}to{opacity:1;text-shadow:0 0 14px var(--danger-soft)}}.main{flex-direction:row;flex:1;gap:10px;min-height:0;display:flex}.movelist-side{flex-direction:column;width:min(320px,28vw);min-height:0;display:flex}.movelist-side .movelist{flex:1;min-height:0;max-height:none}.board-area{z-index:1;min-width:0;min-height:0;box-shadow:0 0 40px var(--line-soft), inset 0 0 60px var(--line-soft);border-radius:12px;flex:1;justify-content:center;align-items:center;animation:.35s ease-out board-in;display:flex;position:relative}@keyframes board-in{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}.board-area canvas{max-width:100%;max-height:100%}.movelist{z-index:3;background:var(--panel);border:1px solid var(--line-soft);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:8px;flex-direction:column;width:100%;max-height:190px;padding:6px 10px;display:flex;position:relative}.movelist-title{color:var(--accent-dim);letter-spacing:3px;margin-bottom:4px;font-size:12px}.movelist-body{scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent;flex-wrap:wrap;flex:1;gap:4px 14px;min-height:0;display:flex;overflow-y:auto}.movelist-item{color:var(--text-dim);font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:5px;padding:1px 6px;font-size:13px;transition:background .12s,border-color .12s}.movelist-item:hover{background:var(--line-soft);border-color:var(--line-soft)}.movelist-item.current{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}.movelist-scrubber{border-top:1px solid var(--line-soft);flex-shrink:0;align-items:center;gap:6px;margin-top:8px;padding-top:8px;display:flex}.scrub-btn{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line-soft);cursor:pointer;border-radius:6px;min-width:30px;min-height:30px;padding:5px 9px;font-size:13px;line-height:1}.scrub-btn:hover{border-color:var(--line);color:#fff}.scrub-range{min-width:60px;accent-color:var(--accent);cursor:pointer;flex:1}.scrub-label{color:var(--text-dim);font-variant-numeric:tabular-nums;text-align:right;min-width:52px;font-size:12px}.movelist-empty{color:var(--text-faint);font-size:13px}.menu{flex-direction:column;justify-content:center;align-items:center;gap:18px;height:100%;display:flex;position:relative}.menu-title{letter-spacing:14px;color:#0000;text-shadow:0 0 16px var(--accent-dim), 0 0 48px var(--accent-dim), 0 0 90px var(--danger-soft);background:var(--title-grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;font-size:clamp(48px,10vw,96px);font-weight:900;animation:5s linear infinite flow}@keyframes flow{0%{background-position:0 0}to{background-position:200% 0}}.menu-sub{letter-spacing:8px;color:var(--accent-dim);font-size:14px}.menu-row{gap:12px;display:flex}.menu-start{letter-spacing:6px;margin-top:10px;padding:12px 44px;font-size:20px}.menu-rules{color:var(--text-faint);letter-spacing:2px;font-size:13px}.modal-backdrop{z-index:70;background:var(--backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--panel-strong);border:1px solid var(--line);box-shadow:0 0 50px var(--accent-dim);border-radius:16px;flex-direction:column;align-items:center;gap:14px;padding:34px 60px;display:flex}.modal-winner{letter-spacing:8px;font-size:44px;font-weight:900}.modal-winner.red{color:var(--danger);text-shadow:0 0 20px var(--danger-soft)}.modal-winner.black{color:var(--turn-black);text-shadow:0 0 20px var(--accent-dim)}.modal-reason{letter-spacing:4px;color:var(--text-dim);font-size:16px}.modal-actions{gap:12px;margin-top:8px;display:flex}.history-backdrop{z-index:80}.history-modal{align-items:stretch;width:min(720px,94vw);padding:24px 28px}.modal-title{letter-spacing:6px;color:#fff;text-shadow:0 0 12px var(--accent-dim);text-align:center;font-size:22px;font-weight:900}.history-sub{color:var(--text-faint);text-align:center;letter-spacing:1px;margin-bottom:6px;font-size:12px}.history-empty{text-align:center;color:var(--text-faint);padding:28px 0;font-size:14px}.history-body{align-items:stretch;gap:18px;display:flex}.history-list{scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent;flex-direction:column;flex:1.25;gap:8px;min-width:0;max-height:46vh;display:flex;overflow-y:auto}.history-item{background:var(--line-soft);border:1px solid var(--line-soft);border-radius:8px;align-items:stretch;gap:8px;transition:box-shadow .15s,border-color .15s;display:flex}.history-item:hover{border-color:var(--line);box-shadow:0 0 14px var(--accent-dim)}.history-item.selected{border-color:var(--gold);box-shadow:0 0 16px var(--gold-soft);background:var(--gold-soft)}.history-main{color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:none;flex:1;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;display:flex}.history-result{color:var(--danger-text);letter-spacing:1px;text-shadow:0 0 8px var(--danger-soft);font-weight:700}.history-result.pending{color:var(--turn-black);text-shadow:0 0 8px var(--accent-dim)}.history-meta{color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}.history-preview{background:var(--backdrop);border:1px solid var(--line-soft);border-radius:10px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;min-width:0;padding:14px 12px;display:flex}.history-preview-title{color:var(--text-dim);letter-spacing:1px;text-align:center;font-size:13px}.history-preview-meta{color:var(--text-faint);font-variant-numeric:tabular-nums;font-size:12px}.history-preview-empty{color:var(--text-faint);text-align:center;padding:24px 8px;font-size:13px}.mini-board{border:1px solid var(--line-soft);width:100%;max-width:200px;height:auto;box-shadow:0 0 14px var(--line-soft);border-radius:6px;display:block}.history-del{color:var(--text-faint);cursor:pointer;background:0 0;border:none;padding:0 12px;font-size:13px}.history-del:hover{color:var(--danger);text-shadow:0 0 8px var(--danger-soft)}.history-actions{justify-content:center;gap:12px;margin-top:14px;display:flex}.hint-toast{z-index:5;background:var(--panel-strong);border:1px solid var(--danger);color:var(--danger-text);letter-spacing:8px;text-shadow:0 0 14px var(--danger-soft);box-shadow:0 0 32px var(--danger-soft);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap;border-radius:12px;padding:14px 36px;font-size:22px;font-weight:800;animation:.2s ease-out hint-in;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes hint-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.88)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@media (width<=900px){.app{padding:calc(8px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom))}.turn-indicator{padding:5px 10px;font-size:14px}.main{flex-direction:column}.movelist-side{width:100%}.movelist-side .movelist{flex:none;max-height:150px}.btn{min-height:40px;padding:9px 14px;font-size:14px}.hint-toast{letter-spacing:3px;white-space:normal;text-align:center;max-width:92vw;padding:10px 18px;font-size:clamp(15px,4.2vw,20px)}.modal{width:min(92vw, auto);padding:26px 20px}.modal-winner{letter-spacing:5px;font-size:32px}.modal-actions{flex-wrap:wrap;justify-content:center}}@media (width<=720px){.movelist{max-height:150px}.history-body{flex-direction:column}.history-list{max-height:30vh}.mini-board{max-width:150px}}@media (width<=480px){.menu-title{letter-spacing:6px}.menu-row{flex-direction:column;gap:8px}.hint-toast{font-size:15px}}