@import"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap";:root{--color-primary: #3E2723;--color-secondary: #F5F5DC;--color-dark: #212121;--color-light: #F5F5DC;--color-accent: #8D6E63;--color-text: #212121;--color-text-light: #5D4037;--color-background: #F5F5DC;--color-surface: #FFFFFF;--color-border: #D7CCC8;--font-family-base: "Noto Serif SC", serif;--font-family-header: "Noto Serif SC", serif;--font-family-footer: "Noto Serif SC", serif;--font-family-game-control: "Noto Serif SC", serif;--font-family-room-management: "Noto Serif SC", serif;--font-family-error: "Noto Serif SC", serif;font-family:var(--font-family-base);line-height:1.5;font-weight:400;color-scheme:light;color:var(--color-text);background-color:var(--color-background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--color-primary);text-decoration:inherit;transition:color .3s ease}a:hover{color:var(--color-accent)}html,body{margin:0;padding:0;width:100%;min-height:100%;max-width:100vw;overflow-x:hidden}body{display:block;min-width:320px;min-height:100vh;background-color:var(--color-background);color:var(--color-text)}button{border-radius:4px;border:1px solid var(--color-border);padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--color-surface);color:var(--color-text);cursor:pointer;transition:all .3s ease}button:hover{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-light)}button:focus,button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.paper-texture{background-image:url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z" fill="%233e2723" fill-opacity="0.03" fill-rule="evenodd"/%3E%3C/svg%3E')}.wood-texture{background-image:url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z" fill="%238D6E63" fill-opacity="0.1" fill-rule="evenodd"/%3E%3C/svg%3E')}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-header);font-weight:700;color:var(--color-primary)}body.dark-mode{--color-primary: #8D6E63;--color-secondary: #2c3e50;--color-dark: #1a1a2e;--color-light: #e9ecef;--color-accent: #4facfe;--color-text: #e9ecef;--color-text-light: #adb5bd;--color-background: #1a1a2e;--color-surface: #2c3e50;--color-border: #34495e;color-scheme:dark;background-color:var(--color-background);color:var(--color-text)}body.dark-mode button{background-color:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}body.dark-mode button:hover{background-color:var(--color-primary);color:var(--color-light)}body.dark-mode input,body.dark-mode textarea,body.dark-mode select{background-color:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}body.dark-mode .app-container,body.dark-mode .network-container,body.dark-mode .local-game-interface,body.dark-mode .online-game-interface{background-color:var(--color-background);color:var(--color-text)}body.dark-mode .settings-page-container{background:linear-gradient(135deg,#1a1a2e,#16213e)}body.dark-mode .settings-page-header{background:#1a1a2e;box-shadow:0 4px 20px #0000004d}body.dark-mode .settings-page-header h2{color:#e9ecef}body.dark-mode .settings-page-modal{background:#1a1a2e;box-shadow:0 12px 48px #0006}body.dark-mode .settings-page-section h3{color:#e9ecef;border-bottom-color:#4facfe}body.dark-mode .setting-item{background:#2c3e50;border-color:#34495e}body.dark-mode .setting-name{color:#e9ecef}body.dark-mode .setting-description{color:#adb5bd}body.dark-mode .network-panel{background-color:var(--color-background);color:var(--color-text)}body.dark-mode .home-page{background-color:var(--color-background)}body.dark-mode .feature-button{background:linear-gradient(135deg,#2c3e50,#34495e);box-shadow:0 4px 16px #0000004d}body.dark-mode .feature-button .button-text{color:#e9ecef}body.dark-mode .feature-button .button-subtext{color:#adb5bd}body.dark-mode .room-list-section{background:#2c3e50}body.dark-mode .room-list-header h4{color:#e9ecef}body.dark-mode .room-item{background-color:#1a1a2e;border-color:#34495e}body.dark-mode .room-item div{color:#e9ecef}body.dark-mode .bottom-nav{background:#1a1a2e;border-top-color:#34495e}body.dark-mode .nav-item{color:#adb5bd}body.dark-mode .nav-item.active{color:#4facfe}body.dark-mode .modal-overlay{background:#000000b3}body.dark-mode .modal-content{background:#1a1a2e;color:#e9ecef}body.dark-mode .game-container{background-color:var(--color-background)}body.dark-mode .local-game-header,body.dark-mode .online-game-header{background:#1a1a2e}body.dark-mode .local-game-header h2,body.dark-mode .online-game-header h2{color:#e9ecef}body.dark-mode .bottom-control-panel{background:#1a1a2e;border-top-color:#34495e}body.dark-mode .control-panel-content{background:#2c3e50}body.dark-mode .control-panel-content h3{color:#e9ecef}body.dark-mode .ranking-modal{background:#1a1a2e}body.dark-mode .ranking-header{background:#2c3e50}body.dark-mode .ranking-header h2{color:#e9ecef}body.dark-mode .ranking-item{background:#2c3e50;border-color:#34495e}body.dark-mode .ranking-item span{color:#e9ecef}body.dark-mode .user-profile-header{background:#2c3e50;border-color:#34495e}body.dark-mode .user-profile-details h3{color:#e9ecef}body.dark-mode .user-profile-details p,body.dark-mode .user-profile-arrow{color:#adb5bd}body.dark-mode .user-status-section{background:#1a1a2e}body.dark-mode .status-item{background:#2c3e50;border-color:#34495e}body.dark-mode .status-icon,body.dark-mode .status-text{color:#e9ecef}body.dark-mode .feature-item{background:#2c3e50;border-color:#34495e}body.dark-mode .feature-icon,body.dark-mode .feature-text{color:#e9ecef}body.dark-mode .feature-arrow{color:#adb5bd}body.dark-mode .user-info-section{background:#2c3e50;border-color:#34495e}body.dark-mode .user-details .username{color:#e9ecef}body.dark-mode .user-details .user-title{color:#adb5bd}body.dark-mode .room-item{background-color:#2c3e50!important;border-color:#34495e!important}body.dark-mode .room-item div{color:#e9ecef!important}body.dark-mode .room-item .room-action{background-color:#28a745;color:#fff}body.dark-mode .ad-info{background:#2c3e50}body.dark-mode .tutorial-header{background:#1a1a2e;box-shadow:0 4px 20px #0000004d}body.dark-mode .back-btn{background:linear-gradient(135deg,#2c3e50,#34495e);color:#e9ecef}body.dark-mode .tutorial-modal .tutorial-header{background:#2c3e50}body.dark-mode .tutorial-modal .tutorial-header h2{color:#e9ecef}body.dark-mode .tutorial-content{background:#1a1a2e;color:#e9ecef}body.dark-mode .tutorial-content p{color:#e9ecef}body.dark-mode .tutorial-footer{background:#2c3e50;border-top-color:#34495e}body.dark-mode .tutorial-btn{background:#34495e;color:#e9ecef;border-color:#4facfe}body.dark-mode .tutorial-btn.primary{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}body.dark-mode .progress-dot{background-color:#34495e}body.dark-mode .progress-dot.active{background-color:#4facfe}body.dark-mode .customer-service{background:#2c3e50;box-shadow:0 6px 24px #0000004d}body.dark-mode .customer-service h3{color:#e9ecef}body.dark-mode .customer-service p{color:#adb5bd}body.dark-mode .wechat-contact{background:linear-gradient(135deg,#4facfe26,#00f2fe26);border-color:#4facfe4d}body.dark-mode .wechat-label{color:#e9ecef}body.dark-mode .wechat-number{background:#1a1a2e;color:#4facfe}body.dark-mode .settings-back-btn{background:linear-gradient(135deg,#2c3e50,#34495e);color:#e9ecef}body.dark-mode .tutorial-container{background:linear-gradient(135deg,#1a1a2e,#16213e)}body.dark-mode .tutorial-header{background:#2c3e50;box-shadow:0 4px 20px #0000004d}body.dark-mode .tutorial-header h2{color:#e9ecef}body.dark-mode .tutorial-main-content{background:transparent}body.dark-mode .tutorial-step-header{background:#2c3e50;box-shadow:0 4px 20px #0000004d}body.dark-mode .tutorial-step-header h2{color:#e9ecef}body.dark-mode .tutorial-step-content{background:#1a1a2e;box-shadow:0 4px 20px #0000004d;color:#e9ecef}body.dark-mode .tutorial-step-content h3{color:#e9ecef;border-bottom-color:#4facfe}body.dark-mode .tutorial-step-content p,body.dark-mode .tutorial-step-content li{color:#e9ecef}body.dark-mode .tutorial-step-footer{background:#2c3e50;box-shadow:0 4px 20px #0000004d}body.dark-mode .top-ad-bar{background:#2c3e50}body.dark-mode .ad-info{background:#1a1a2e}body.dark-mode .ad-label{color:#adb5bd}body.dark-mode .ad-value{color:#e9ecef}body.dark-mode .friends-page{background:#1a1a2e}body.dark-mode .friends-header{background:#2c3e50;box-shadow:0 4px 20px #0000004d}body.dark-mode .friends-header h2{color:#e9ecef}body.dark-mode .friends-search{background:#2c3e50}body.dark-mode .friends-search-input{background:#1a1a2e;color:#e9ecef;border-color:#34495e}body.dark-mode .friends-search-input::placeholder{color:#adb5bd}body.dark-mode .add-friend-section{background:#2c3e50}body.dark-mode .add-friend-btn{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}body.dark-mode .friend-item{background:#2c3e50;border-color:#34495e}body.dark-mode .friend-name{color:#e9ecef}body.dark-mode .friend-status{color:#adb5bd}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text}:root{--color-primary: #4caf50;--color-primary-light: #81c784;--color-primary-dark: #388e3c;--color-accent: #4ecdc4;--color-accent-light: #80deea;--color-accent-dark: #26a69a;--color-background: #f8fff8;--color-surface: #ffffff;--color-text: #2e7d32;--color-text-light: #4a9d50;--color-text-lighter: #66bb6a;--color-border: #e8f5e8;--color-error: #f44336;--color-warning: #ff9800;--color-info: #2196f3;--color-success: #4caf50;--color-cat-pink: #ffb6c1;--color-cat-yellow: #ffeb3b;--color-cat-gray: #9e9e9e;--font-family-base: "Arial", sans-serif;--font-family-header: "Arial", sans-serif;--font-family-game-control: "Arial", sans-serif;--font-family-footer: "Arial", sans-serif}body{font-family:var(--font-family-base);background-color:var(--color-background);color:var(--color-text);line-height:1.6;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M10 10 Q20 5 30 10 Q35 5 40 10 Q50 5 60 10 Q65 5 70 10 Q80 5 90 10" stroke="%234caf50" stroke-width="0.5" fill="none" opacity="0.1"/></svg>');background-repeat:repeat;background-size:200px 200px}.app-container{display:flex;flex-direction:column;min-height:100vh;background-color:var(--color-background);color:var(--color-text);overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative;margin:0;padding:0;border:none;transition:all .3s ease}.cat-decoration{position:absolute;opacity:.1;z-index:0;pointer-events:none}.cat-decoration.top-left{top:20px;left:20px;font-size:48px;animation:float 6s ease-in-out infinite}.cat-decoration.bottom-right{bottom:20px;right:20px;font-size:36px;animation:float 8s ease-in-out infinite reverse}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(5deg)}}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.btn-feedback{transition:all .3s ease;position:relative;overflow:hidden}.btn-feedback:active{transform:scale(.95)}.btn-feedback:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn-feedback:active:after{width:300px;height:300px}.scroll-reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}.scroll-reveal.visible{opacity:1;transform:translateY(0)}.page-transition{transition:opacity .3s ease,transform .3s ease}.page-transition.enter{opacity:0;transform:translateY(10px)}.page-transition.enter-active,.page-transition.exit{opacity:1;transform:translateY(0)}.page-transition.exit-active{opacity:0;transform:translateY(-10px)}.form-loading{position:relative;pointer-events:none;opacity:.7}.form-loading:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid #f3f3f3;border-top:2px solid var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}.status-feedback{padding:10px 15px;border-radius:4px;margin:10px 0;display:flex;align-items:center;gap:10px;animation:slideIn .3s ease}.status-feedback.success{background-color:#4caf501a;color:var(--color-success);border-left:4px solid var(--color-success)}.status-feedback.error{background-color:#f443361a;color:var(--color-error);border-left:4px solid var(--color-error)}@keyframes slideIn{0%{transform:translate(-10px);opacity:0}to{transform:translate(0);opacity:1}}.network-panel{display:flex;flex-direction:column;gap:1rem;width:100vw;max-width:100vw;padding:1rem 1rem calc(4cm + 7rem);margin:0;background-color:var(--color-background);color:var(--color-text);box-sizing:border-box;position:relative;inset:0}.logo-header{display:flex;align-items:center;justify-content:center;gap:18px;margin:.5rem 1rem .2rem;padding:.8rem 1.4rem;background:linear-gradient(135deg,#4e342e,#6d4c41);border-radius:18px;border:1px solid rgba(78,205,196,.15)}.logo-header-img{width:144px;height:144px;object-fit:contain;border-radius:18px}.logo-header-text{font-family:var(--font-family-header);font-size:2rem;font-weight:600;color:var(--color-primary);letter-spacing:1px}.feature-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1rem}.feature-button{background-color:#fff;border:1px solid #f0f0f0;border-radius:16px;padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 4px 12px #0000001a;display:flex;flex-direction:column;align-items:center}.feature-button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #00000026}.create-room-btn{background:linear-gradient(135deg,#f0fff4,#e6ffed);border-color:#4ecdc44d}.ranking-btn{background:linear-gradient(135deg,#fff5f5,#ffebee);border-color:#ff6b6b4d}.match-btn{background:linear-gradient(135deg,#f3e5f5,#ede7f6);border-color:#667eea4d}.button-icon{font-size:2.2rem;display:block;margin-bottom:.8rem;color:#4ecdc4}.create-room-btn .button-icon{color:#4ecdc4}.ranking-btn .button-icon{color:#ff6b6b}.match-btn .button-icon{color:#9575cd}.button-icon-img{width:2.2rem;height:2.2rem;display:block;margin-bottom:.8rem;object-fit:contain}.create-room-btn .button-icon-img{color:#4ecdc4}.ranking-btn .button-icon-img{color:#ff6b6b}.match-btn .button-icon-img{color:#9575cd}.button-text{font-size:1rem;font-weight:700;color:#333;display:block;margin-bottom:.3rem}.button-subtext{font-size:.8rem;color:#666;display:block}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:center;padding:1rem;background-color:#fff;box-shadow:0 -2px 10px #0000001a;z-index:1000}.nav-item{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.5rem;border:none;background:none;cursor:pointer;transition:all .3s ease;color:#666}.nav-item.active{color:var(--color-primary)}.nav-icon{font-size:1.5rem}.nav-icon-img{width:1.5rem;height:1.5rem;object-fit:contain;display:block;margin:0 auto}.nav-text{font-size:.8rem;font-weight:500}.nav-badge{position:absolute;top:0;right:0;background-color:#ff6b6b;color:#fff;border-radius:50%;width:16px;height:16px;font-size:.7rem;display:flex;align-items:center;justify-content:center}.room-list-section{margin:1rem;padding:1rem;background-color:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;text-align:left}.room-list-header{margin-bottom:1rem;text-align:left}.room-list-header-top{margin-bottom:.5rem}.room-list-header-top h4{margin:0;font-size:1.1rem;color:#333}.room-list-header-bottom{display:flex;flex-direction:column;align-items:flex-start;text-align:left;justify-content:flex-start;width:100%}.room-search{display:flex;flex-direction:row;gap:.5rem;width:100%;align-items:center;justify-content:flex-start}.room-search-input{flex:1;padding:.8rem;border:1px solid #e0e0e0;border-radius:8px;font-size:1rem}.join-room-btn{padding:.8rem 1.5rem;background-color:var(--color-primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:500}.refresh-rooms-btn{padding:.8rem 1.5rem;background-color:var(--color-accent);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:500;margin-top:.5rem;width:fit-content;align-self:flex-start;justify-content:flex-start}.room-list{margin-bottom:1rem}.room-item{display:flex;align-items:center;gap:10px;padding:10px 15px;border-radius:10px;background-color:#fff;border:1px solid #e9ecef;box-shadow:0 2px 4px #0000000d;margin-bottom:6px}.room-avatar{width:45px;height:45px;flex-shrink:0}.room-status-full{padding:8px 12px;background-color:#dc3545;color:#fff;border-radius:6px;font-size:13px;font-weight:500;flex-shrink:0;white-space:nowrap}.room-action{padding:8px 16px;background-color:var(--color-primary);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;flex-shrink:0;white-space:nowrap}.room-list-footer{margin-top:1rem;text-align:center}.view-more-btn{padding:10px 24px;background-color:var(--color-primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:500;transition:background-color .2s ease}.user-info-section{display:flex;align-items:center;gap:1.5rem;padding:2rem;background-color:#fff;border-radius:16px;border:1px solid #f0f0f0;margin:1rem;box-shadow:0 4px 12px #0000001a}.user-avatar{width:100px;height:100px;border-radius:50%;overflow:hidden;border:4px solid #4ecdc4;box-shadow:0 6px 16px #4ecdc466}.user-details{flex:1}.username{font-size:1.5rem;font-weight:700;color:#333;display:block;margin-bottom:.5rem}.user-title{font-size:1rem;color:#666;background-color:#4ecdc426;padding:.3rem .8rem;border-radius:16px;border:1px solid rgba(78,205,196,.3);display:inline-block}.local-game-interface,.online-game-interface{display:flex;flex-direction:column;height:100vh;margin:0;padding:0;border:none;background-color:var(--color-background);overflow:hidden}.local-game-header,.online-game-header{background-color:#1a1a2ee6;color:#fff;padding:.4rem 1rem;text-align:center;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(78,205,196,.2);width:100%;max-width:100%;margin:0;transition:all .3s ease;position:static;flex-shrink:0;z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 16px #0000001a;min-height:50px}.game-header-content{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;gap:1rem}.game-header-content h2{font-size:1.2rem;font-weight:700;margin:0;font-family:var(--font-family-header);letter-spacing:1px;color:#fff;flex:1;text-align:center}.header-button{background-color:#4ecdc41a;color:#fff;border:none;padding:.4rem .8rem;border-radius:6px;cursor:pointer;font-size:.8rem;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:var(--font-family-game-control);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:relative;overflow:hidden;height:36px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-overflow:ellipsis;align-self:center}.header-button:hover{background:#4ecdc426;color:#45b7aa;transform:translateY(-1px);box-shadow:0 4px 12px #4ecdc433}.header-button:active{transform:translateY(0)}.header-buttons{display:flex;align-items:center;gap:.5rem}.placement-confirm-toggle{background:#ffffff08;border:1px solid rgba(78,205,196,.3);color:#4ecdc4;transition:all .3s cubic-bezier(.4,0,.2,1)}.placement-confirm-toggle.enabled{background:#4ecdc426;border-color:#4ecdc480;color:#4ecdc4}.placement-confirm-toggle.disabled{background:#ff6b6b1a;border-color:#ff6b6b4d;color:#ff6b6b}.game-container{flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;margin:0;padding:0;border:none;min-height:0;overflow:hidden}.app-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}.本地游戏{flex:1;display:flex;justify-content:center;align-items:center;overflow:hidden;min-height:0}.room-manager{flex-shrink:1;overflow-y:auto;min-height:0;max-height:35vh}.top-ad-bar{background-color:#667eea26;color:#333;padding:.8rem 1.5rem;border-radius:8px;margin-bottom:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #667eea4d;border:1px solid rgba(102,126,234,.3)}.ad-info{display:flex;align-items:center;gap:.8rem;justify-content:center;flex-wrap:wrap}.ad-label{font-size:1rem;font-weight:700;color:#333}.ad-value{font-size:1rem;font-weight:700;color:#667eea;text-shadow:0 1px 3px rgba(102,126,234,.3);background-color:#fffc;padding:.2rem .6rem;border-radius:12px;border:1px solid rgba(102,126,234,.3)}.video-ad{display:flex;flex-direction:column;align-items:center;gap:.8rem;width:100%}.ad-video{width:100%;max-height:200px;border-radius:8px;object-fit:cover;box-shadow:0 2px 8px #667eea4d;border:1px solid rgba(102,126,234,.3)}.video-ad-label{font-size:1rem;font-weight:700;color:#333;text-align:center;text-shadow:0 1px 3px rgba(102,126,234,.3);background-color:#fffc;padding:.2rem .6rem;border-radius:12px;border:1px solid rgba(102,126,234,.3)}.profile-container{display:flex;flex-direction:column;min-height:100vh;background-color:var(--color-background);color:var(--color-text)}.profile-content{flex:1;padding:2rem 1.5rem;display:flex;flex-direction:column;gap:2rem}.user-profile-header{display:flex;align-items:center;gap:1.5rem;padding:2rem;background-color:#fff;border-radius:16px;box-shadow:0 4px 12px #0000001a}.user-profile-avatar{width:100px;height:100px;border-radius:50%;overflow:hidden;border:4px solid var(--color-primary);box-shadow:0 6px 16px #4caf5066}.avatar-image{display:block;width:100%;height:100%;object-fit:contain}.user-profile-details{flex:1}.user-profile-details h3{font-size:1.5rem;font-weight:700;color:var(--color-text);margin:0 0 .5rem}.user-wechat{font-size:1rem;color:var(--color-text-light);margin:0}.user-profile-arrow{font-size:1.5rem;color:var(--color-text-light);cursor:pointer}.user-status-section{display:flex;gap:1rem;padding:1.5rem;background-color:#fff;border-radius:16px;box-shadow:0 4px 12px #0000001a}.status-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background-color:var(--color-background);border-radius:12px;transition:all .3s ease}.status-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.status-icon{font-size:2rem}.status-text{font-size:1rem;color:var(--color-text);text-align:center}.profile-features{display:flex;flex-direction:column;gap:1.5rem}.feature-section{background-color:#fff;border-radius:16px;box-shadow:0 4px 12px #0000001a;overflow:hidden}.feature-item{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid var(--color-border);transition:all .3s ease;cursor:pointer}.feature-item:last-child{border-bottom:none}.feature-item:hover{background-color:var(--color-background)}.feature-icon{font-size:1.5rem;margin-right:1rem}.feature-text{flex:1;font-size:1rem;color:var(--color-text)}.feature-arrow{font-size:1rem;color:var(--color-text-light)}.logout-section{display:flex;justify-content:center;margin-top:2rem}.logout-btn{padding:1rem 3rem;background-color:var(--color-error);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #f443364d}.logout-btn:hover{background-color:#d32f2f;transform:translateY(-2px);box-shadow:0 6px 16px #f4433666}.connection-status{padding:1rem 1.5rem;background-color:#fff;border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:.5rem}.connection-indicator{font-size:.9rem;font-weight:500}.connection-indicator.connected{color:var(--color-success)}.connection-indicator.disconnected{color:var(--color-error)}.connection-error{font-size:.8rem;color:var(--color-text-light)}.login-section{display:flex;justify-content:center;align-items:flex-start;flex:1;padding:1rem;width:100%;min-height:100vh}.avatar-selector{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.avatar-selector-content{background-color:#fff;border-radius:16px;padding:2rem;width:90%;max-width:500px;max-height:80vh;overflow-y:auto}.avatar-selector-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.avatar-selector-title{font-size:1.5rem;font-weight:700;color:var(--color-text)}.avatar-selector-close{font-size:1.5rem;cursor:pointer;color:var(--color-text-light)}.avatar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}.avatar-option{aspect-ratio:1;border-radius:8px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .3s ease;border:2px solid transparent}.avatar-option:hover{transform:scale(1.05);border-color:var(--color-primary)}.avatar-option.selected{border-color:var(--color-primary);background-color:#4caf501a}.avatar-option img{width:80%;height:80%;object-fit:contain}.tutorial-container{min-height:100vh;background-color:var(--color-background);color:var(--color-text);padding:1rem;position:relative;width:100%;box-sizing:border-box}.tutorial-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;margin-bottom:1.5rem;border-bottom:1px solid var(--color-border)}.back-btn{display:flex;align-items:center;gap:.5rem;background:none;border:none;color:var(--color-text);font-size:1rem;cursor:pointer;padding:.5rem 1rem;border-radius:8px;transition:all .3s ease}.back-icon{font-size:1.2rem;font-weight:700}.tutorial-header h2{font-size:1.5rem;font-weight:700;color:var(--color-text);margin:0}.cat-decoration{font-size:1.5rem;animation:float 6s ease-in-out infinite}.tutorial-main-content{display:flex;flex-direction:column;gap:1.5rem}.tutorial-step-card{background-color:#fff;border-radius:16px;box-shadow:0 4px 12px #0000001a;padding:1.5rem;overflow:hidden;transition:all .3s ease}.tutorial-step-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000026}.tutorial-step-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--color-border)}.tutorial-step-header h2{font-size:1.3rem;font-weight:700;color:var(--color-text);margin:0}.step-indicator{background-color:var(--color-primary-light);color:#fff;padding:.3rem .8rem;border-radius:12px;font-size:.8rem;font-weight:500}.tutorial-step-content{margin-bottom:1.5rem;line-height:1.6;transition:all .3s ease}.tutorial-step-content.step-changing{opacity:0;transform:translateY(10px)}.tutorial-step-footer{padding-top:1.5rem;border-top:1px solid var(--color-border)}.tutorial-progress{display:flex;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.progress-dot{width:8px;height:8px;border-radius:50%;background-color:var(--color-border);transition:all .3s ease}.progress-dot.active{width:12px;height:12px;background-color:var(--color-primary);transform:scale(1.2)}.tutorial-buttons{display:flex;gap:1rem;justify-content:center}.tutorial-btn{padding:.8rem 1.5rem;border:1px solid var(--color-border);border-radius:8px;background-color:#fff;color:var(--color-text);font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;min-width:100px}.tutorial-btn:hover:not(:disabled){background-color:var(--color-background);transform:translateY(-2px)}.tutorial-btn:disabled{opacity:.5;cursor:not-allowed}.tutorial-btn.primary{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.tutorial-btn.primary:hover{background-color:var(--color-primary-dark);border-color:var(--color-primary-dark)}.customer-service-card{background-color:#fff;border-radius:16px;box-shadow:0 4px 12px #0000001a;padding:1.5rem;transition:all .3s ease}.customer-service-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000026}.customer-service-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.customer-service-header h3{font-size:1.2rem;font-weight:700;color:var(--color-text);margin:0}.customer-service-icon{font-size:1.5rem}.customer-service-card p{margin-bottom:1rem;color:var(--color-text-light)}.wechat-contact{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding:1rem;background-color:var(--color-background);border-radius:8px;border:1px solid var(--color-border)}.wechat-label{font-weight:500;color:var(--color-text)}.wechat-number{font-weight:700;color:var(--color-primary);background-color:#fff;padding:.3rem .8rem;border-radius:12px;border:1px solid var(--color-primary-light)}.wechat-qr{display:flex;justify-content:center;margin-top:1rem}.qr-placeholder{width:120px;height:120px;background-color:var(--color-background);border:1px solid var(--color-border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--color-text-light);font-size:.9rem}.friends-container{min-height:100vh;background-color:var(--color-background);color:var(--color-text);padding:1rem;position:relative}.friends-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;margin-bottom:1.5rem;border-bottom:1px solid var(--color-border)}.friends-header h2{font-size:1.5rem;font-weight:700;color:var(--color-text);margin:0}.friends-tabs{display:flex;background-color:#fff;border-radius:12px;padding:.3rem;margin-bottom:1.5rem;box-shadow:0 2px 8px #0000001a}.tab-btn{flex:1;padding:.8rem 1rem;border:none;background:none;border-radius:8px;font-size:1rem;font-weight:500;color:var(--color-text-light);cursor:pointer;transition:all .3s ease;position:relative}.tab-btn.active{background-color:var(--color-primary);color:#fff;box-shadow:0 2px 8px #4caf504d}.request-badge{position:absolute;top:-5px;right:-5px;background-color:var(--color-error);color:#fff;border-radius:50%;width:20px;height:20px;font-size:.7rem;display:flex;align-items:center;justify-content:center;font-weight:700}.friends-search{margin-bottom:1.5rem}.friends-search-input{width:100%;padding:1rem;border:1px solid var(--color-border);border-radius:12px;font-size:1rem;background-color:#fff;box-shadow:0 2px 8px #0000001a;transition:all .3s ease}.friends-search-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 12px #4caf504d}.friends-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.friend-item{display:flex;align-items:center;gap:1rem;padding:1.2rem;background-color:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;transition:all .3s ease}.friend-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.friend-avatar{position:relative;width:50px;height:50px;border-radius:50%;overflow:hidden;border:2px solid var(--color-primary-light);flex-shrink:0}.friend-avatar img{width:100%;height:100%;object-fit:cover}.friend-status{position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;border:2px solid white}.friend-status.online{background-color:var(--color-success)}.friend-status.in_game{background-color:var(--color-warning)}.friend-status.offline{background-color:var(--color-cat-gray)}.friend-info{flex:1;min-width:0}.friend-name{font-size:1rem;font-weight:500;color:var(--color-text);margin-bottom:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friend-status-text{font-size:.8rem;font-weight:500}.friend-status-text.online{color:var(--color-success)}.friend-status-text.in_game{color:var(--color-warning)}.friend-status-text.offline{color:var(--color-cat-gray)}.friend-actions{display:flex;gap:.5rem}.friend-action-btn{padding:.5rem 1rem;border:1px solid var(--color-border);border-radius:8px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .3s ease;min-width:60px}.invite-btn{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.invite-btn:hover{background-color:var(--color-primary-dark);border-color:var(--color-primary-dark)}.offline-btn{background-color:var(--color-background);color:var(--color-cat-gray);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.delete-btn{background-color:#fff;color:var(--color-error);border-color:var(--color-error)}.delete-btn:hover{background-color:var(--color-error);color:#fff}.add-friend-section{display:flex;justify-content:center;margin-top:2rem}.add-friend-btn{padding:1rem 2rem;background-color:var(--color-primary);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #4caf504d;display:flex;align-items:center;gap:.5rem}.add-friend-btn:hover{background-color:var(--color-primary-dark);transform:translateY(-2px);box-shadow:0 6px 16px #4caf5066}.friend-requests-section{background-color:#fff;border-radius:16px;box-shadow:0 4px 12px #0000001a;padding:1.5rem}.friend-requests-section h4{font-size:1.2rem;font-weight:700;color:var(--color-text);margin:0 0 1.5rem}.friend-request-item{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--color-border);transition:all .3s ease}.friend-request-item:last-child{border-bottom:none}.friend-request-item:hover{background-color:var(--color-background);border-radius:8px}.friend-request-info{flex:1;min-width:0}.friend-request-name{font-size:1rem;font-weight:500;color:var(--color-text);margin-bottom:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friend-request-time{font-size:.8rem;color:var(--color-text-light)}.friend-request-actions{display:flex;gap:.5rem}.friend-request-btn{padding:.5rem 1rem;border:1px solid var(--color-border);border-radius:8px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .3s ease;min-width:60px}.accept-btn{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.accept-btn:hover{background-color:var(--color-primary-dark);border-color:var(--color-primary-dark)}.reject-btn{background-color:#fff;color:var(--color-error);border-color:var(--color-error)}.reject-btn:hover{background-color:var(--color-error);color:#fff}.add-friend-modal{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}.add-friend-modal-content{background-color:#fff;border-radius:16px;padding:2rem;width:90%;max-width:400px;box-shadow:0 8px 24px #0003;animation:slideUp .3s ease}.add-friend-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.add-friend-modal-header h3{font-size:1.3rem;font-weight:700;color:var(--color-text);margin:0}.close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--color-text-light);transition:all .3s ease;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%}.close-btn:hover{background-color:var(--color-background);color:var(--color-text)}.add-friend-modal-body{margin-bottom:2rem}.add-friend-modal-body p{margin-bottom:1rem;color:var(--color-text-light)}.friend-id-input{width:100%;padding:1rem;border:1px solid var(--color-border);border-radius:8px;font-size:1rem;transition:all .3s ease}.friend-id-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #4caf501a}.add-friend-modal-footer{display:flex;gap:1rem;justify-content:flex-end}.cancel-btn,.confirm-btn{padding:.8rem 1.5rem;border:1px solid var(--color-border);border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease}.cancel-btn{background-color:#fff;color:var(--color-text)}.cancel-btn:hover{background-color:var(--color-background)}.confirm-btn{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.confirm-btn:hover:not(:disabled){background-color:var(--color-primary-dark);border-color:var(--color-primary-dark)}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}.loading-message,.no-friends-message,.no-friend-requests,.no-rooms-message{text-align:center;padding:2rem;color:var(--color-text-light);background-color:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.logo-header{gap:12px;margin:.4rem .8rem .1rem;padding:.6rem 1rem;border-radius:14px}.logo-header-img{width:120px;height:120px}.logo-header-text{font-size:1.6rem}.feature-buttons{grid-template-columns:repeat(3,1fr);gap:.8rem}.feature-button{padding:1rem .8rem}.button-icon{font-size:1.8rem}.button-icon-img{width:1.8rem;height:1.8rem}.button-text{font-size:.9rem}.user-info-section{padding:1.5rem;gap:1rem}.user-avatar{width:80px;height:80px}.username{font-size:1.3rem}.local-game-header,.online-game-header{padding:.6rem 1rem}.game-header-content{gap:.5rem}.game-header-content h2{font-size:1.1rem}.header-button{padding:.4rem .7rem;font-size:.7rem}.profile-content{padding:1.5rem 1rem;gap:1.5rem}.user-profile-header{padding:1.5rem;gap:1rem}.user-profile-avatar{width:80px;height:80px}.user-profile-details h3{font-size:1.3rem}.user-status-section,.feature-item{padding:1.2rem}.logout-btn{padding:.8rem 2.5rem;font-size:.9rem}.avatar-grid{grid-template-columns:repeat(4,1fr);gap:.8rem}.tutorial-container{padding:.8rem}.tutorial-step-card{padding:1.2rem}.tutorial-step-header h2{font-size:1.1rem}.tutorial-buttons{flex-direction:column}.tutorial-btn{width:100%}.customer-service-card{padding:1.2rem}.friends-container{padding:.8rem}.friend-item{padding:1rem}.friend-avatar{width:40px;height:40px}.friend-action-btn{padding:.4rem .8rem;font-size:.7rem;min-width:50px}.add-friend-modal-content{padding:1.5rem;width:95%}}.audio-controls-fixed{position:fixed;right:12px;z-index:9999;display:flex;align-items:center;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}.audio-controls-fixed.dragging{cursor:grabbing}.music-controls{display:flex;align-items:center;gap:8px;padding:8px;background:var(--color-surface);border-radius:24px;box-shadow:0 2px 8px #00000026}.audio-toggle-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;cursor:pointer;transition:all .3s ease}.audio-toggle-btn:hover{background:var(--color-background)}.audio-toggle-btn.active{background:var(--color-primary)}.audio-toggle-btn.active:hover{background:var(--color-primary-dark)}.audio-icon{font-size:18px}.network-container{width:100%;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}.network-container .network-panel{position:relative!important;inset:auto}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px}.modal-content{background:#fff;border-radius:12px;padding:20px;max-width:90vw;max-height:90vh;overflow:auto}.board-image-modal{display:flex;flex-direction:column;align-items:center;gap:16px}.board-image-modal h3{margin:0;font-size:1.3rem;color:var(--color-primary)}.board-image-container{max-width:100%;max-height:60vh;overflow:auto;display:flex;justify-content:center;align-items:center}.board-image{max-width:100%;max-height:60vh;height:auto;display:block}.modal-button{padding:12px 32px;font-size:1rem;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease}.modal-button.confirm{background:var(--color-primary);color:#fff}.modal-button.confirm:hover{background:var(--color-primary-dark)}.game-report-modal{width:90%;max-width:400px;padding:24px}.game-report-modal h3{text-align:center;margin:0 0 20px;font-size:1.5rem;color:var(--color-primary)}.report-content-scrollable{max-height:60vh;overflow-y:auto}.report-section{margin-bottom:20px;padding:16px;background:#f8f9fa;border-radius:10px}.report-section h4{margin:0 0 12px;font-size:1rem;color:var(--color-primary);border-bottom:1px solid var(--color-border);padding-bottom:8px}.report-section p{margin:0;font-size:1.2rem;font-weight:600;text-align:center;color:var(--color-text)}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-item{display:flex;justify-content:space-between;padding:8px 12px;background:#fff;border-radius:6px;font-size:.9rem}.stat-item.highlight{background:#e8f5e9;font-weight:500}.stat-item.winner{background:#fff3e0;color:#e65100}.stat-item.winner .stat-value{font-weight:700}.stat-label{color:var(--color-text-light)}.stat-value{font-weight:600;color:var(--color-text)}.game-report-modal .modal-button{width:100%;margin-top:16px}.difficulty-toggle-container{display:flex;justify-content:center;align-items:center;width:100%}.difficulty-select{padding:8px 28px 8px 16px;border:2px solid #4CAF50;border-radius:20px;font-size:14px;font-weight:600;background-color:#fff;color:#4caf50;cursor:pointer;transition:all .3s ease;min-width:110px;text-align:center;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='%234CAF50' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px top 50%;background-size:10px auto}.difficulty-select option{background:#fff;color:#4caf50;padding:8px;font-weight:600}.difficulty-select:hover{background-color:#4caf50;color:#fff;transform:translateY(-2px);box-shadow:0 4px 8px #4caf5033;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='%23ffffff' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E")}.difficulty-select:active{transform:translateY(0);box-shadow:0 2px 4px #4caf5033}.difficulty-select:focus{outline:none}@media(max-width:768px){.difficulty-select{padding:6px 24px 6px 12px;font-size:12px;min-width:100px;background-position:right 10px top 50%;background-size:9px auto}}.bottom-control-panel{position:static;width:100%;background-color:#1a1a2ef2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -4px 20px #0003;border-top:1px solid rgba(78,205,196,.2);transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column-reverse;z-index:100;flex-shrink:0}.bottom-control-panel.expanded{max-height:min(500px,45vh);overflow-y:auto;box-shadow:0 -6px 25px #00000040}.bottom-control-panel.collapsed{max-height:55px;overflow:hidden}.control-panel-toggle{width:100%;padding:.9rem;background:linear-gradient(135deg,#4ecdc433,#4ecdc41a);color:#4ecdc4;border:none;border-radius:0;font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.6rem;transition:all .3s cubic-bezier(.4,0,.2,1);order:1;border-top:1px solid rgba(78,205,196,.1)}.control-panel-toggle:hover{background:linear-gradient(135deg,#4ecdc44d,#4ecdc433);color:#45b7aa;transform:translateY(-1px)}.control-panel-toggle:active{transform:translateY(0)}.control-panel-content{padding:1.5rem;overflow-y:auto;background-color:#1a1a2ee6;max-height:550px;order:2;border-top:1px solid rgba(78,205,196,.1)}.control-panel-content::-webkit-scrollbar{width:6px}.control-panel-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.control-panel-content::-webkit-scrollbar-thumb{background:#4ecdc44d;border-radius:3px;transition:all .3s ease}.control-panel-content::-webkit-scrollbar-thumb:hover{background:#4ecdc480}@media(max-width:768px){.control-panel-content{padding:1.2rem}.bottom-control-panel.expanded{max-height:min(400px,50vh)}}@media(max-width:480px){.control-panel-toggle{padding:.7rem;font-size:.9rem}.control-panel-content{padding:1rem}.bottom-control-panel.expanded{max-height:min(350px,55vh)}}.control-panel-content h3{color:#4ecdc4;margin-bottom:1.5rem;font-size:1.3rem;text-align:center;border-bottom:1px solid rgba(78,205,196,.2);padding-bottom:1rem;font-family:var(--font-family-base);font-weight:700;letter-spacing:1px;text-shadow:0 0 10px rgba(78,205,196,.2)}.control-section{margin-bottom:1.5rem;padding:1.5rem;background:#ffffff08;border-radius:12px;border:1px solid rgba(78,205,196,.1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0000001a}.control-section:hover{box-shadow:0 4px 12px #00000026;border-color:#4ecdc433;transform:translateY(-1px)}.control-section h4{color:#4ecdc4;margin-bottom:1rem;font-size:1.1rem;font-weight:600;font-family:var(--font-family-base);letter-spacing:.5px;display:flex;align-items:center;gap:.5rem}.control-section h4:before{content:"•";color:#4ecdc4;font-size:1.2rem}.control-item{margin-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}.control-item label{color:#ffffffb3;font-size:.9rem;font-family:var(--font-family-base);font-weight:500}.control-item select,.control-item input[type=range]{width:100%;padding:.7rem;border:1px solid rgba(78,205,196,.2);border-radius:8px;font-size:.9rem;background:#ffffff0d;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:var(--font-family-base);color:#4ecdc4;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='%234ecdc4' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7em top 50%;background-size:.65em auto}.control-item select option{background:#1a1a2e;color:#4ecdc4;padding:.5rem}.control-item select:focus,.control-item input[type=range]:focus{outline:none;border-color:#4ecdc4;box-shadow:0 0 0 3px #4ecdc41a;background:#ffffff14}.control-item input[type=range]{padding:.5rem 0}.control-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#4ecdc4;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 6px #4ecdc44d}.control-item input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 3px 8px #4ecdc466}.control-item input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#4ecdc4;cursor:pointer;border:none;transition:all .3s ease;box-shadow:0 2px 6px #4ecdc44d}.control-item input[type=range]::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 3px 8px #4ecdc466}.control-item span{color:#4ecdc4;font-weight:600;align-self:flex-end;margin-top:-.5rem;margin-right:.5rem;font-family:var(--font-family-base);font-size:.85rem}.color-info{margin-bottom:1rem;background:#ffffff08;padding:1.2rem;border-radius:10px;border:1px solid rgba(78,205,196,.1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .3s ease}.color-info:hover{border-color:#4ecdc433;box-shadow:0 2px 8px #4ecdc41a}.color-info p{margin:.5rem 0;color:#fffc;font-size:.9rem;font-family:var(--font-family-base);display:flex;align-items:center;gap:.5rem}.color-info strong{color:#4ecdc4;font-weight:600}.ai-thinking{color:#ffffffb3;font-size:.9rem;margin-top:.8rem;text-align:center;background:#4ecdc414;padding:.8rem;border-radius:8px;border:1px solid rgba(78,205,196,.2);font-family:var(--font-family-base);animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #4ecdc466}70%{box-shadow:0 0 0 10px #4ecdc400}to{box-shadow:0 0 #4ecdc400}}.toggle-switch{position:relative;display:inline-block;width:60px;height:34px;margin:.8rem 0}.toggle-label{position:absolute;cursor:pointer;inset:0;background:#ffffff1a;transition:all .4s cubic-bezier(.4,0,.2,1);border-radius:34px;border:1px solid rgba(78,205,196,.2)}.toggle-label:before{position:absolute;content:"";height:26px;width:26px;left:3px;bottom:3px;background:#4ecdc4;transition:all .4s cubic-bezier(.4,0,.2,1);border-radius:50%;box-shadow:0 2px 4px #0003}input:checked+.toggle-label{background:#4ecdc433;border-color:#4ecdc44d}input:focus+.toggle-label{box-shadow:0 0 0 3px #4ecdc41a}input:checked+.toggle-label:before{transform:translate(26px);background:#45b7aa}input:disabled+.toggle-label{background:#ffffff0d;border-color:#4ecdc41a;cursor:not-allowed}input:disabled+.toggle-label:before{background:#4ecdc480}.toggle-description{font-size:.8rem;color:#fff9;margin-top:.5rem;margin-bottom:0;font-family:var(--font-family-base)}.control-buttons{display:flex;flex-direction:column;gap:.8rem}.control-button{padding:1rem 1.5rem;border:1px solid rgba(78,205,196,.2);border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);background:#ffffff08;color:#4ecdc4;font-family:var(--font-family-game-control);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:relative;overflow:hidden}.control-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(78,205,196,.1),transparent);transition:all .6s ease}.control-button:hover:before{left:100%}.control-button.resign-button{font-size:.9rem;border-color:#ff6b6b4d;color:#ff6b6b;background:#ff6b6b0d}.control-button.resign-button:hover:before{background:linear-gradient(90deg,transparent,rgba(255,107,107,.1),transparent)}.control-button:hover:not(:disabled){background:#4ecdc41a;color:#45b7aa;border-color:#4ecdc466;transform:translateY(-2px);box-shadow:0 4px 12px #4ecdc433}.control-button.resign-button:hover:not(:disabled){background:#ff6b6b1a;color:#ff5252;border-color:#ff6b6b80;box-shadow:0 4px 12px #ff6b6b33}.control-button:active{transform:translateY(0)}.control-button:disabled{background:#ffffff08;color:#ffffff4d;border-color:#ffffff1a;cursor:not-allowed;box-shadow:none}.reset-button{background:#ffffff08;color:#4ecdc4;border:1px solid rgba(78,205,196,.2)}.reset-button:hover:not(:disabled){background:#4ecdc41a;color:#45b7aa;border-color:#4ecdc466}.control-button.ai-judge-button{background:#ffffff08;color:#4ecdc4;border:1px solid rgba(78,205,196,.2)}.control-button.ai-judge-button:hover:not(:disabled){background:#4ecdc41a;color:#45b7aa;border-color:#4ecdc466;box-shadow:0 4px 12px #4ecdc433}.control-button.ai-judge-button:disabled{background:#ffffff08;color:#ffffff4d;border-color:#ffffff1a;cursor:not-allowed}@media(max-width:768px){.control-section{padding:1.2rem}.control-panel-content h3{margin-bottom:1.5rem;padding-bottom:.8rem}.control-button{padding:.9rem 1.2rem}.color-info{padding:1rem}}@media(hover:none)and (pointer:coarse){.control-button{transition:all .15s ease}.control-button:active:not(:disabled){transform:scale(.95)}}.network-status{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem;padding:1rem;background-color:var(--color-surface);border-radius:8px;font-size:.9rem;border:1px solid var(--color-border)}.connection-indicator{font-weight:600;margin-bottom:.5rem;font-family:var(--font-family-room-management)}.connection-indicator.connected{color:var(--color-primary)}.connection-indicator.disconnected{color:var(--color-text-light)}.current-user{color:var(--color-text-light);font-size:.8rem;font-family:var(--font-family-base)}.auth-section,.network-section{margin-bottom:2rem;padding:1.5rem;background-color:var(--color-surface);border-radius:8px;border:1px solid var(--color-border)}.auth-container{display:flex;flex-direction:column;gap:1.2rem}.auth-container h3{margin-bottom:.8rem;font-size:1.2rem;text-align:center;border-bottom:none;padding-bottom:0;font-family:var(--font-family-base)}.auth-error{color:var(--color-text-light);background-color:#5d40371a;padding:.8rem;border-radius:8px;font-size:.8rem;text-align:center;border:1px solid var(--color-border);font-family:var(--font-family-error)}.auth-form{display:flex;flex-direction:column;gap:1rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{color:var(--color-text-light);font-size:.9rem;font-family:var(--font-family-base)}.form-group input{width:100%;padding:.6rem;border:1px solid var(--color-border);border-radius:8px;font-size:.9rem;background-color:var(--color-surface);transition:border-color .3s ease;font-family:var(--font-family-base);color:var(--color-text)}.form-group input:focus{outline:none;border-color:var(--color-primary)}.auth-button{padding:.8rem 1.2rem;border:1px solid var(--color-border);border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;background-color:var(--color-surface);color:var(--color-primary);font-family:var(--font-family-room-management)}.auth-button:hover:not(:disabled){background-color:var(--color-primary);color:var(--color-light);transform:translateY(-1px)}.auth-button:active{transform:translateY(0)}.auth-button:disabled{background-color:var(--color-border);color:var(--color-text-light);cursor:not-allowed;transform:none}.auth-switch{display:flex;justify-content:center;align-items:center;gap:.5rem;font-size:.9rem;color:var(--color-text-light);font-family:var(--font-family-base)}.auth-switch-button{background:none;border:none;color:var(--color-primary);cursor:pointer;font-size:.9rem;font-weight:600;padding:0;text-decoration:underline;font-family:var(--font-family-base)}.auth-switch-button:hover{color:var(--color-accent)}.room-manager{display:flex;flex-direction:column;gap:1.2rem}.room-manager h3{margin-bottom:.8rem;font-size:1.2rem;text-align:center;border-bottom:none;padding-bottom:0;font-family:var(--font-family-base)}.room-error{color:var(--color-text-light);background-color:#5d40371a;padding:.8rem;border-radius:8px;font-size:.8rem;text-align:center;border:1px solid var(--color-border);font-family:var(--font-family-error)}.room-options{display:flex;flex-direction:column;gap:1.5rem}.create-room-section,.join-room-section{display:flex;flex-direction:column;gap:1rem}.create-room-section h3,.join-room-section h3{margin-bottom:.8rem;font-size:1.1rem;text-align:center;border-bottom:1px solid var(--color-border);padding-bottom:.8rem;font-family:var(--font-family-base)}.current-room{display:flex;flex-direction:column;gap:.3rem;padding:.4rem;margin-top:0}.current-room h3{font-size:.95rem;margin:0;text-align:center;line-height:1.2}.current-room h4{font-size:.85rem;margin:0;line-height:1.2}.room-info{display:flex;flex-direction:column;gap:.2rem;background-color:var(--color-surface);padding:.4rem;border-radius:8px;border:1px solid var(--color-border)}.room-info p{margin:0;font-size:.85rem;line-height:1.3}.players-list{display:flex;flex-direction:column;gap:.2rem}.player-item{display:flex;align-items:center;background-color:var(--color-surface);padding:.3rem .5rem;border-radius:8px;border:1px solid var(--color-border);font-size:.85rem;font-family:var(--font-family-base);flex-wrap:wrap;gap:.3rem;line-height:1.3}.player-item>span:first-of-type{flex:1;min-width:120px}.player-item>span:not(:first-child){margin-left:auto}.player-item>span+span{margin-left:.8rem}.player-status{font-size:.75rem;font-weight:600;padding:.2rem .5rem;border-radius:16px;font-family:var(--font-family-base)}.player-status.ready{color:var(--color-primary);background-color:#3e27231a;border:1px solid var(--color-primary)}.player-status.not-ready{color:var(--color-text-light);background-color:#5d40371a;border:1px solid var(--color-text-light)}.player-color{font-size:.75rem;font-weight:600;padding:.2rem .5rem;border-radius:16px;background-color:var(--color-background);border:1px solid var(--color-border);font-family:var(--font-family-base)}.kick-button{padding:.4rem .8rem;border:1px solid var(--color-border);border-radius:6px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .3s ease;background-color:var(--color-surface);color:#ff6b6b;margin-right:.5rem;font-family:var(--font-family-base)}.kick-button:hover{background-color:#ff6b6b;color:#fff;transform:translateY(-1px)}.kick-button:active{transform:translateY(0)}.room-actions,.game-started{display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:center}.room-actions .action-button{padding:.4rem .8rem;font-size:.8rem;flex:1;max-width:120px}.matchmaking{display:flex;flex-direction:column;gap:1.2rem}.matchmaking h3{margin-bottom:.8rem;font-size:1.2rem;text-align:center;border-bottom:none;padding-bottom:0;font-family:var(--font-family-base)}.match-queue-details{margin:.8rem 0;text-align:center}.match-queue-sizes{display:flex;gap:1rem;flex-wrap:nowrap;overflow-x:auto;padding:.5rem 0;justify-content:center}.match-queue-size{font-size:1rem;white-space:nowrap;color:var(--color-text)}.match-queue-sizes::-webkit-scrollbar{height:4px}.match-queue-sizes::-webkit-scrollbar-track{background:var(--color-background);border-radius:2px}.match-queue-sizes::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:2px}.match-queue-sizes::-webkit-scrollbar-thumb:hover{background:var(--color-text-light)}.matching-in-progress,.not-matching{display:flex;flex-direction:column;gap:1rem;align-items:center}.matching-status{display:flex;flex-direction:column;gap:.5rem;text-align:center;font-family:var(--font-family-base);padding:1rem;background-color:#2196f34d;border-radius:8px;border:1px solid rgba(33,150,243,.6);box-shadow:0 2px 8px #2196f366;margin:.5rem 0}.action-button{padding:.8rem 1.2rem;border:1px solid var(--color-border);border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;background-color:var(--color-surface);color:var(--color-primary);width:100%;font-family:var(--font-family-game-control)}.action-button:hover:not(:disabled){background-color:var(--color-primary);color:var(--color-light);transform:translateY(-1px)}.action-button:active{transform:translateY(0)}.action-button:disabled{background-color:var(--color-border);color:var(--color-text-light);cursor:not-allowed;transform:none}.action-button.primary{background-color:var(--color-surface);color:var(--color-primary);border:1px solid var(--color-border)}.action-button.primary:hover:not(:disabled){background-color:var(--color-primary);color:var(--color-light)}.action-button.secondary{background-color:var(--color-surface);color:var(--color-primary);border:1px solid var(--color-border)}.action-button.secondary:hover:not(:disabled){background-color:var(--color-accent);color:var(--color-light)}.ai-status{margin-top:1rem;display:flex;flex-direction:column;gap:.8rem}.ai-thinking-status{display:flex;flex-direction:column;gap:.8rem}.ai-thinking-indicator{display:flex;align-items:center;gap:.8rem;color:var(--color-primary);font-weight:600;padding:1rem;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;font-family:var(--font-family-base)}.spinner{display:inline-block;width:20px;height:20px;border:2px solid rgba(62,39,35,.3);border-radius:50%;border-top-color:var(--color-primary);animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.ai-mode-info{font-size:.8rem;color:var(--color-text-light);margin:0;padding:0 1rem;font-family:var(--font-family-base)}.ai-ready-status{display:flex;align-items:center;gap:.8rem;color:var(--color-primary);font-weight:600;padding:1rem;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;font-family:var(--font-family-base)}.ai-ready-indicator{display:inline-block;width:12px;height:12px;background-color:var(--color-primary);border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}to{transform:scale(1);opacity:1}}@media(max-width:768px){.ai-thinking-indicator,.ai-ready-status{flex-direction:column;align-items:center;text-align:center;gap:.8rem}.spinner{margin-bottom:.5rem}.control-section{padding:1.2rem}.control-panel-content h3{margin-bottom:1.5rem;padding-bottom:.8rem}}.control-button.resign-button{background-color:var(--color-surface);color:red;border:1px solid var(--color-border)}.control-button.resign-button:hover:not(:disabled){background-color:var(--color-primary);color:var(--color-light)}.control-button.resign-button:disabled{background-color:var(--color-border);color:var(--color-text-light);cursor:not-allowed}.control-button.ai-judge-button{background-color:var(--color-surface);color:var(--color-primary);border:1px solid var(--color-border)}.control-button.ai-judge-button:hover:not(:disabled){background-color:var(--color-accent);color:var(--color-light)}.control-button.ai-judge-button:disabled{background-color:var(--color-border);color:var(--color-text-light);cursor:not-allowed}.placement-confirm-buttons{display:flex;flex-direction:row;justify-content:center;gap:0rem;padding:0rem;background:linear-gradient(135deg,#4ecdc41a,#4ecdc40d);border-top:1px solid rgba(78,205,196,.2);order:0;animation:slideIn .3s ease;width:100%;box-sizing:border-box}@keyframes slideIn{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.placement-confirm-button{padding:.6rem 1.8rem;font-size:1rem;font-weight:700;background:linear-gradient(135deg,#4ecdc433,#4ecdc41a);border:2px solid rgba(78,205,196,.4);color:#4ecdc4;box-shadow:0 0 15px #4ecdc433;margin:0;border-radius:0;flex:1;box-sizing:border-box}.placement-confirm-button:hover:not(:disabled){background:linear-gradient(135deg,#4ecdc44d,#4ecdc433);border-color:#4ecdc499;box-shadow:0 0 25px #4ecdc44d;transform:none}.placement-cancel-button{padding:.6rem 1.8rem;font-size:1rem;font-weight:700;background:linear-gradient(135deg,#ff6b6b33,#ff6b6b1a);border:2px solid rgba(255,107,107,.4);color:#ff6b6b;box-shadow:0 0 15px #ff6b6b33;margin:0;border-radius:0;flex:1;box-sizing:border-box}.placement-cancel-button:hover:not(:disabled){background:linear-gradient(135deg,#ff6b6b4d,#ff6b6b33);border-color:#ff6b6b99;box-shadow:0 0 25px #ff6b6b4d;transform:none}.online-control-panel-content{padding:1rem;background-color:#1a1a2ee6;border-top:1px solid rgba(78,205,196,.1)}.game-not-started{text-align:center;color:#ffffffb3;font-size:1rem;padding:1.2rem;background:#ffffff08;border-radius:10px;border:1px solid rgba(78,205,196,.1);margin-top:1rem;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .3s ease}.game-not-started:hover{border-color:#4ecdc433;box-shadow:0 2px 8px #0000001a}.agreement-status{background:#2196f314;border:1px solid rgba(33,150,243,.2);border-radius:10px;padding:1.2rem;margin-top:1rem;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .3s ease}.agreement-status:hover{border-color:#2196f34d;box-shadow:0 2px 8px #2196f31a}.agreement-status p{margin:.5rem 0;color:#4ecdc4;font-size:.85rem;line-height:1.4;font-family:var(--font-family-base)}.request-info{font-size:.8rem!important;color:#fff9!important;margin-top:.8rem!important;padding-top:.8rem;border-top:1px solid rgba(78,205,196,.2)}.agreed-info{color:#4ecdc4!important;font-weight:600;margin-top:.8rem!important;padding-top:.8rem;border-top:1px solid rgba(78,205,196,.2)}.undo-status{background:#ffffff08;border:1px solid rgba(78,205,196,.1);border-radius:10px;padding:1.2rem;margin-top:1rem;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .3s ease}.undo-status:hover{border-color:#4ecdc433;box-shadow:0 2px 8px #0000001a}.undo-message{margin:.5rem 0;font-size:.85rem;line-height:1.4;text-align:center;color:#fffc;font-family:var(--font-family-base)}.undo-waiting,.undo-agreed{text-align:center}.undo-buttons{display:flex;gap:.8rem;margin-top:1rem}.undo-button{flex:1;padding:.8rem 1rem;border:1px solid rgba(78,205,196,.2);border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);background:#ffffff08;color:#4ecdc4;font-family:var(--font-family-game-control);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:relative;overflow:hidden}.undo-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(78,205,196,.1),transparent);transition:all .6s ease}.undo-button:hover:before{left:100%}.undo-button.agree{background:#ffffff08;color:#4ecdc4;border:1px solid rgba(78,205,196,.2)}.undo-button.agree:hover{background:#4ecdc41a;color:#45b7aa;border-color:#4ecdc466;transform:translateY(-1px);box-shadow:0 4px 12px #4ecdc433}.undo-button.reject{background:#ffffff08;color:#ff6b6b;border:1px solid rgba(255,107,107,.3)}.undo-button.reject:hover{background:#ff6b6b1a;color:#ff5252;border-color:#ff6b6b80;transform:translateY(-1px);box-shadow:0 4px 12px #ff6b6b33}.undo-button.reject:hover:before{background:linear-gradient(90deg,transparent,rgba(255,107,107,.1),transparent)}.undo-button.cancel{background:#ffffff08;color:#fff9;border:1px solid rgba(255,255,255,.1);margin-top:1rem}.undo-button.cancel:hover{background:#ffffff0d;color:#fffc;border-color:#fff3;transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.undo-button:active{transform:translateY(0)}.undo-completed{background:#4caf5014;border-color:#4caf504d;color:#4ecdc4}.undo-rejected{background:#f4433614;border-color:#f443364d;color:#ffffffb3}@media(max-width:768px){.undo-buttons{flex-direction:column}.online-control-panel-content{padding:1.2rem}.game-not-started,.agreement-status,.undo-status{padding:1rem}.undo-button{padding:.7rem .9rem}}@media(hover:none)and (pointer:coarse){.undo-button{transition:all .15s ease}.undo-button:active:not(:disabled){transform:scale(.95)}}.control-panel-toggle.notification-flash{animation:notificationFlash 1.5s infinite;position:relative;overflow:hidden}.control-panel-toggle.notification-flash:before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,0,0,.3) 0%,transparent 70%);animation:notificationPulse 1.5s infinite;pointer-events:none;z-index:-1}@keyframes notificationFlash{0%,to{box-shadow:0 0 5px #ff00004d,0 0 10px #ff00001a}50%{box-shadow:0 0 15px #f009,0 0 25px #ff00004d}}@keyframes notificationPulse{0%,to{opacity:0;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}.auth-page-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100vh;padding:16px 20px;background:linear-gradient(135deg,var(--color-background) 0%,#EDE7DC 100%);box-sizing:border-box;overflow:hidden}.auth-page-title-section{text-align:center;margin-bottom:8px;flex-shrink:0}.auth-page-title{font-family:var(--font-family-header);font-size:1.6rem;font-weight:600;color:var(--color-primary);margin:0;letter-spacing:2px}.auth-illustration{width:120px;height:120px;margin-bottom:8px;animation:float 3s ease-in-out infinite;flex-shrink:0}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.auth-illustration-img{width:100%;height:100%;object-fit:contain;border-radius:24px}.auth-form-section{width:100%;max-width:360px;display:flex;flex-direction:column;gap:10px;flex-shrink:0}.auth-input-group{width:100%}.auth-input-wrapper{display:flex;align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;overflow:hidden;transition:all .3s ease}.auth-input-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 2px #3e27231a}.auth-input-icon{padding:0 10px;font-size:1rem;color:var(--color-text-light)}.auth-input-field{flex:1;padding:12px 10px;border:none;outline:none;font-size:.95rem;font-family:var(--font-family-base);color:var(--color-text);background:transparent}.auth-input-field::placeholder{color:#999}.auth-password-toggle{padding:10px;border:none;background:transparent;cursor:pointer;font-size:1rem;transition:transform .2s ease}.auth-password-toggle:hover{transform:scale(1.1)}.auth-primary-btn{width:100%;padding:12px;font-size:1rem;font-weight:600;font-family:var(--font-family-base);color:var(--color-light);background:var(--color-primary);border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;letter-spacing:1px;margin-top:2px}.auth-primary-btn:hover:not(:disabled){background:var(--color-accent);transform:translateY(-1px);box-shadow:0 3px 10px #3e272333}.auth-primary-btn:disabled{opacity:.6;cursor:not-allowed}.auth-divider-section{display:flex;align-items:center;gap:10px;margin:4px 0}.auth-divider-line{flex:1;height:1px;background:var(--color-border)}.auth-divider-text{color:var(--color-text-light);font-size:.85rem}.auth-wechat-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;font-size:.95rem;font-weight:500;font-family:var(--font-family-base);color:#07c160;background:#fff;border:2px solid #07C160;border-radius:10px;cursor:pointer;transition:all .3s ease}.auth-wechat-btn:hover:not(:disabled){background:#07c160;color:#fff;transform:translateY(-1px);box-shadow:0 3px 10px #07c16033}.auth-wechat-btn:disabled{opacity:.6;cursor:not-allowed}.auth-wechat-icon{font-size:1.1rem}.auth-error{padding:8px 10px;background:#ffebee;border:1px solid #FFCDD2;border-radius:8px;color:#c62828;font-size:.8rem;text-align:center;min-height:18px}.wechat-qr-container{background:#fff;border-radius:12px;padding:16px;box-shadow:0 3px 16px #0000001a}.wechat-qr-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.wechat-qr-header h3{margin:0;font-size:1rem;color:var(--color-primary)}.cancel-wechat-login-button{padding:6px 12px;font-size:.8rem;background:transparent;border:1px solid var(--color-border);border-radius:6px;cursor:pointer}.wechat-qr-content{display:flex;flex-direction:column;align-items:center;gap:10px}.wx-login-iframe{width:240px;height:260px}.wechat-qr-tips{color:var(--color-text-light);font-size:.8rem}.auth-user-info{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px}.auth-header{width:100%;display:flex;justify-content:flex-end}.auth-button{padding:8px 16px;font-size:.85rem;font-family:var(--font-family-base);background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;cursor:pointer;transition:all .3s ease}.auth-button:hover{background:var(--color-primary);color:var(--color-light);border-color:var(--color-primary)}.user-info{text-align:center}.user-email{font-size:1rem;color:var(--color-text)}.logout-button{background:#ffebee;border-color:#ffcdd2;color:#c62828}.logout-button:hover{background:#c62828;border-color:#c62828;color:#fff}@media(max-height:700px){.auth-page-container{padding:10px 16px}.auth-illustration{width:90px;height:90px}.auth-form-section{gap:8px}.auth-input-field{padding:10px 8px;font-size:.9rem}.auth-primary-btn,.auth-wechat-btn{padding:10px;font-size:.9rem}.auth-page-title{font-size:1.4rem}}@media(max-width:480px){.auth-page-container{padding:12px 16px}.auth-page-title{font-size:1.4rem}.auth-illustration{width:100px;height:100px}.auth-form-section{max-width:100%;gap:10px}.auth-input-field{padding:12px 10px;font-size:.95rem}.auth-primary-btn{padding:12px;font-size:1rem}.auth-wechat-btn{padding:12px;font-size:.95rem}}.ranking-overlay{position:fixed;inset:0;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.ranking-modal{background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;width:90%;max-width:500px;max-height:80vh;display:flex;flex-direction:column}.ranking-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e8e8e8}.ranking-filter{padding:12px 20px;border-bottom:1px solid #e8e8e8;background-color:#fafafa}.board-size-tabs{display:flex;gap:8px;justify-content:center}.board-size-tab{padding:8px 16px;border:1px solid #d9d9d9;background-color:#fff;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;color:#666;transition:all .3s}.board-size-tab:hover{border-color:#1890ff;color:#1890ff}.board-size-tab.active{background-color:#1890ff;border-color:#1890ff;color:#fff}.ranking-header h3{margin:0;font-size:18px;font-weight:600;color:#333}.ranking-close-btn{background:none;border:none;font-size:24px;cursor:pointer;color:#666;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .3s}.ranking-close-btn:hover{color:#333;background-color:#f5f5f5}.ranking-content{padding:20px;overflow-y:auto;flex:1;display:flex;flex-direction:column;max-height:400px}.ranking-table{width:100%;border-collapse:collapse;flex:1;overflow-y:auto}.ranking-table th,.ranking-table td{padding:12px;text-align:center;border-bottom:1px solid #e8e8e8}.ranking-table th{background-color:#f5f5f5;font-weight:600;color:#333;position:sticky;top:0;z-index:1}.ranking-table tr:hover{background-color:#fafafa}.ranking-rank{font-weight:600;width:10%}.ranking-username{width:25%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-title{width:15%;font-weight:500;color:#666}.ranking-wins,.ranking-total-games{width:10%;font-weight:500}.ranking-win-rate{width:15%;font-weight:500;color:#333}.ranking-loading,.ranking-error,.ranking-empty{display:flex;justify-content:center;align-items:center;height:200px;font-size:16px;color:#666}.ranking-error{color:#ff4d4f}.ranking-content::-webkit-scrollbar{width:8px}.ranking-content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.ranking-content::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.ranking-content::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media(max-width:768px){.ranking-modal{width:95%;max-height:90vh}.ranking-header{padding:12px 16px}.ranking-header h3{font-size:16px}.ranking-content{padding:16px}.ranking-table th,.ranking-table td{padding:10px;font-size:14px}}.tutorial-container{display:flex;flex-direction:column;min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.tutorial-header{display:flex;align-items:center;padding:1.5rem 1.2rem;background:#fff;box-shadow:0 4px 20px #00000014;border-radius:0 0 30px 30px;margin-bottom:1.5rem;position:relative;overflow:hidden}.tutorial-header:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#4facfe,#00f2fe)}.tutorial-header h2{margin:0;color:#2c3e50;font-size:1.4rem;font-weight:700;flex:1;text-align:center;letter-spacing:.5px}.back-btn{background:linear-gradient(135deg,#f0f4f8,#e9ecef);border:none;font-size:1.5rem;color:#495057;cursor:pointer;padding:.75rem 1rem;border-radius:16px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000014;position:relative;z-index:1}.back-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#e9ecef,#dee2e6);border-radius:16px;opacity:0;transition:opacity .3s ease;z-index:-1}.back-btn:hover{transform:translate(-4px) scale(1.05);box-shadow:0 4px 12px #0000001f}.back-btn:hover:before{opacity:1}.back-btn:active{transform:translate(-2px) scale(.98);box-shadow:0 1px 4px #0000001a}.tutorial-main-content{flex:1;display:flex;flex-direction:column;padding:0 1.2rem 1.5rem}.tutorial-step-header{background:#fff;border-radius:20px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 4px 20px #00000014;text-align:center}.tutorial-step-header h2{margin:0;color:#2c3e50;font-size:1.4rem;font-weight:700}.tutorial-step-content{background:#fff;border-radius:20px;padding:2rem;margin-bottom:1.5rem;box-shadow:0 4px 20px #00000014;color:#495057;line-height:1.7}.tutorial-step-content h3{margin-top:1.5rem;margin-bottom:1rem;color:#2c3e50;font-size:1.2rem;font-weight:700;border-bottom:3px solid #4facfe;padding-bottom:.5rem}.tutorial-step-content p{margin-bottom:1rem;font-size:1rem}.tutorial-step-content ul{margin-bottom:1.5rem;padding-left:1.5rem}.tutorial-step-content li{margin-bottom:.5rem}.tutorial-step-footer{background:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 4px 20px #00000014}.tutorial-content-wrapper{flex:1;padding:0 1.2rem;display:flex;justify-content:center;align-items:center}.tutorial-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:9999;overflow:hidden}@media(max-width:768px){.tutorial-overlay{position:absolute;width:100%;height:100%}}.tutorial-modal{background:#fff;border-radius:24px;width:90%;max-width:850px;max-height:60vh;overflow:hidden;box-shadow:0 12px 48px #00000026;display:flex;flex-direction:column;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;animation:fadeInUp .6s cubic-bezier(.4,0,.2,1) forwards}.tutorial-modal:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#4facfe,#00f2fe)}.tutorial-modal .tutorial-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #f0f0f0;background:#f8f9fa;border-radius:0;margin-bottom:0;box-shadow:none;position:relative}.tutorial-modal .tutorial-header:before{display:none}.tutorial-modal .tutorial-header h2{margin:0;color:#2c3e50;font-size:1.3rem;font-weight:700;flex:1;text-align:left;letter-spacing:.5px}.tutorial-close-btn{background:linear-gradient(135deg,#f0f4f8,#e9ecef);border:none;font-size:1.3rem;cursor:pointer;color:#495057;width:44px;height:44px;display:flex;justify-content:center;align-items:center;border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #00000014}.tutorial-close-btn:hover{transform:scale(1.1);box-shadow:0 4px 12px #0000001f;background:linear-gradient(135deg,#e9ecef,#dee2e6)}.tutorial-close-btn:active{transform:scale(.95);box-shadow:0 1px 4px #0000001a}.tutorial-content{padding:2rem;color:#495057;line-height:1.7;flex:1;display:block;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ced4da #f8f9fa}.tutorial-content::-webkit-scrollbar{width:6px}.tutorial-content::-webkit-scrollbar-track{background:#f8f9fa;border-radius:3px}.tutorial-content::-webkit-scrollbar-thumb{background:#ced4da;border-radius:3px}.tutorial-content::-webkit-scrollbar-thumb:hover{background:#adb5bd}.tutorial-content h3{margin-top:2rem;margin-bottom:1.2rem;color:#2c3e50;font-size:1.2rem;font-weight:700;border-bottom:3px solid #4facfe;padding-bottom:.75rem;letter-spacing:.5px}.tutorial-content p{margin-bottom:1.2rem;font-size:1rem;color:#495057}.tutorial-content ul{margin-bottom:2rem;padding-left:1.75rem}.tutorial-content li{margin-bottom:.85rem;font-size:1rem;color:#495057;position:relative}.tutorial-content li:before{content:"•";color:#4facfe;font-weight:700;position:absolute;left:-1.2rem}.tutorial-content strong{color:#2c3e50;font-weight:700}.tutorial-image-container{display:flex;justify-content:center;margin:2rem 0;padding:1.5rem;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:20px;border:1px solid #f0f0f0;box-shadow:0 4px 16px #00000014;transition:all .3s ease}.tutorial-image-container:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000001f}.tutorial-svg{max-width:100%;height:auto;box-shadow:0 6px 24px #0000001f;border-radius:12px;transition:all .4s cubic-bezier(.4,0,.2,1);background:#fff;padding:1rem}.tutorial-svg:hover{transform:scale(1.03);box-shadow:0 8px 32px #00000029}.tutorial-footer{padding:1.5rem;border-top:1px solid #f0f0f0;background:#f8f9fa;border-radius:0 0 24px 24px;display:flex;flex-direction:column;gap:1.5rem;position:relative}.tutorial-footer:before{content:"";position:absolute;top:0;left:1.5rem;right:1.5rem;height:1px;background:linear-gradient(90deg,transparent 0%,#e0e0e0 50%,transparent 100%)}.tutorial-progress{display:flex;justify-content:center;gap:1rem;padding:.5rem 0}.progress-dot{width:14px;height:14px;border-radius:50%;background-color:#e0e0e0;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative}.progress-dot:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;background-color:#fff;opacity:0;transition:opacity .3s ease}.progress-dot.active{background-color:#4facfe;transform:scale(1.4);box-shadow:0 0 0 6px #4facfe33}.progress-dot.active:before{opacity:1}.tutorial-buttons{display:flex;justify-content:space-between;gap:1.2rem}.tutorial-btn{padding:1rem 2rem;border:2px solid #4facfe;background:#fff;color:#4facfe;border-radius:16px;cursor:pointer;font-size:1.1rem;font-weight:600;transition:all .4s cubic-bezier(.4,0,.2,1);flex:1;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #00000014;position:relative;overflow:hidden}.tutorial-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(79,172,254,.1) 50%,transparent 100%);transition:left .6s ease}.tutorial-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 6px 24px #4facfe40;border-color:#3a86ff}.tutorial-btn:hover:not(:disabled):before{left:100%}.tutorial-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.tutorial-btn.primary{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border-color:#4facfe}.tutorial-btn.primary:hover{background:linear-gradient(135deg,#3a86ff,#0ea5e9);border-color:#3a86ff;box-shadow:0 6px 24px #4facfe59}.tutorial-btn:active{transform:translateY(0);box-shadow:0 2px 8px #0000001a}.customer-service{background:#fff;border-radius:24px;padding:2rem;margin:1.5rem;box-shadow:0 6px 24px #0000001a;transition:all .4s cubic-bezier(.4,0,.2,1);text-align:center;position:relative;overflow:hidden;flex-shrink:0}.customer-service:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#4facfe,#00f2fe)}.customer-service:hover{transform:translateY(-4px);box-shadow:0 8px 32px #0000001f}.customer-service h3{font-size:1.3rem;font-weight:700;color:#2c3e50;margin-bottom:1.2rem;border-bottom:none;padding-bottom:0}.customer-service p{font-size:1rem;line-height:1.6;color:#495057;margin-bottom:1.8rem}.wechat-contact{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.2rem;background:linear-gradient(135deg,#4facfe1a,#00f2fe1a);border-radius:16px;border:1px solid rgba(79,172,254,.2);transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px #00000014}.wechat-contact:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000001f;background:linear-gradient(135deg,#4facfe26,#00f2fe26)}.wechat-label{font-size:1rem;font-weight:600;color:#2c3e50}.wechat-number{font-size:1.1rem;font-weight:700;color:#4facfe;background:#fff;padding:.75rem 1.5rem;border-radius:12px;box-shadow:0 4px 12px #0000001a;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.wechat-number:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(79,172,254,.1) 50%,transparent 100%);transition:left .6s ease}.wechat-number:hover{transform:scale(1.05);box-shadow:0 6px 20px #4facfe40}.wechat-number:hover:before{left:100%}@media(max-width:768px){.tutorial-header{padding:1.2rem 1rem;border-radius:0 0 24px 24px}.tutorial-header h2{font-size:1.25rem}.back-btn{padding:.6rem .8rem;font-size:1.3rem}.tutorial-content-wrapper{padding:0 .75rem}.tutorial-modal{width:95%;margin:0;max-height:55vh;border-radius:20px}.tutorial-modal .tutorial-header{padding:1.2rem}.tutorial-modal .tutorial-header h2{font-size:1.15rem}.tutorial-content{padding:1.5rem;line-height:1.6}.tutorial-content h3{font-size:1.1rem;margin-top:1.5rem;margin-bottom:1rem}.tutorial-content p,.tutorial-content li{font-size:.95rem}.tutorial-footer{padding:1.2rem;gap:1.2rem}.tutorial-buttons{flex-direction:column;gap:1rem}.tutorial-btn{width:100%;padding:1rem 1.5rem;font-size:1rem}.tutorial-image-container{padding:1.2rem;margin:1.5rem 0;border-radius:16px}.tutorial-svg{padding:.75rem;border-radius:8px}.customer-service{margin:1rem;padding:1.5rem;border-radius:20px;flex-shrink:0}.customer-service h3{font-size:1.15rem}.customer-service p{font-size:.9rem}.wechat-contact{flex-direction:column;gap:.75rem;text-align:center;padding:1rem;border-radius:12px}.wechat-number{font-size:1rem;padding:.6rem 1.2rem}.tutorial-progress{gap:.75rem}.progress-dot{width:12px;height:12px}.progress-dot.active{transform:scale(1.3)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.tutorial-modal .tutorial-header{animation:slideInLeft .5s cubic-bezier(.4,0,.2,1) forwards}.tutorial-modal .tutorial-content{animation:fadeInUp .7s cubic-bezier(.4,0,.2,1) forwards;animation-delay:.2s}.tutorial-footer{animation:fadeInUp .8s cubic-bezier(.4,0,.2,1) forwards;animation-delay:.4s}.customer-service{animation:fadeInUp .9s cubic-bezier(.4,0,.2,1) forwards;animation-delay:.6s}.progress-dot.active{animation:pulse 2s infinite}@media(hover:none)and (pointer:coarse){.back-btn:active{background:linear-gradient(135deg,#e9ecef,#dee2e6);transform:translate(-4px) scale(.95)}.tutorial-btn:active,.tutorial-btn.primary:active{transform:scale(.96)}.wechat-contact:active{transform:scale(.98)}.wechat-number:active{transform:scale(1.02)}.tutorial-close-btn:active{transform:scale(.95)}}.tutorial-content{transition:all .4s ease}.tutorial-content[data-step-changing]{opacity:0;transform:translateY(20px)}@media(prefers-color-scheme:dark){.tutorial-container{background:linear-gradient(135deg,#1a1a2e,#16213e)}.tutorial-header{background:#1a1a2e;box-shadow:0 4px 20px #0000004d}.tutorial-header h2{color:#e9ecef}.back-btn{background:linear-gradient(135deg,#2c3e50,#34495e);color:#e9ecef}.tutorial-modal{background:#1a1a2e;box-shadow:0 12px 48px #0006}.tutorial-modal .tutorial-header{background:#2c3e50}.tutorial-modal .tutorial-header h2{color:#e9ecef}.tutorial-content{color:#e9ecef;background:#1a1a2e}.tutorial-content h3{color:#e9ecef;border-bottom-color:#4facfe}.tutorial-content p,.tutorial-content li{color:#e9ecef}.tutorial-footer{background:#2c3e50}.customer-service{background:#1a1a2e;box-shadow:0 6px 24px #0000004d}.customer-service h3,.customer-service p{color:#e9ecef}}.teaching-page{width:100%;min-height:100vh;background-color:#f5f5f5;padding:16px;box-sizing:border-box}.teaching-container{max-width:800px;margin:0 auto}.teaching-title{font-size:24px;font-weight:600;color:#333;margin:0 0 24px}.back-button{display:flex;align-items:center;gap:6px;background:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:16px;color:#333;cursor:pointer;margin-bottom:16px;box-shadow:0 2px 4px #0000001a}.courses-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.course-card{background:#fff;border-radius:12px;padding:20px;text-align:center;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 8px #0000001a}.course-card:active{transform:scale(.98)}.course-icon{margin-bottom:12px}.course-title{font-size:16px;font-weight:600;color:#333;margin:0 0 8px}.course-info{font-size:14px;color:#666;margin:0}.chapters-list{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #0000001a}.chapter-item{display:flex;align-items:center;padding:16px;border-bottom:1px solid #eee;cursor:pointer;transition:background-color .2s}.chapter-item:last-child{border-bottom:none}.chapter-item:active{background-color:#f5f5f5}.chapter-number{width:32px;height:32px;border-radius:50%;background-color:#5a8f3e;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;margin-right:12px}.chapter-info{flex:1}.chapter-title{font-size:16px;font-weight:500;color:#333;margin:0}.chapter-arrow{color:#999;font-size:18px}.content-header{margin-bottom:16px}.content-course-name{font-size:14px;color:#666;margin:4px 0 0}.content-body{background:#fff;border-radius:12px;padding:16px;box-shadow:0 2px 8px #0000001a}.content-diagram{display:flex;justify-content:center;margin-bottom:16px}.content-diagram svg{max-width:200px;height:auto}.content-text{font-size:15px;line-height:1.8;color:#333}.content-text p{margin:0 0 12px}.content-text p:last-child{margin-bottom:0}.content-footer{margin-top:20px;text-align:center}.practice-button{background:linear-gradient(135deg,#5a8f3e,#4a7a32);color:#fff;border:none;padding:14px 32px;border-radius:24px;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #5a8f3e4d;transition:transform .2s,box-shadow .2s}.practice-button:active{transform:scale(.98)}@media(max-width:480px){.teaching-title{font-size:20px;margin-bottom:16px}.courses-grid{grid-template-columns:1fr}.course-card{padding:16px}.course-title{font-size:15px}.content-body{padding:12px}.content-text{font-size:14px}}.match-modal-overlay{position:fixed;inset:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}.match-modal-content{background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:20px;padding:30px;width:90%;max-width:400px;position:relative;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.match-modal-close{position:absolute;top:15px;right:15px;width:32px;height:32px;border:none;background:#f0f0f0;border-radius:50%;font-size:20px;color:#666;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.match-modal-close:hover{background:#e0e0e0;color:#333}.match-modal-header{text-align:center;margin-bottom:25px}.match-modal-header h2{margin:0 0 10px;font-size:24px;color:#333;font-weight:600}.match-modal-header p{margin:0;color:#666;font-size:14px}.match-modal-header.matching{margin-bottom:30px}.matching-spinner{font-size:48px;margin-bottom:15px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.board-size-options{display:flex;flex-direction:column;gap:12px;margin-bottom:25px}.board-size-option{display:flex;align-items:center;padding:16px 20px;background:#fff;border:2px solid #e0e0e0;border-radius:12px;cursor:pointer;transition:all .2s ease;position:relative}.board-size-option:hover{border-color:#007bff;transform:translate(5px)}.board-size-option.selected{border-color:#007bff;background:linear-gradient(135deg,#f0f7ff,#e3f2fd)}.board-size-label{font-size:20px;font-weight:700;color:#333;min-width:70px}.board-size-desc{font-size:14px;color:#666;flex:1;margin-left:15px}.selected-indicator{width:28px;height:28px;background:#007bff;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}.match-modal-actions{display:flex;gap:12px}.match-modal-actions button{flex:1;padding:14px 20px;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.cancel-btn{background:#f0f0f0;color:#666}.cancel-btn:hover{background:#e0e0e0}.start-match-btn{background:linear-gradient(135deg,#007bff,#0056b3);color:#fff;box-shadow:0 4px 15px #007bff4d}.start-match-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #007bff66}.cancel-match-btn{background:linear-gradient(135deg,#dc3545,#c82333);color:#fff;box-shadow:0 4px 15px #dc35454d}.cancel-match-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #dc354566}.matching-animation{position:relative;width:100px;height:100px;margin:0 auto 30px;display:flex;align-items:center;justify-content:center}.pulse-ring{position:absolute;width:100%;height:100%;border-radius:50%;background:#007bff1a;animation:pulse 2s ease-out infinite}.pulse-ring.delay-1{animation-delay:.5s}.pulse-ring.delay-2{animation-delay:1s}@keyframes pulse{0%{transform:scale(.5);opacity:1}to{transform:scale(1.5);opacity:0}}@media(max-width:480px){.match-modal-content{padding:20px;margin:20px}.match-modal-header h2{font-size:20px}.board-size-option{padding:12px 16px}.board-size-label{font-size:18px;min-width:60px}.match-modal-actions button{padding:12px 16px;font-size:15px}}.room-list-page{min-height:100vh;padding:24px;color:#000}.room-list-page.loading{display:flex;align-items:center;justify-content:center}.room-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.room-list-header h1{margin:0;font-size:24px;color:#000}.create-room-btn{padding:10px 20px;background-color:#4caf50;color:#000;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}.filter-section{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.filter-tabs{display:flex;gap:8px;flex-wrap:wrap}.filter-tab{padding:8px 16px;background-color:#fff;border:1px solid #ddd;border-radius:20px;font-size:14px;color:#000;cursor:pointer;transition:all .2s}.filter-tab:hover{border-color:#4caf50}.filter-tab.active{background-color:#4caf50;color:#000;border-color:#4caf50}.search-input{padding:12px 16px;border:1px solid #ddd;border-radius:8px;font-size:14px;outline:none;max-width:400px}.search-input:focus{border-color:#4caf50}.rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.no-rooms{grid-column:1 / -1;text-align:center;padding:60px 0;color:#000;font-size:16px}.room-card{background-color:#fff;border-radius:12px;padding:16px;box-shadow:0 2px 4px #5d40371a;cursor:pointer;transition:all .2s;border:1px solid transparent}.room-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #5d403726;border-color:#4caf50}.room-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.room-type-badge{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600}.type-icon{font-size:14px}.room-status-badge{padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}.room-name{margin:0 0 12px;font-size:16px;font-weight:600;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-teacher{display:flex;align-items:center;gap:8px;margin-bottom:12px}.teacher-avatar{width:28px;height:28px;border-radius:50%;background-color:#ff9800;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}.teacher-name{font-size:13px;color:#000}.room-footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid #eee;font-size:13px;color:#000}.student-count{color:#5d4037}.board-size{color:#999}@media(max-width:768px){.room-list-page{padding:16px}.rooms-grid{grid-template-columns:1fr}.filter-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px}.search-input{max-width:100%}}.teaching-room{min-height:100vh;display:flex;flex-direction:column;color:#000}.teaching-room.loading,.teaching-room.error{display:flex;align-items:center;justify-content:center;min-height:100vh}.loading-spinner{font-size:18px;color:#4caf50}.error-message{color:#f44336;font-size:16px;margin-bottom:16px}.room-header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background-color:#fff;box-shadow:0 2px 4px #5d40371a;position:sticky;top:0;z-index:100}.header-left{display:flex;align-items:center;gap:16px}.back-btn{background:none;border:none;font-size:16px;color:#000;cursor:pointer;padding:8px}.room-info h2{margin:0;font-size:18px;color:#000}.connection-status{font-size:12px;padding:2px 8px;border-radius:4px}.connection-status.connected{background-color:#4caf5020;color:#4caf50}.connection-status.disconnected{background-color:#f4433620;color:#f44336}.header-right{display:flex;align-items:center;gap:12px}.control-btn{padding:8px 16px;border:none;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s}.control-btn.request{background-color:#4caf50;color:#000}.control-btn.release{background-color:#f44336;color:#000}.user-avatar{width:36px;height:36px;border-radius:50%;background-color:#4caf50;color:#000;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}.room-main{flex:1;display:flex;padding:20px;gap:20px;overflow:hidden}.board-section{flex:1;display:flex;flex-direction:column;min-width:0}.board-info{background-color:#fff;border-radius:12px;padding:12px 16px;margin-bottom:16px;box-shadow:0 2px 4px #5d40371a}.players-info{display:flex;gap:24px;font-size:14px;color:#000}.board-container{flex:1;display:flex;justify-content:center;align-items:center;background-color:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 4px #5d40371a}.chat-section{width:360px;min-width:300px;display:flex;flex-direction:column;background-color:#fff;border-radius:12px;box-shadow:0 2px 4px #5d40371a;overflow:hidden}.raised-hands{padding:12px 16px;background-color:#fff8e1;border-bottom:1px solid #eee}.raised-hands-title{font-size:12px;color:#000;font-weight:600;margin-bottom:8px}.raised-hands-list{display:flex;flex-wrap:wrap;gap:8px}.raised-hand-item{display:flex;align-items:center;gap:8px;padding:6px 12px;background-color:#fff;border-radius:4px;border:1px solid #4CAF50;font-size:13px}.grant-btn{padding:2px 8px;font-size:11px;background-color:#4caf50;color:#000;border:none;border-radius:4px;cursor:pointer}.messages-list{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.no-messages{text-align:center;color:#000;font-size:14px;padding:40px 0}.message-item{display:flex;flex-direction:column;gap:2px}.message-item.self{align-items:flex-end}.message-header{display:flex;gap:8px;font-size:11px;color:#000}.message-item.self .message-header{flex-direction:row-reverse}.message-content{padding:8px 12px;border-radius:12px;background-color:#f5f5f5;color:#000;font-size:14px;max-width:80%;word-break:break-word}.message-item.self .message-content{background-color:#4caf50;color:#fff}.chat-input-area{display:flex;gap:8px;padding:12px 16px;border-top:1px solid #eee}.chat-input{flex:1;padding:10px 14px;border:1px solid #ddd;border-radius:8px;font-size:14px;outline:none}.chat-input:focus{border-color:#4caf50}.send-btn{padding:10px 20px;background-color:#4caf50;color:#000;border:none;border-radius:8px;font-size:14px;cursor:pointer}.send-btn:disabled{background-color:#ccc;cursor:not-allowed}.raise-hand-btn{margin:0 16px 12px;padding:12px;background-color:#ff9800;color:#000;border:none;border-radius:8px;font-size:14px;cursor:pointer}@media(max-width:768px){.room-main{flex-direction:column}.chat-section{width:100%;min-width:auto;height:300px}}.create-room-page{min-height:100vh;display:flex;flex-direction:column;color:#000}.create-room-header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background-color:#fff;box-shadow:0 2px 4px #5d40371a}.create-room-header h1{margin:0;font-size:20px;color:#000}.back-btn{background:none;border:none;font-size:16px;color:#000;cursor:pointer;padding:8px 12px;border-radius:8px;transition:background-color .2s}.back-btn:hover{background-color:#4caf501a}.placeholder{width:60px}.create-room-main{flex:1;padding:24px;max-width:600px;margin:0 auto;width:100%}.create-room-form{background-color:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 4px #5d40371a}.error-message{padding:12px 16px;background-color:#ffebee;color:#c62828;border-radius:8px;margin-bottom:20px;font-size:14px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:600;color:#000}.form-input{width:100%;padding:12px 16px;border:1px solid #ddd;border-radius:8px;font-size:14px;outline:none;box-sizing:border-box}.form-input:focus{border-color:#4caf50}.type-buttons{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}.type-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background-color:#f5f5f5;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s}.type-btn:hover{background-color:#e8f5e9}.type-btn.active{background-color:#e8f5e9;border-color:#4caf50}.type-btn:disabled{opacity:.5;cursor:not-allowed}.type-icon{font-size:24px}.type-label{font-size:12px;color:#000}.size-buttons{display:flex;gap:8px}.size-btn{flex:1;padding:12px;background-color:#f5f5f5;border:2px solid transparent;border-radius:8px;font-size:14px;color:#000;cursor:pointer;transition:all .2s}.size-btn:hover{background-color:#e8f5e9}.size-btn.active{background-color:#e8f5e9;border-color:#4caf50}.size-btn:disabled{opacity:.5;cursor:not-allowed}.rules-buttons{display:flex;gap:8px}.rule-btn{flex:1;padding:12px;background-color:#f5f5f5;border:2px solid transparent;border-radius:8px;font-size:14px;color:#000;cursor:pointer;transition:all .2s}.rule-btn:hover{background-color:#e8f5e9}.rule-btn.active{background-color:#e8f5e9;border-color:#4caf50}.rule-btn:disabled{opacity:.5;cursor:not-allowed}.submit-btn{width:100%;padding:14px;background-color:#4caf50;color:#000;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .2s;margin-top:12px}.submit-btn:hover{background-color:#45a049}.submit-btn:disabled{background-color:#ccc;cursor:not-allowed}@media(max-width:768px){.create-room-main,.create-room-form{padding:16px}.type-buttons{grid-template-columns:repeat(2,1fr)}}.settings-page-container{display:flex;flex-direction:column;min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.settings-page-header{display:flex;align-items:center;padding:1.5rem 1.2rem;background:#fff;box-shadow:0 4px 20px #00000014;border-radius:0 0 30px 30px;margin-bottom:1.5rem;position:relative;overflow:hidden}.settings-page-header:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#4facfe,#00f2fe)}.settings-page-header h2{margin:0;color:#2c3e50;font-size:1.4rem;font-weight:700;flex:1;text-align:center;letter-spacing:.5px}.settings-back-btn{background:linear-gradient(135deg,#f0f4f8,#e9ecef);border:none;font-size:1.5rem;color:#495057;cursor:pointer;padding:.75rem 1rem;border-radius:16px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000014;position:relative;z-index:1}.settings-back-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#e9ecef,#dee2e6);border-radius:16px;opacity:0;transition:opacity .3s ease;z-index:-1}.settings-back-btn:hover{transform:translate(-4px) scale(1.05);box-shadow:0 4px 12px #0000001f}.settings-back-btn:hover:before{opacity:1}.settings-back-btn:active{transform:translate(-2px) scale(.98);box-shadow:0 1px 4px #0000001a}.settings-page-content{flex:1;padding:0 1.2rem;display:flex;justify-content:center;align-items:flex-start}.settings-page-modal{background:#fff;border-radius:24px;width:100%;max-width:850px;max-height:calc(100vh - 200px);overflow:hidden;box-shadow:0 12px 48px #00000026;display:flex;flex-direction:column;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;animation:fadeInUp .6s cubic-bezier(.4,0,.2,1) forwards}.settings-page-modal:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#4facfe,#00f2fe)}.settings-page-section{padding:1.5rem;overflow-y:auto}.settings-page-section h3{margin:0 0 1rem;color:#2c3e50;font-size:1.1rem;font-weight:600}.setting-item{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid #f0f0f0;transition:all .3s ease;cursor:pointer}.setting-item:last-child{border-bottom:none}.setting-item:hover{background-color:#fafbfc;padding-left:.5rem;border-radius:8px}.setting-item.expandable{cursor:pointer}.setting-info{display:flex;align-items:center;gap:1rem}.setting-icon{font-size:1.5rem}.setting-details{display:flex;flex-direction:column;gap:.25rem}.setting-name{font-size:1rem;font-weight:500;color:#333}.setting-description{font-size:.85rem;color:#666}.setting-arrow-container{display:flex;align-items:center;gap:.5rem}.color-preview-small{width:20px;height:20px;border-radius:50%;border:2px solid #ddd;box-shadow:0 1px 3px #0003}.expand-arrow{font-size:.8rem;color:#666;transition:transform .3s ease;margin-left:.5rem}.expand-arrow.expanded{transform:rotate(180deg)}.color-settings-expanded{padding:1rem;background-color:#f8f9fa;border-radius:12px;margin-top:.5rem;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.color-setting-subitem{margin-bottom:1rem}.color-setting-subitem:last-child{margin-bottom:0}.color-setting-label{font-size:.9rem;font-weight:500;color:#666;margin-bottom:.5rem}.color-picker-row{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.color-input-small{width:40px;height:32px;border:none;border-radius:6px;cursor:pointer;padding:0;background:none}.color-input-small::-webkit-color-swatch-wrapper{padding:0}.color-input-small::-webkit-color-swatch{border:2px solid #ddd;border-radius:6px}.color-value-small{font-size:.8rem;color:#333;font-family:monospace;background-color:#fff;padding:.2rem .4rem;border-radius:4px;border:1px solid #ddd}.color-presets-small{display:flex;flex-wrap:wrap;gap:.4rem}.color-preset-btn-small{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px #0003;cursor:pointer;transition:all .2s ease;padding:0}.color-preset-btn-small:hover{transform:scale(1.1);box-shadow:0 2px 4px #0000004d}.color-preset-btn-small:active{transform:scale(.95)}.preview-section-small{display:flex;justify-content:center;margin:1rem 0;padding:.5rem;background-color:#fff;border-radius:8px}.color-actions-small{display:flex;gap:.75rem;margin-top:1rem}.reset-btn-small,.save-btn-small{flex:1;padding:.6rem .8rem;border:none;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease}.reset-btn-small{background-color:#e0e0e0;color:#666}.reset-btn-small:hover{background-color:#d0d0d0}.reset-btn-small:disabled{opacity:.6;cursor:not-allowed}.save-btn-small{background-color:#3498db;color:#fff}.save-btn-small:hover{background-color:#2980b9}.save-btn-small:disabled{opacity:.6;cursor:not-allowed}.save-message-small{margin-top:.75rem;padding:.5rem;border-radius:6px;text-align:center;font-size:.85rem;animation:fadeIn .3s ease}.save-message-small.success{background-color:#d4edda;color:#155724}.save-message-small.error{background-color:#f8d7da;color:#721c24}.toggle-switch{position:relative;display:inline-block;width:56px;height:30px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:#e0e0e0;transition:all .3s ease;border-radius:30px;box-shadow:inset 0 2px 4px #0000001a}.toggle-slider:before{position:absolute;content:"";height:24px;width:24px;left:3px;bottom:3px;background-color:#fff;transition:all .3s ease;border-radius:50%;box-shadow:0 2px 4px #0003}input:checked+.toggle-slider{background-color:#3498db;box-shadow:inset 0 2px 4px #0003}input:checked+.toggle-slider:before{transform:translate(26px);box-shadow:0 2px 6px #0000004d}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.settings-page-header{padding:1.2rem 1rem;border-radius:0 0 24px 24px}.settings-page-header h2{font-size:1.2rem}.settings-back-btn{font-size:1.3rem;padding:.6rem .8rem;border-radius:14px}.settings-page-content{padding:0 1rem}.settings-page-modal{border-radius:20px;max-height:calc(100vh - 180px)}.settings-page-section{padding:1.2rem}.color-presets-small{gap:.3rem}.color-preset-btn-small{width:20px;height:20px}}@media(hover:none)and (pointer:coarse){.settings-back-btn:active{transform:translate(-2px) scale(.95)}.color-preset-btn-small:active{transform:scale(.9)}.setting-item:active{background-color:#f0f0f0}}.privacy-modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:10000;padding:16px}.privacy-modal-container{background-color:#fff;border-radius:12px;width:100%;max-width:500px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 4px 20px #0000004d}.privacy-modal-header{padding:20px 24px;border-bottom:1px solid #e0e0e0;text-align:center}.privacy-modal-header h2{margin:0;font-size:20px;font-weight:600;color:#333}.privacy-modal-content{flex:1;overflow:hidden;padding:0}.privacy-content-scrollable{padding:20px 24px;overflow-y:auto;max-height:50vh;line-height:1.6}.privacy-content-scrollable h3{font-size:16px;font-weight:600;color:#333;margin:0 0 12px}.privacy-content-scrollable h4{font-size:14px;font-weight:600;color:#444;margin:16px 0 8px}.privacy-content-scrollable p{font-size:14px;color:#666;margin:8px 0}.privacy-content-scrollable ul{margin:8px 0;padding-left:20px}.privacy-content-scrollable li{font-size:14px;color:#666;margin:4px 0}.privacy-content-scrollable strong{color:#444;font-weight:600}.privacy-full-policy-link{margin:16px 0;padding:12px;background-color:#e3f2fd;border-radius:8px;text-align:center;font-size:14px;color:#333}.privacy-full-policy-link a{color:#1976d2;text-decoration:underline;font-weight:500}.privacy-full-policy-link a:hover{color:#1565c0}.privacy-agreement-text{margin-top:20px!important;padding:12px;background-color:#f5f5f5;border-radius:8px;text-align:center;font-weight:500;color:#333!important}.privacy-modal-footer{padding:16px 24px;border-top:1px solid #e0e0e0;display:flex;gap:12px;justify-content:flex-end}.privacy-btn{padding:12px 24px;border:none;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;transition:all .2s ease}.privacy-btn-agree{background-color:#4caf50;color:#fff;flex:1}.privacy-btn-agree:hover{background-color:#45a049}.privacy-btn-agree:active{transform:scale(.98)}.privacy-btn-disagree{background-color:#f5f5f5;color:#666}.privacy-btn-disagree:hover{background-color:#e0e0e0}.privacy-btn-secondary{background-color:#f5f5f5;color:#666;flex:1}.privacy-btn-secondary:hover{background-color:#e0e0e0}.privacy-btn-exit{background-color:#ff5252;color:#fff;flex:1}.privacy-btn-exit:hover{background-color:#ff1744}.privacy-confirm-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:10001}.privacy-confirm-modal{background-color:#fff;border-radius:12px;padding:24px;width:90%;max-width:320px;text-align:center;box-shadow:0 4px 20px #0000004d}.privacy-confirm-modal h3{margin:0 0 12px;font-size:18px;font-weight:600;color:#333}.privacy-confirm-modal p{margin:0 0 20px;font-size:14px;color:#666;line-height:1.5}.privacy-confirm-buttons{display:flex;gap:12px}.dark-mode .privacy-modal-container,.dark-mode .privacy-confirm-modal{background-color:#2d2d2d}.dark-mode .privacy-modal-header{border-bottom-color:#444}.dark-mode .privacy-modal-header h2,.dark-mode .privacy-content-scrollable h3,.dark-mode .privacy-content-scrollable h4{color:#fff}.dark-mode .privacy-content-scrollable p,.dark-mode .privacy-content-scrollable li{color:#ccc}.dark-mode .privacy-content-scrollable strong{color:#fff}.dark-mode .privacy-full-policy-link{background-color:#1e3a5f;color:#fff}.dark-mode .privacy-full-policy-link a{color:#64b5f6}.dark-mode .privacy-full-policy-link a:hover{color:#90caf9}.dark-mode .privacy-agreement-text{background-color:#3d3d3d;color:#fff!important}.dark-mode .privacy-modal-footer{border-top-color:#444}.dark-mode .privacy-btn-disagree,.dark-mode .privacy-btn-secondary{background-color:#444;color:#ccc}.dark-mode .privacy-btn-disagree:hover,.dark-mode .privacy-btn-secondary:hover{background-color:#555}.dark-mode .privacy-confirm-modal h3{color:#fff}.dark-mode .privacy-confirm-modal p{color:#ccc}@media(max-width:480px){.privacy-modal-container{max-height:90vh}.privacy-content-scrollable{max-height:55vh;padding:16px 20px}.privacy-modal-header{padding:16px 20px}.privacy-modal-footer{padding:12px 20px}.privacy-btn{padding:14px 20px;font-size:16px}}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;font-family:var(--font-family-base)}.modal-content{background-color:#fff;padding:24px;border-radius:8px;box-shadow:0 4px 12px #00000026;max-width:400px;width:100%;text-align:center}.modal-content h3{margin-top:0;margin-bottom:16px;color:#333;font-size:20px}.modal-content p{margin-bottom:24px;color:#666;font-size:16px;line-height:1.5}.modal-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.modal-button{padding:10px 20px;border:none;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:100px}.modal-button:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.keep-button{background-color:#52c41a;color:#fff}.keep-button:hover{background-color:#389e0d}.reset-button{background-color:#faad14;color:#fff}.reset-button:hover{background-color:#d48806}.cancel-button{background-color:#f5f5f5;color:#333;border:1px solid #d9d9d9}.cancel-button:hover{background-color:#e8e8e8}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:#fff;border-radius:8px;box-shadow:0 4px 20px #0003;padding:2rem;max-width:400px;width:100%;text-align:center}.color-select-modal{display:flex;flex-direction:column;gap:1.5rem}.color-select-modal h3{font-size:1.5rem;color:#2c3e50;margin:0;font-weight:600}.color-select-modal p{color:#6c757d;font-size:1rem;margin:0}.color-options{display:flex;gap:1rem;justify-content:center;margin:1rem 0}.color-option{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem;border:2px solid #e9ecef;border-radius:8px;background-color:#f8f9fa;cursor:pointer;transition:all .2s ease-in-out;flex:1;max-width:150px}.color-option:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026;border-color:#007bff}.color-option.black:hover{border-color:#2c3e50;background-color:#f0f0f0}.color-option.white:hover{border-color:#6c757d;background-color:#fafafa}.color-option:active{transform:translateY(0);box-shadow:0 2px 8px #0000001a}.color-demo{width:50px;height:50px;border-radius:50%;margin-bottom:.5rem;display:flex;justify-content:center;align-items:center;font-size:1.5rem}.black-demo{background-color:#2c3e50;color:#fff}.white-demo{background-color:#fff;border:2px solid #2c3e50;color:#2c3e50}.color-option span{font-size:1.1rem;font-weight:600;color:#2c3e50}.color-option small{font-size:.8rem;color:#6c757d;font-weight:400}.modal-buttons{display:flex;gap:1rem;justify-content:center;margin-top:1rem}.modal-button{padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease-in-out;min-width:100px}.cancel-button{background-color:#6c757d;color:#fff}.cancel-button:hover{background-color:#5a6268;transform:translateY(-1px);box-shadow:0 4px 8px #6c757d33}.cancel-button:active{transform:translateY(0);box-shadow:0 2px 4px #6c757d33}@media(max-width:576px){.modal-content{margin:1rem;padding:1.5rem}.color-options{flex-direction:column;align-items:center}.color-option{max-width:100%;width:200px}.modal-buttons{flex-direction:column}.modal-button{width:100%}}.notification{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:20px 24px;border-radius:10px;box-shadow:0 8px 24px #00000040;display:flex;align-items:center;justify-content:space-between;min-width:250px;max-width:350px;z-index:99999;animation:fadeIn .3s ease-out;transition:all .3s ease;border:2px solid #333}.notification-content{flex:1;font-size:16px;font-weight:600;margin-right:12px;text-align:center;font-family:"Noto Serif SC",serif}.notification-close{background:transparent;border:none;font-size:20px;cursor:pointer;opacity:.7;transition:opacity .2s ease;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%}.notification-close:hover{opacity:1;background:#0000001a}.notification-error{background-color:#fef2f2;border-left:4px solid #ef4444;color:#dc2626}.notification-warning{background-color:#fffbeb;border-left:4px solid #f59e0b;color:#d97706}.notification-info{background-color:#eff6ff;border-left:4px solid #3b82f6;color:#2563eb}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes fadeOut{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.9)}}.notification.hide{animation:fadeOut .3s ease-in forwards}.disconnect-modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:100000;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.disconnect-modal-container{background:linear-gradient(135deg,#2c3e50,#34495e);border-radius:16px;padding:32px;max-width:400px;width:90%;box-shadow:0 20px 60px #00000080;animation:slideIn .3s ease;border:2px solid #e74c3c}@keyframes slideIn{0%{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}}.disconnect-modal-header{text-align:center;margin-bottom:24px}.disconnect-icon{font-size:48px;margin-bottom:12px;animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.disconnect-modal-header h2{color:#e74c3c;margin:0;font-size:24px;font-weight:700}.disconnect-modal-content{text-align:center;margin-bottom:28px}.disconnect-message{color:#ecf0f1;font-size:18px;margin:0 0 12px;line-height:1.5}.disconnect-hint{color:#95a5a6;font-size:14px;margin:0}.disconnect-countdown{margin:24px 0;display:flex;flex-direction:column;align-items:center}.countdown-ring{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#f39c12,#e74c3c);display:flex;justify-content:center;align-items:center;box-shadow:0 4px 20px #e74c3c66;animation:countdownPulse 1s ease-in-out infinite}@keyframes countdownPulse{0%,to{transform:scale(1);box-shadow:0 4px 20px #e74c3c66}50%{transform:scale(1.05);box-shadow:0 6px 30px #e74c3c99}}.countdown-number{font-size:36px;font-weight:700;color:#fff}.countdown-hint{color:#e74c3c;font-size:14px;margin-top:12px;font-weight:500}.reconnect-token-hint{color:#3498db;font-size:12px;margin-top:8px;font-style:italic}.disconnect-modal-footer{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.disconnect-btn{padding:14px 32px;border:none;border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;min-width:140px}.disconnect-btn-reconnect{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;box-shadow:0 4px 15px #e74c3c66}.disconnect-btn-reconnect:hover{background:linear-gradient(135deg,#c0392b,#a93226);transform:translateY(-2px);box-shadow:0 6px 20px #e74c3c80}.disconnect-btn-reconnect:active{transform:translateY(0);box-shadow:0 2px 10px #e74c3c66}.disconnect-btn-reconnect:disabled{background:linear-gradient(135deg,#95a5a6,#7f8c8d);cursor:not-allowed;transform:none;box-shadow:none}.disconnect-btn-disconnect{background:transparent;color:#95a5a6;border:2px solid #95a5a6}.disconnect-btn-disconnect:hover{background:#95a5a61a;color:#ecf0f1;border-color:#ecf0f1}@media(max-width:480px){.disconnect-modal-container{padding:24px;margin:16px}.disconnect-modal-header h2{font-size:20px}.disconnect-message{font-size:16px}.disconnect-btn{padding:12px 24px;font-size:15px;width:100%}}.permission-modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:10000;padding:16px}.permission-modal-container{background-color:#fff;border-radius:12px;width:100%;max-width:520px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 4px 20px #0000004d}.permission-modal-header{padding:24px 24px 16px;text-align:center;border-bottom:1px solid #e0e0e0}.permission-modal-header h2{margin:0 0 8px;font-size:20px;font-weight:600;color:#333}.permission-subtitle{margin:0;font-size:14px;color:#888}.permission-modal-content{flex:1;overflow-y:auto;padding:20px 24px}.permission-table-container{margin-bottom:20px;overflow-x:auto}.permission-table{width:100%;border-collapse:collapse;font-size:14px}.permission-table th,.permission-table td{padding:12px 16px;text-align:left;border:1px solid #e0e0e0}.permission-table th{background-color:#f5f5f5;font-weight:600;color:#333}.permission-table td{color:#666}.permission-table tbody tr:hover{background-color:#fafafa}.permission-notice{background-color:#f8f9fa;border-radius:8px;padding:16px}.permission-notice h4{margin:0 0 12px;font-size:15px;font-weight:600;color:#333}.permission-notice ul{margin:0 0 12px;padding-left:20px}.permission-notice li{font-size:13px;color:#666;margin:8px 0;line-height:1.5}.permission-notice strong{color:#444;font-weight:600}.permission-tip{margin:12px 0 0;font-size:13px;color:#888;text-align:center;font-style:italic}.permission-modal-footer{padding:16px 24px;border-top:1px solid #e0e0e0;display:flex;justify-content:center}.permission-btn{padding:14px 48px;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:160px}.permission-btn-confirm{background-color:#4caf50;color:#fff}.permission-btn-confirm:hover{background-color:#45a049}.permission-btn-confirm:active{transform:scale(.98)}.dark-mode .permission-modal-container{background-color:#2d2d2d}.dark-mode .permission-modal-header{border-bottom-color:#444}.dark-mode .permission-modal-header h2{color:#fff}.dark-mode .permission-subtitle{color:#aaa}.dark-mode .permission-table th{background-color:#3d3d3d;color:#fff;border-color:#444}.dark-mode .permission-table td{color:#ccc;border-color:#444}.dark-mode .permission-table tbody tr:hover{background-color:#3a3a3a}.dark-mode .permission-notice{background-color:#3d3d3d}.dark-mode .permission-notice h4{color:#fff}.dark-mode .permission-notice li{color:#ccc}.dark-mode .permission-notice strong{color:#fff}.dark-mode .permission-tip{color:#999}.dark-mode .permission-modal-footer{border-top-color:#444}@media(max-width:480px){.permission-modal-container{max-height:90vh}.permission-modal-header{padding:20px 16px 12px}.permission-modal-content{padding:16px}.permission-table th,.permission-table td{padding:10px 12px;font-size:13px}.permission-modal-footer{padding:12px 16px}.permission-btn{padding:14px 32px;font-size:15px;width:100%}}@media(max-width:400px){.permission-table-container{position:relative}.permission-table-container:after{content:"← 左右滑动查看 →";position:absolute;bottom:-20px;left:50%;transform:translate(-50%);font-size:12px;color:#999;white-space:nowrap}}