@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)}body{margin:0;display:flex;place-items:center;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}*{box-shadow:none!important}.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)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family-base);background-color:var(--color-background);color:var(--color-text);line-height:1.6}.app-container{display:flex;flex-direction:column;min-height:100vh;max-width:1200px;margin:0 auto;background-color:var(--color-surface);box-shadow:0 0 20px #0000000d;border-radius:8px;overflow:hidden}.app-header{background-color:var(--color-primary);color:var(--color-light);padding:1.5rem 2rem;text-align:center;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--color-border)}.app-logo{width:150px;height:150px;object-fit:contain}.app-header h1{font-size:2.2rem;font-weight:700;margin:0;font-family:var(--font-family-header);letter-spacing:2px;color:var(--color-light);flex:1}.tutorial-btn-header{background-color:var(--color-accent);color:var(--color-light);border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:14px;transition:all .3s ease;font-family:var(--font-family-game-control)}.tutorial-btn-header:hover{background-color:var(--color-primary);transform:translateY(-1px)}.tutorial-btn-header:active{transform:translateY(0)}.network-container{padding:1.5rem 2rem;background-color:var(--color-background);border-bottom:1px solid var(--color-border)}.network-panel{display:flex;flex-direction:column;gap:1rem;max-width:1200px;margin:0 auto}.network-panel .network-status{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;background-color:var(--color-surface);border-radius:8px;font-size:.9rem;white-space:nowrap;overflow:hidden;border:1px solid var(--color-border)}.connection-status-container,.user-status{display:flex;align-items:center;gap:1rem}.user-indicator{color:var(--color-primary);font-weight:500;font-size:.9rem}.connection-status-detail{color:var(--color-text-light);font-size:.8rem;font-style:italic}.network-panel .status-label{font-weight:600;color:var(--color-primary);min-width:100px;display:inline-block;font-family:var(--font-family-room-management)}.network-panel .connection-indicator{font-weight:600;padding:.3rem 1rem;border-radius:16px;display:inline-block;font-size:.8rem}.network-panel .connection-indicator.connected{color:var(--color-primary);background-color:#3e27231a;border:1px solid var(--color-primary)}.network-panel .connection-indicator.ranking-entry{cursor:pointer;transition:all .3s ease}.network-panel .connection-indicator.ranking-entry:hover{background-color:#3e272333;transform:translateY(-1px)}.network-panel .connection-indicator.disconnected{color:var(--color-text-light);background-color:#5d40371a;border:1px solid var(--color-text-light)}.network-panel .audio-controls{display:flex;gap:.5rem;align-items:center}.network-panel .audio-toggle-btn{display:flex;align-items:center;gap:.3rem;padding:.3rem .8rem;border:1px solid var(--color-border);border-radius:16px;background-color:var(--color-surface);cursor:pointer;transition:all .3s ease;font-size:.8rem}.network-panel .audio-toggle-btn:hover{background-color:var(--color-background);border-color:var(--color-primary);color:var(--color-text)}.network-panel .audio-toggle-btn:hover .audio-icon{color:var(--color-primary)}.network-panel .audio-toggle-btn.active{background-color:#3e27231a;border-color:var(--color-primary)}.network-panel .audio-toggle-btn .audio-icon{font-size:1rem}.network-panel .audio-toggle-btn .audio-label{color:var(--color-text);font-weight:500}.network-panel .audio-toggle-btn.active .audio-label{color:var(--color-primary)}.network-panel .volume-control{display:flex;align-items:center;gap:.5rem;padding:.3rem .8rem;background-color:var(--color-surface);border-radius:16px;border:1px solid var(--color-border)}.network-panel .volume-icon{font-size:1rem}.network-panel .volume-slider{width:80px;height:4px;-webkit-appearance:none;appearance:none;background:var(--color-border);border-radius:2px;outline:none}.network-panel .volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-primary);cursor:pointer;transition:transform .2s ease}.network-panel .volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.network-panel .volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none;transition:transform .2s ease}.network-panel .volume-slider::-moz-range-thumb:hover{transform:scale(1.2)}.network-panel .current-user{color:var(--color-text-light);font-size:.8rem;margin-left:auto}.network-panel .auth-section{background-color:var(--color-surface);padding:1rem;border-radius:8px;border:1px solid var(--color-border)}.auth-container{display:flex;flex-direction:column;gap:.8rem}.auth-header{display:flex;align-items:center}.auth-title{font-weight:600;color:var(--color-primary);margin-right:1rem;font-family:var(--font-family-room-management)}.auth-form{width:100%}.auth-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}.auth-label{color:var(--color-text-light);font-size:.9rem;white-space:nowrap;font-family:var(--font-family-room-management)}.auth-input{padding:.5rem;border:1px solid var(--color-border);border-radius:4px;font-size:.9rem;background-color:var(--color-surface);transition:border-color .3s ease;font-family:var(--font-family-base);color:var(--color-text)}.auth-input:focus{outline:none;border-color:var(--color-primary)}.email-input{flex:2;min-width:200px}.password-input{flex:1;min-width:120px}.auth-separator{width:10px}.auth-button{padding:.5rem 1.2rem;border:none;border-radius:4px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;background-color:var(--color-primary);color:var(--color-light);white-space:nowrap;font-family:var(--font-family-room-management)}.auth-button:hover{background-color:var(--color-accent);transform:translateY(-1px)}.auth-button:disabled{background-color:var(--color-border);cursor:not-allowed;transform:none;color:var(--color-text-light)}.auth-switch{display:flex;justify-content:flex-start;align-items:center;gap:.5rem;font-size:.8rem;color:var(--color-text-light)}.auth-divider{display:flex;align-items:center;margin:1rem 0;color:var(--color-text-light);font-size:.8rem}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background-color:var(--color-border)}.auth-divider span{padding:0 1rem;white-space:nowrap}.wechat-login-button{background-color:#07c160;color:#fff;width:100%;margin-top:.5rem}.wechat-login-button:hover{background-color:#05ae51;transform:translateY(-1px)}.username-input{flex:2;min-width:200px}.auth-info{flex:2;min-width:200px;padding:.6rem;background-color:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;font-family:var(--font-family-base);color:var(--color-text);font-weight:500;font-size:.9rem;box-shadow:inset 0 1px 2px #0000001a;cursor:default;transition:all .2s ease}.auth-info:hover{background-color:#ffffff14;border-color:#ffffff26;box-shadow:inset 0 1px 3px #00000026}.auth-error{color:var(--color-text-light);background-color:#5d40371a;padding:.5rem;border-radius:4px;font-size:.8rem;margin-bottom:.5rem;border:1px solid var(--color-border)}.auth-user-info{display:flex;flex-direction:column;gap:.8rem}.user-info{display:flex;justify-content:center;align-items:center;gap:1rem;padding:1rem;background-color:var(--color-surface);border-radius:8px;font-size:.9rem;border:1px solid var(--color-border)}.user-email{color:var(--color-primary);font-weight:500;font-family:var(--font-family-base)}.logout-button{background-color:var(--color-accent)}.logout-button:hover{background-color:var(--color-primary)}.network-panel .network-features{display:flex;gap:1.5rem;justify-content:space-between}.network-panel .network-feature-item{flex:1;background-color:var(--color-surface);padding:1.2rem;border-radius:8px;min-width:280px;border:1px solid var(--color-border)}.app-main{display:flex;flex:1;padding:3rem;background-color:var(--color-background)}.game-container{flex:1;display:flex;justify-content:center;align-items:center;padding-right:2rem}.control-container{width:320px;background-color:var(--color-surface);padding:2rem;border-radius:12px;border:1px solid var(--color-border);box-shadow:0 2px 8px #00000008}.app-footer{background-color:var(--color-primary);color:var(--color-light);text-align:center;padding:1.5rem;border-top:1px solid var(--color-border);font-size:.9rem;font-family:var(--font-family-footer)}.app-footer a{color:var(--color-light);text-decoration:underline;transition:color .3s ease}.app-footer a:hover{color:var(--color-background)}@media(max-width:992px){.app-main{flex-direction:column;padding:2rem}.game-container{padding-right:0;margin-bottom:2rem}.control-container{width:100%;margin-top:1rem}.network-panel .network-features{flex-direction:column;gap:1rem}.network-panel .network-feature-item{min-width:auto}}@media(max-width:768px){.app-container{border-radius:0}.app-header{padding:1.2rem 1rem;gap:.8rem}.app-logo{width:120px;height:120px}.app-header h1{font-size:1.8rem}.app-main{padding:1.5rem}.game-container{margin-bottom:1.5rem}.network-container{padding:1.2rem 1rem}.network-panel{gap:.8rem}.network-panel .network-status{flex-direction:column;align-items:flex-start;gap:.8rem;padding:.8rem}.network-panel .auth-section,.network-panel .network-feature-item{padding:1rem}.sidebar{padding:1.5rem}}.modal-content{background-color:var(--color-surface);padding:2.5rem;border-radius:12px;box-shadow:0 8px 32px #0000001a;max-width:450px;width:90%;text-align:center;border:1px solid var(--color-border)}.modal-content h3{color:var(--color-primary);margin-bottom:1.5rem;font-size:1.3rem;font-family:var(--font-family-base)}.modal-content p{color:var(--color-text-light);margin-bottom:2.5rem;font-size:1rem;line-height:1.6}.modal-buttons{display:flex;gap:1.5rem;justify-content:center}.modal-button{padding:.8rem 2rem;border:none;border-radius:4px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:var(--font-family-game-control)}.modal-button.cancel{background-color:var(--color-surface);color:var(--color-primary);border:1px solid var(--color-border)}.modal-button.cancel:hover{background-color:var(--color-border)}.modal-button.confirm{background-color:var(--color-accent);color:var(--color-light)}.modal-button.confirm:hover{background-color:var(--color-primary)}.control-button.resign-button{background-color:var(--color-accent);color:var(--color-light)}.control-button.resign-button:hover:not(:disabled){background-color:var(--color-primary);transform:translateY(-1px)}.game-report-modal{max-width:550px;width:90%;max-height:80vh;overflow-y:hidden;display:flex;flex-direction:column;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:12px}.report-content-scrollable{flex:1;overflow-y:auto;padding:1.5rem;margin-bottom:1.5rem}.report-content-scrollable::-webkit-scrollbar{width:8px}.report-content-scrollable::-webkit-scrollbar-track{background:var(--color-background);border-radius:4px}.report-content-scrollable::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}.report-content-scrollable::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}.report-section{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--color-border)}.report-section h4{color:var(--color-primary);margin-bottom:1rem;font-size:1.1rem;font-family:var(--font-family-base)}.report-section p{color:var(--color-text-light);margin-bottom:.8rem;line-height:1.6}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.stat-item{display:flex;justify-content:space-between;align-items:center;padding:.8rem;background-color:var(--color-background);border-radius:8px;border:1px solid var(--color-border)}.stat-label{color:var(--color-text-light);font-size:.9rem;font-family:var(--font-family-base)}.stat-value{color:var(--color-primary);font-weight:600;font-size:.9rem;font-family:var(--font-family-base)}@media(max-width:768px){.modal-content{padding:2rem;max-width:350px}.modal-buttons{flex-direction:column;gap:1rem}.modal-button{width:100%}.game-report-modal{max-width:350px}.stats-grid{grid-template-columns:1fr}}@media(max-width:480px){.game-report-modal{padding:1.2rem}.report-section h4{font-size:1rem}.stat-item{font-size:.8rem;padding:.6rem}}.board-image-modal{max-width:650px;width:90%;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:12px}.board-image-container{display:flex;justify-content:center;margin:1.5rem 0;padding:1.5rem;background-color:var(--color-background);border-radius:8px;border:1px solid var(--color-border)}.board-image{max-width:100%;max-height:450px;border-radius:8px}@media(max-width:768px){.board-image{max-height:250px}}@media(max-width:480px){.board-image{max-height:200px}}.control-button{padding:.8rem 1.5rem;border:none;border-radius:4px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:var(--font-family-game-control);background-color:var(--color-surface);color:var(--color-primary);border:1px solid var(--color-border);margin-bottom:.8rem;width:100%}.control-button.resign-button{font-size:.5rem}.rules-section{background-color:var(--color-surface);padding:1.5rem;border-radius:8px;border:1px solid var(--color-border);margin-bottom:1.5rem}.rules-section h4{color:var(--color-primary);margin-bottom:1rem;font-size:1.1rem;font-family:var(--font-family-base)}.rules-section p{color:var(--color-text-light);margin-bottom:.8rem;line-height:1.6;font-size:.9rem}.timer-container{background-color:var(--color-surface);padding:1.5rem;border-radius:8px;border:1px solid var(--color-border);margin-bottom:1.5rem;text-align:center}.timer-container h4{color:var(--color-primary);margin-bottom:1rem;font-size:1.1rem;font-family:var(--font-family-base)}.timer-display{font-size:1.8rem;font-weight:700;color:var(--color-primary);font-family:var(--font-family-game-control);letter-spacing:1px}@media(max-width:768px){.timer-display{font-size:1.5rem}}.game-invitation-modal{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:1000}.game-invitation-overlay{position:absolute;inset:0;background-color:#00000080}.game-invitation-content{position:relative;background-color:var(--color-surface);padding:2.5rem;border-radius:12px;box-shadow:0 8px 32px #0000001a;max-width:450px;width:90%;text-align:center;border:1px solid var(--color-border);z-index:1001}.game-invitation-content h4{color:var(--color-primary);margin-bottom:1.5rem;font-size:1.3rem;font-family:var(--font-family-base)}.game-invitation-content p{color:var(--color-text-light);margin-bottom:2.5rem;font-size:1rem;line-height:1.6}.game-invitation-actions{display:flex;gap:1.5rem;justify-content:center}.game-invitation-btn{padding:.8rem 2rem;border:none;border-radius:4px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:var(--font-family-game-control)}.game-invitation-btn.accept{background-color:var(--color-primary);color:var(--color-light)}.game-invitation-btn.accept:hover{background-color:var(--color-accent);transform:translateY(-1px)}.game-invitation-btn.reject{background-color:var(--color-surface);color:var(--color-primary);border:1px solid var(--color-border)}.game-invitation-btn.reject:hover{background-color:var(--color-border);transform:translateY(-1px)}@media(max-width:768px){.game-invitation-content{padding:2rem;max-width:350px}.game-invitation-actions{flex-direction:column;gap:1rem}.game-invitation-btn{width:100%}}.difficulty-toggle-container{display:flex;justify-content:center;align-items:center;margin:8px 0}.difficulty-toggle-button{padding:8px 16px;border:2px solid #4CAF50;border-radius:20px;background-color:#fff;color:#4caf50;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:80px;text-align:center}.difficulty-toggle-button:hover{background-color:#4caf50;color:#fff;transform:translateY(-2px);box-shadow:0 4px 8px #4caf5033}.difficulty-toggle-button:active{transform:translateY(0);box-shadow:0 2px 4px #4caf5033}@media(max-width:768px){.difficulty-toggle-button{padding:6px 12px;font-size:12px;min-width:70px}}.control-sidebar{position:fixed;right:0;top:0;height:100vh;background-color:var(--color-surface);box-shadow:-2px 0 10px #0000000d;z-index:1000;transition:width .3s ease;display:flex;flex-direction:column;border-left:1px solid var(--color-border)}.control-sidebar.expanded{width:320px}.control-sidebar.collapsed{width:40px}.sidebar-toggle{position:absolute;left:-30px;top:50%;transform:translateY(-50%);width:30px;height:60px;background-color:var(--color-primary);color:var(--color-light);border:none;border-radius:8px 0 0 8px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:999}.sidebar-toggle:hover{background-color:var(--color-accent)}.control-panel-content{padding:2rem;overflow-y:auto;flex:1;background-color:var(--color-background)}.control-panel-content::-webkit-scrollbar{width:8px}.control-panel-content::-webkit-scrollbar-track{background:var(--color-background);border-radius:4px}.control-panel-content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}.control-panel-content::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}@media(max-width:768px){.control-sidebar.expanded{width:280px}.control-panel-content{padding:1.5rem}}.control-panel-content h3{color:var(--color-primary);margin-bottom:2rem;font-size:1.3rem;text-align:center;border-bottom:1px solid var(--color-border);padding-bottom:1rem;font-family:var(--font-family-base);font-weight:700;letter-spacing:1px}.control-section{margin-bottom:2rem;padding:1.5rem;background-color:var(--color-surface);border-radius:8px;border:1px solid var(--color-border)}.control-section h4{color:var(--color-primary);margin-bottom:1rem;font-size:1.1rem;font-weight:600;font-family:var(--font-family-base);letter-spacing:.5px}.control-item{margin-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}.control-item label{color:var(--color-text-light);font-size:.9rem;font-family:var(--font-family-base)}.control-item select,.control-item input[type=range]{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)}.control-item select:focus,.control-item input[type=range]:focus{outline:none;border-color:var(--color-primary)}.control-item input[type=range]{padding:.4rem 0}.control-item span{color:var(--color-primary);font-weight:600;align-self:flex-end;margin-top:-.5rem;margin-right:.5rem;font-family:var(--font-family-base)}.color-info{margin-bottom:1rem;background-color:var(--color-surface);padding:1rem;border-radius:8px;border:1px solid var(--color-border)}.color-info p{margin:.5rem 0;color:var(--color-text);font-size:.9rem;font-family:var(--font-family-base)}.color-info strong{color:var(--color-primary)}.ai-thinking{color:var(--color-text-light);font-size:.9rem;margin-top:.8rem;text-align:center;background-color:#5d40371a;padding:.5rem;border-radius:8px;border:1px solid var(--color-border);font-family:var(--font-family-base)}.toggle-switch{position:relative;display:inline-block;width:60px;height:34px;margin:.8rem 0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-label{position:absolute;cursor:pointer;inset:0;background-color:var(--color-border);transition:.4s;border-radius:34px}.toggle-label:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:var(--color-light);transition:.4s;border-radius:50%}input:checked+.toggle-label{background-color:var(--color-primary)}input:focus+.toggle-label{box-shadow:0 0 1px var(--color-primary)}input:checked+.toggle-label:before{transform:translate(26px)}input:disabled+.toggle-label{background-color:var(--color-border);cursor:not-allowed}.toggle-description{font-size:.8rem;color:var(--color-text-light);margin-top:.5rem;margin-bottom:0;font-family:var(--font-family-base)}.control-buttons{display:flex;flex-direction:column;gap:.8rem}.control-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-game-control)}.control-button.resign-button{font-size:.8rem}.control-button:hover:not(:disabled){background-color:var(--color-primary);color:var(--color-light);transform:translateY(-1px)}.control-button:active{transform:translateY(0)}.control-button:disabled{background-color:var(--color-border);color:var(--color-text-light);cursor:not-allowed;transform:none}.reset-button{background-color:var(--color-surface);color:var(--color-primary);border:1px solid var(--color-border)}.reset-button:hover:not(:disabled){background-color:var(--color-primary);color:var(--color-light)}.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:1rem}.room-info{display:flex;flex-direction:column;gap:.8rem;background-color:var(--color-surface);padding:1rem;border-radius:8px;border:1px solid var(--color-border)}.players-list{display:flex;flex-direction:column;gap:.8rem}.player-item{display:flex;justify-content:space-between;align-items:center;background-color:var(--color-surface);padding:.8rem;border-radius:8px;border:1px solid var(--color-border);font-size:.9rem;font-family:var(--font-family-base)}.player-status{font-size:.8rem;font-weight:600;padding:.3rem .8rem;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:.8rem;font-weight:600;padding:.3rem .8rem;border-radius:16px;background-color:var(--color-background);border:1px solid var(--color-border);font-family:var(--font-family-base)}.kick-button{background-color:#dc3545;color:#fff;border:none;border-radius:4px;padding:.4rem .8rem;font-size:.8rem;font-weight:600;cursor:pointer;margin-right:.8rem;font-family:var(--font-family-base)}.kick-button:hover{background-color:#c82333;box-shadow:0 2px 4px #dc35454d}.kick-button:active{background-color:#a71e2a;box-shadow:0 1px 2px #dc35454d}.player-item{display:flex;align-items:center;background-color:var(--color-surface);padding:.8rem;border-radius:8px;border:1px solid var(--color-border);font-size:.9rem;font-family:var(--font-family-base)}.player-item>span:first-of-type{flex:1;margin-left:.8rem}.player-item>span:not(:first-of-type){margin-left:.8rem}.room-actions,.game-started{display:flex;flex-direction:column;gap:.8rem;align-items:center}.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)}.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}.online-control-panel{background-color:#f8f9fa;padding:1.5rem;border-radius:8px;box-shadow:0 2px 10px #0000000d;width:280px}.online-control-panel h3{color:#2c3e50;margin-bottom:1.5rem;font-size:1.2rem;text-align:center;border-bottom:1px solid #e9ecef;padding-bottom:.5rem}.control-section{margin-bottom:1.5rem}.control-section h4{color:#34495e;margin-bottom:.8rem;font-size:1rem;font-weight:600}.control-buttons{display:flex;flex-direction:column;gap:.5rem}.control-button{padding:.75rem 1rem;border:none;border-radius:4px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease-in-out;background-color:#007bff;color:#fff}.control-button:hover{background-color:#0056b3;transform:translateY(-1px);box-shadow:0 4px 8px #007bff33}.control-button:active{transform:translateY(0);box-shadow:0 2px 4px #007bff33}.control-button:disabled{background-color:#6c757d;cursor:not-allowed;transform:none;box-shadow:none}.resign-button{background-color:#dc3545}.resign-button:hover{background-color:#c82333;box-shadow:0 4px 8px #dc354533}.resign-button:active{box-shadow:0 2px 4px #dc354533}.agree-end-button{background-color:#ffc107;color:#212529}.agree-end-button:hover{background-color:#e0a800;box-shadow:0 4px 8px #ffc1074d}.agree-end-button:active{box-shadow:0 2px 4px #ffc1074d}.agree-end-button.requested{background-color:#28a745;color:#fff}.agree-end-button.requested:hover{background-color:#218838;box-shadow:0 4px 8px #28a7454d}.agree-end-button.requested:active{box-shadow:0 2px 4px #28a7454d}.agreement-status{background-color:#e7f3ff;border:1px solid #b8daff;border-radius:4px;padding:1rem;margin-top:1rem}.agreement-status p{margin:.5rem 0;color:#1a5276;font-size:.85rem;line-height:1.4}.request-info{font-size:.8rem!important;color:#6c757d!important;margin-top:.8rem!important;padding-top:.8rem;border-top:1px solid #dee2e6}.agreed-info{color:#28a745!important;font-weight:600;margin-top:.8rem!important;padding-top:.8rem;border-top:1px solid #dee2e6}.game-not-started{text-align:center;color:#6c757d;font-size:1rem;padding:1rem;background-color:#f8f9fa;border-radius:4px;border:1px solid #e9ecef;margin-top:1rem}.undo-status{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;padding:1rem;margin-top:1rem}.undo-message{margin:.5rem 0;font-size:.85rem;line-height:1.4;text-align:center}.undo-waiting,.undo-agreed{text-align:center}.undo-buttons{display:flex;gap:.5rem;margin-top:.8rem}.undo-button{flex:1;padding:.5rem .75rem;border:none;border-radius:4px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s ease-in-out}.undo-button.agree{background-color:#28a745;color:#fff}.undo-button.agree:hover{background-color:#218838;transform:translateY(-1px);box-shadow:0 4px 8px #28a74533}.undo-button.reject{background-color:#dc3545;color:#fff}.undo-button.reject:hover{background-color:#c82333;transform:translateY(-1px);box-shadow:0 4px 8px #dc354533}.undo-button.cancel{background-color:#6c757d;color:#fff;margin-top:.8rem}.undo-button.cancel:hover{background-color:#5a6268;transform:translateY(-1px);box-shadow:0 4px 8px #6c757d33}.undo-completed{background-color:#d4edda;border-color:#c3e6cb;color:#155724}.undo-rejected{background-color:#f8d7da;border-color:#f5c6cb;color:#721c24}@media(max-width:768px){.online-control-panel{width:100%;max-width:300px}.undo-buttons{flex-direction:column}}.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:#999;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}}.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%}}.tutorial-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.tutorial-modal{background-color:#fff;border-radius:8px;width:80%;max-width:800px;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #0000004d;display:flex;flex-direction:column}.tutorial-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e0e0e0;background-color:#f8f9fa;border-radius:8px 8px 0 0}.tutorial-header h2{margin:0;color:#333;font-size:24px}.tutorial-close-btn{background:none;border:none;font-size:24px;cursor:pointer;color:#666;width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:50%;transition:all .2s ease}.tutorial-close-btn:hover{background-color:#e0e0e0;color:#333}.tutorial-content{padding:30px;color:#333;line-height:1.6}.tutorial-content h3{margin-top:20px;margin-bottom:10px;color:#2c3e50;font-size:18px}.tutorial-content p{margin-bottom:15px}.tutorial-content ul{margin-bottom:20px;padding-left:20px}.tutorial-content li{margin-bottom:8px}.tutorial-content strong{color:#2c3e50}.tutorial-image-container{display:flex;justify-content:center;margin:20px 0}.tutorial-svg{max-width:100%;height:auto;box-shadow:0 2px 8px #0000001a;border-radius:4px}@media(max-width:768px){.tutorial-svg{max-width:100%;height:auto}}.tutorial-footer{padding:20px;border-top:1px solid #e0e0e0;background-color:#f8f9fa;border-radius:0 0 8px 8px;display:flex;flex-direction:column;gap:15px}.tutorial-progress{display:flex;justify-content:center;gap:10px}.progress-dot{width:12px;height:12px;border-radius:50%;background-color:#e0e0e0;transition:all .3s ease}.progress-dot.active{background-color:#3498db;transform:scale(1.2)}.tutorial-buttons{display:flex;justify-content:flex-end;gap:10px}.tutorial-btn{padding:10px 20px;border:1px solid #3498db;background-color:#fff;color:#3498db;border-radius:4px;cursor:pointer;font-size:16px;transition:all .2s ease}.tutorial-btn:hover:not(:disabled){background-color:#f0f8ff}.tutorial-btn:disabled{opacity:.5;cursor:not-allowed}.tutorial-btn.primary{background-color:#3498db;color:#fff}.tutorial-btn.primary:hover{background-color:#2980b9}@media(max-width:768px){.tutorial-modal{width:95%;margin:10px}.tutorial-header{padding:15px}.tutorial-content{padding:20px}.tutorial-footer{padding:15px}.tutorial-buttons{flex-direction:column}.tutorial-btn{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}