:root{--bg: #1c1b22;--bg-soft: #26242f;--panel: #2e2c3a;--panel-2: #38354a;--border: #454157;--text: #f0edf7;--text-dim: #a8a2bb;--accent: #c9a35c;--accent-2: #e0c180;--wood: #d8b06a;--wood-dark: #b08a44;--line: #6b5230;--black: #1b1b1b;--white: #f5f1e6;--red: #c0392b;--danger: #e06c5a;--ok: #7fc97f;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(1200px 800px at 50% -10%,#2c2938 0%,var(--bg) 60%);color:var(--text);-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer;border:none}a{color:inherit;text-decoration:none}.home{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:48px 20px 64px}.home-header{text-align:center;margin-bottom:40px}.home-header h1{font-size:44px;margin:0 0 8px;letter-spacing:4px}.home-header h1 .logo-dot{color:var(--accent)}.home-header p{margin:0;color:var(--text-dim);font-size:16px}.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%;max-width:900px}@media(max-width:760px){.game-grid{grid-template-columns:1fr;max-width:420px}}.game-card{background:linear-gradient(160deg,var(--panel) 0%,var(--bg-soft) 100%);border:1px solid var(--border);border-radius:18px;padding:28px 24px;text-align:center;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.game-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 16px 40px #00000059}.game-card .icon{font-size:52px;line-height:1;margin-bottom:16px}.game-card h2{margin:0 0 8px;font-size:22px;letter-spacing:2px}.game-card p{margin:0 0 20px;color:var(--text-dim);font-size:14px;min-height:40px}.game-page{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:20px 16px 48px}.game-topbar{width:100%;max-width:1000px;display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}.back-btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--border);color:var(--text);padding:8px 14px;border-radius:10px;font-size:14px;transition:border-color .15s ease,background .15s ease}.back-btn:hover{border-color:var(--accent);background:var(--panel-2)}.game-topbar h1{margin:0;font-size:22px;letter-spacing:3px}.game-topbar .spacer{width:86px}.game-layout{width:100%;max-width:1000px;display:flex;gap:22px;align-items:flex-start;justify-content:center;flex-wrap:wrap}.board-wrap{background:var(--wood);border-radius:16px;padding:18px;box-sizing:border-box;max-width:100%;min-width:0;box-shadow:0 18px 50px #00000073,inset 0 0 0 1px #ffffff14}.board-wrap canvas{display:block;max-width:100%;border-radius:6px;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.side-panel{flex:1;min-width:250px;max-width:320px;display:flex;flex-direction:column;gap:14px}.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px}.card h3{margin:0 0 12px;font-size:14px;color:var(--text-dim);font-weight:600;letter-spacing:1px;text-transform:uppercase}.status-row{display:flex;align-items:center;gap:10px;font-size:15px}.turn-dot{width:16px;height:16px;border-radius:50%;flex:none;border:1px solid rgba(255,255,255,.25)}.turn-dot.black{background:var(--black)}.turn-dot.white{background:var(--white)}.turn-dot.red{background:var(--red)}.btn{background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:10px;font-size:14px;transition:background .15s ease,border-color .15s ease,transform .1s ease}.btn:hover{background:#403d52;border-color:var(--accent)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--accent);border-color:var(--accent);color:#241d0f;font-weight:700}.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}.btn-row{display:flex;gap:8px;flex-wrap:wrap}.btn-row .btn{flex:1}.seg{display:flex;gap:6px;flex-wrap:wrap}.seg .btn{flex:1}.seg .btn.active{background:var(--accent);border-color:var(--accent);color:#241d0f;font-weight:700}.caption{color:var(--text-dim);font-size:13px;line-height:1.6}.hint{font-size:13px;color:var(--accent-2);min-height:18px}.winner-banner{background:linear-gradient(90deg,#3a2f1d,#2e2c3a);border:1px solid var(--accent);color:var(--accent-2);font-weight:700;font-size:16px;text-align:center;padding:12px;border-radius:12px}@media(max-width:720px){.game-layout{flex-direction:column;align-items:center}.board-wrap{width:100%}.side-panel{width:100%;max-width:100%;min-width:0}.game-topbar .spacer{display:none}.game-topbar h1{flex:1;text-align:center}}.text-input{width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--border);background:#201e28;color:var(--text);font-size:14px;outline:none;box-sizing:border-box}.text-input:focus{border-color:var(--accent)}.online-join-row{display:flex;gap:8px}.online-join-row .text-input{flex:1}.room-code{display:flex;gap:6px;justify-content:center;margin:8px 0 4px;flex-wrap:wrap}.room-char{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:42px;font-size:20px;font-weight:700;background:var(--panel-2);border:1px solid var(--border);border-radius:8px}.room-list-head{display:flex;align-items:center;justify-content:space-between;margin:12px 0 6px}.btn-mini{padding:4px 10px;font-size:12px}.room-list{list-style:none;margin:0;padding:0;max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}.room-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;text-align:left}.room-id-label{font-weight:700;letter-spacing:2px;font-size:15px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.modal{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;width:100%;max-width:340px;max-height:80vh;overflow-y:auto}.modal-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}.move-timer{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--accent-2);font-weight:700}.game-over-modal{text-align:center;border:1px solid var(--accent)}.game-over-title{font-size:24px;font-weight:800;letter-spacing:2px;color:var(--accent-2)}.game-over-detail{margin-top:8px}.pick-section{width:100%;max-width:820px;display:flex;flex-direction:column;align-items:center}.pick-label{font-size:14px;color:var(--text-dim);letter-spacing:3px;margin:22px 0 12px;align-self:flex-start}.pick-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%}@media(max-width:640px){.pick-cards{grid-template-columns:1fr;max-width:360px}}.pick-card{background:linear-gradient(160deg,var(--panel) 0%,var(--bg-soft) 100%);border:1px solid var(--border);border-radius:16px;padding:20px 18px;text-align:center;color:var(--text);cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}.pick-card:hover{transform:translateY(-2px);border-color:var(--accent)}.pick-card.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 14px 34px #00000059;background:linear-gradient(160deg,#3d3220,#2b2723)}.pick-card .icon{font-size:34px;margin-bottom:8px}.pick-card h2{margin:0 0 6px;font-size:18px;letter-spacing:2px}.pick-card p{margin:0;font-size:13px;color:var(--text-dim);min-height:36px}.pick-modes{width:100%;max-width:460px}.start-btn{margin-top:24px;font-size:17px;padding:12px 46px;letter-spacing:2px}