*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg-deep: #0a0a0f;--bg-surface: #111118;--bg-card: #18181f;--bg-elevated: #1f1f28;--text-primary: #f0f0f5;--text-secondary: #7a7a8a;--text-muted: #4a4a58;--orange: #ff6b2c;--orange-light: #ff8f4c;--orange-glow: rgba(255, 107, 44, .25);--gold-gradient: linear-gradient(135deg, #ffb347, #ff6b2c);--green: #4ade80;--red: #f87171;--border: rgba(255, 255, 255, .06);--border-active: rgba(255, 107, 44, .4);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 9999px;--font: "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;--shadow-lg: 0 20px 60px rgba(0, 0, 0, .5)}html,body{width:100%;height:100%;font-family:var(--font);background:var(--bg-deep);color:var(--text-primary);overflow:hidden;-webkit-font-smoothing:antialiased}#app{width:100%;height:100%;position:relative}.page{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s ease,transform .5s ease;transform:translateY(10px)}.page.active{opacity:1;pointer-events:all;transform:translateY(0)}#page-landing{overflow:hidden}.landing-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 70% 50% at 50% 20%,rgba(255,107,44,.06),transparent 70%),radial-gradient(ellipse 50% 60% at 20% 80%,rgba(255,179,71,.03),transparent),var(--bg-deep)}.landing-bg:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.4;background-image:radial-gradient(circle,rgba(255,255,255,.03) 1px,transparent 1px);background-size:40px 40px}.landing-content{position:relative;z-index:1;text-align:center;padding:2rem;max-width:640px;animation:fadeUp .8s ease}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:var(--radius-full);border:1px solid var(--border);background:#ffffff05;font-size:.82rem;color:var(--text-secondary);margin-bottom:2.5rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.hero-title{font-size:clamp(2.2rem,5.5vw,3.5rem);font-weight:900;line-height:1.25;margin-bottom:1.2rem;letter-spacing:-.02em}.hero-white{display:block}.hero-orange{display:block;background:var(--gold-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-desc{color:var(--text-secondary);font-size:.95rem;line-height:1.8;margin-bottom:2.8rem}.hero-actions{display:flex;align-items:center;justify-content:center;gap:1.2rem;flex-wrap:wrap;margin-bottom:3rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:var(--radius-full);font-size:.9rem;font-weight:700;font-family:var(--font);cursor:pointer;border:none;transition:all .2s ease;white-space:nowrap}.btn-primary{background:var(--gold-gradient);color:#fff;box-shadow:0 4px 20px var(--orange-glow)}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 30px var(--orange-glow)}.btn-primary:active{transform:translateY(0)}.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}.btn-ghost:hover{background:#ffffff0d;color:var(--text-primary)}.btn-block{width:100%}.btn-sm{padding:10px 20px;font-size:.85rem}.join-group{display:flex;align-items:center;border-radius:var(--radius-full);background:var(--bg-card);border:1px solid var(--border);overflow:hidden;transition:border-color .2s}.join-group:focus-within{border-color:var(--border-active)}.input-room{padding:13px 18px;background:transparent;border:none;outline:none;color:var(--text-primary);font-size:.9rem;font-family:var(--font);width:160px;letter-spacing:.05em}.input-room::placeholder{color:var(--text-muted)}.btn-join{padding:13px 22px;background:var(--bg-elevated);border:none;border-left:1px solid var(--border);color:var(--text-primary);font-weight:700;font-size:.9rem;font-family:var(--font);cursor:pointer;transition:background .2s}.btn-join:hover{background:#ffffff1a}.hero-features{display:flex;gap:2.5rem;justify-content:center;flex-wrap:wrap}.feature-item{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:.85rem}.feature-item svg{opacity:.6}.game-layout{display:flex;width:100%;height:100%}.game-area{flex:1;display:flex;flex-direction:column;padding:1rem 1.5rem;min-width:0}.game-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}.topbar-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-full);border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:.8rem;font-family:var(--font);cursor:pointer;transition:all .2s}.topbar-btn:hover{background:#ffffff0d;color:var(--text-primary)}.room-badge{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-full);background:#ff6b2c14;border:1px solid rgba(255,107,44,.2)}.room-label{font-size:.75rem;color:var(--text-secondary)}.room-code{font-size:.9rem;font-weight:800;color:var(--orange-light);letter-spacing:.1em}.copy-btn{display:flex;align-items:center;padding:4px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;border-radius:4px;transition:color .2s}.copy-btn:hover{color:var(--orange-light)}.game-main{flex:1;display:flex;align-items:center;justify-content:center;gap:1.5rem}.player-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:1.2rem 1rem;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--bg-surface);min-width:90px;transition:all .3s;position:relative}.player-card.active{border-color:var(--border-active);box-shadow:0 0 24px #ff6b2c14}.player-card .pc-indicator{position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--text-muted);transition:background .3s}.player-card.active .pc-indicator{background:var(--orange);box-shadow:0 0 8px var(--orange-glow)}.pc-stone{width:32px;height:32px;border-radius:50%}.pc-stone.black{background:radial-gradient(circle at 35% 35%,#4a4a4a,#0a0a0a);box-shadow:0 2px 8px #0009,inset 0 1px 2px #ffffff1a}.pc-stone.white{background:radial-gradient(circle at 35% 35%,#fff,#c8c8c8);box-shadow:0 2px 8px #0000004d,inset 0 1px 2px #ffffff80}.pc-info{display:flex;flex-direction:column;align-items:center;gap:3px}.pc-name{font-size:.8rem;font-weight:700;color:var(--text-primary)}.pc-status{font-size:.7rem;color:var(--text-secondary)}.board-container{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column}#board-canvas{border-radius:var(--radius-md);cursor:pointer;box-shadow:var(--shadow-lg)}.board-status{margin-top:12px;font-size:.8rem;color:var(--text-secondary);text-align:center;min-height:1.2em}.chat-panel{width:300px;display:flex;flex-direction:column;background:var(--bg-surface);border-left:1px solid var(--border)}.chat-header{display:flex;align-items:center;gap:8px;padding:1rem 1.2rem;border-bottom:1px solid var(--border);font-size:.88rem;font-weight:700;color:var(--text-primary)}.chat-header svg{opacity:.6}.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:8px}.chat-messages::-webkit-scrollbar{width:4px}.chat-messages::-webkit-scrollbar-track{background:transparent}.chat-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.chat-system{font-size:.75rem;color:var(--text-muted);text-align:center;padding:4px 0}.chat-msg{display:flex;flex-direction:column;gap:2px}.chat-msg-header{display:flex;align-items:center;gap:6px}.chat-msg-name{font-size:.72rem;font-weight:700}.chat-msg-name.black{color:#aaa}.chat-msg-name.white{color:#fff}.chat-msg-time{font-size:.65rem;color:var(--text-muted)}.chat-msg-text{font-size:.82rem;color:var(--text-secondary);line-height:1.5;word-break:break-all}.chat-input-area{display:flex;align-items:center;gap:8px;padding:.8rem 1rem;border-top:1px solid var(--border)}.chat-input{flex:1;padding:10px 14px;border-radius:var(--radius-full);border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-size:.82rem;font-family:var(--font);outline:none;transition:border-color .2s}.chat-input:focus{border-color:var(--border-active)}.chat-input::placeholder{color:var(--text-muted)}.chat-send-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:none;background:var(--gold-gradient);color:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s;flex-shrink:0}.chat-send-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px var(--orange-glow)}.win-overlay,.restart-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0a0a0fe0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:200;opacity:0;pointer-events:none;transition:opacity .4s}.win-overlay.show,.restart-overlay.show{opacity:1;pointer-events:all}.win-modal,.restart-modal{text-align:center;padding:2.5rem 3rem;border-radius:var(--radius-xl);background:var(--bg-surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);transform:scale(.92);transition:transform .4s}.win-overlay.show .win-modal,.restart-overlay.show .restart-modal{transform:scale(1)}.win-stone{width:56px;height:56px;border-radius:50%;margin:0 auto 1.5rem}.win-stone.black{background:radial-gradient(circle at 35% 35%,#4a4a4a,#0a0a0a);box-shadow:0 4px 20px #0009}.win-stone.white{background:radial-gradient(circle at 35% 35%,#fff,#c8c8c8);box-shadow:0 4px 20px #fff3}.win-title{font-size:1.6rem;font-weight:900;margin-bottom:.5rem;background:var(--gold-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.win-desc{color:var(--text-secondary);font-size:.9rem;margin-bottom:1.8rem}.win-btns,.restart-btns{display:flex;gap:1rem;justify-content:center}.restart-modal p{font-size:.95rem;margin-bottom:1.5rem;color:var(--text-primary)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0a0feb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:300;opacity:0;pointer-events:none;transition:opacity .3s}.modal-overlay.show{opacity:1;pointer-events:all}.modal-card{padding:2.5rem;border-radius:var(--radius-xl);background:var(--bg-surface);border:1px solid var(--border);width:360px;max-width:90vw;text-align:center}.modal-title{font-size:1.3rem;font-weight:800;margin-bottom:.5rem}.modal-desc{font-size:.85rem;color:var(--text-secondary);margin-bottom:1.5rem}.modal-input{width:100%;padding:12px 16px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-size:.9rem;font-family:var(--font);outline:none;margin-bottom:1.2rem;text-align:center;transition:border-color .2s}.modal-input:focus{border-color:var(--border-active)}.modal-input::placeholder{color:var(--text-muted)}@media (max-width: 900px){.chat-panel{display:none}.game-main{flex-direction:column;gap:.8rem}.player-card{flex-direction:row;min-width:unset;padding:.8rem 1.2rem}}@media (max-width: 600px){.hero-title{font-size:1.8rem}.hero-actions{flex-direction:column;align-items:center}.hero-features{flex-direction:column;align-items:center;gap:1rem}.game-area{padding:.5rem}}.toast{position:fixed;top:20px;left:50%;transform:translate(-50%) translateY(-100%);padding:10px 24px;border-radius:var(--radius-full);background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);font-size:.85rem;z-index:999;opacity:0;transition:all .3s ease;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}