.auth-modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:none;justify-content:center;align-items:center;z-index:5001;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.auth-modal-backdrop.visible{display:flex}.auth-container{background:#000000f2;border:2px solid #00ff88;border-radius:15px;padding:40px;font-family:monospace;color:#fff;max-width:400px;width:90%;box-shadow:0 10px 30px #00ff884d;position:relative;display:flex;flex-direction:column;gap:20px}.auth-header{text-align:center}.auth-title{color:#0f8;margin:0 0 10px;font-size:24px}.auth-subtitle{color:#888;margin:0 0 30px;font-size:14px}.auth-form{display:flex;flex-direction:column;gap:20px}.auth-form-group{display:flex;flex-direction:column;gap:8px}.auth-label{color:#0f8;font-size:14px}.auth-input{padding:12px;border:1px solid #333;border-radius:5px;background:#111;color:#fff;font-family:monospace;font-size:16px}.auth-input::placeholder{color:#555}.auth-button{padding:15px;border:none;border-radius:5px;font-family:monospace;font-weight:700;font-size:16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:10px}.auth-button-icon{font-size:1em}.auth-submit-btn{background:#0f8;color:#000}.auth-submit-btn:hover{background:#00cc6a}.auth-divider-container{margin:20px 0;text-align:center;color:#666;display:flex;align-items:center}.auth-divider{flex:1;height:1px;background:#333}.auth-divider-text{margin:0 15px;font-size:12px}.auth-social-buttons{display:flex;flex-direction:column;gap:10px}.auth-social-btn{padding:12px;color:#fff;font-weight:700}.auth-social-icon{font-size:16px}.auth-google-btn{background:#4285f4}.auth-google-btn:hover{background:#3367d6}.auth-discord-btn{background:#5865f2}.auth-discord-btn:hover{background:#4752c4}.auth-dummy-btn{background:#ff9500}.auth-dummy-btn:hover{background:#e6851f}.auth-toggle-container{text-align:center;margin-top:15px}.auth-toggle-btn{background:none;border:none;color:#0f8;font-family:monospace;text-decoration:underline;cursor:pointer;font-size:14px}.auth-message{margin-top:15px;padding:10px;border-radius:5px;text-align:center;font-size:14px;display:none}.auth-message.visible{display:block}.auth-message-success{color:#0f8;background:#0f82;border:1px solid #00ff88}.auth-message-error{color:#ff6b6b;background:#ff6b6b22;border:1px solid #ff6b6b}.auth-message-info{color:#888;background:#8882;border:1px solid #888}.auth-close-btn{position:absolute;top:15px;right:20px;background:none;border:none;color:#ff6b6b;font-size:20px;cursor:pointer;font-weight:700}.auth-close-btn:hover{color:#ff4f4f}.auth-button.loading{opacity:.7;cursor:not-allowed}.auth-welcome-message{position:fixed;top:140px;left:-400px;background:linear-gradient(135deg,#00ff88e6,#00ff88b3);color:#000;padding:16px 24px;border-radius:12px;font-family:Inter,monospace;font-size:16px;font-weight:600;z-index:2000;box-shadow:0 8px 24px #0006,0 0 20px #00ff8880;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:left .5s cubic-bezier(.68,-.55,.265,1.55);max-width:350px;border:1px solid rgba(0,255,136,.8)}.auth-welcome-message.visible{left:20px}.mp-modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:none;justify-content:center;align-items:center;z-index:2000;font-family:monospace;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.mp-modal-backdrop.visible{display:flex}.mp-container{background:linear-gradient(135deg,#1a1a1a,#2a2a2a);border:2px solid #00ff88;border-radius:12px;padding:30px;min-width:400px;max-width:500px;box-shadow:0 8px 32px #00ff884d;text-align:center;position:relative;display:flex;flex-direction:column;gap:20px}.mp-close-btn{position:absolute;top:10px;right:15px;background:none;border:none;color:#888;font-size:24px;cursor:pointer;padding:5px;border-radius:4px;transition:all .2s}.mp-close-btn:hover{background:#ff6b6b;color:#fff}.mp-title{color:#0f8;margin:0 0 25px;font-size:24px;text-shadow:0 0 10px rgba(0,255,136,.5)}.mp-content-area{min-height:200px}.mp-status-message{margin-top:20px;padding:12px;border-radius:6px;display:none;font-weight:700}.mp-status-message.visible{display:block}.mp-status-success{background:#0f82;border:1px solid #00ff88;color:#0f8}.mp-status-error{background:#ff6b6b22;border:1px solid #ff6b6b;color:#ff6b6b}.mp-status-info{background:#4285f422;border:1px solid #4285f4;color:#4285f4}.mp-menu-view{display:flex;flex-direction:column;gap:20px}.mp-auth-status{margin-bottom:0}.mp-auth-status-box{background:#00ff881a;border:1px solid #00ff88;border-radius:6px;padding:10px;font-size:14px}.mp-auth-status-header{color:#0f8;font-weight:700}.mp-auth-status-email{color:#ccc;margin-top:4px}.mp-label{display:block;color:#ccc;margin-bottom:8px;font-size:14px;text-align:left}.mp-input{width:100%;padding:12px;border:2px solid #444;border-radius:6px;background:#333;color:#fff;font-family:monospace;font-size:16px;box-sizing:border-box}.mp-input::placeholder{color:#777}.mp-room-code-input{text-transform:uppercase;margin-bottom:15px}.mp-game-mode-section{margin-bottom:5px;padding:15px;border:1px solid #444;border-radius:8px;background:#2a2a2a}.mp-game-mode-label{color:#0f8;margin-bottom:12px;font-weight:700;font-size:14px;text-align:left}.mp-game-mode-option{display:flex;align-items:center;cursor:pointer;padding:12px;border-radius:6px;transition:all .2s ease;margin-bottom:8px;border:2px solid transparent;-webkit-user-select:none;user-select:none;text-align:left}.mp-game-mode-option:hover{background:#333}.mp-game-mode-option.selected{border-color:#0f8;background:#00ff8826}.mp-game-mode-option.selected.duel{border-color:#ff6b6b;background:#ff6b6b26}.mp-radio{margin-right:8px;cursor:pointer}.mp-radio[value=freeplay]{accent-color:#00ff88}.mp-radio[value=duel]{accent-color:#ff6b6b}.mp-radio-label strong{font-size:1.1em}.mp-radio-label small{color:#888;font-size:.9em}.mp-board-config-section{margin-top:20px;padding:15px;border-radius:8px;background:#ff6b6b1a;border:1px solid #ff6b6b}.mp-config-title{color:#ff6b6b;font-weight:700;margin-bottom:15px;font-size:16px;text-align:left}.mp-select{width:100%;padding:8px;border:2px solid #444;border-radius:6px;background:#333;color:#fff;font-family:monospace;margin-bottom:15px;box-sizing:border-box}.mp-button{width:100%;padding:15px;border:none;border-radius:8px;font-family:monospace;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;box-sizing:border-box}.mp-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.mp-button.loading{opacity:.7;cursor:not-allowed}.mp-create-btn{background:#0f8;color:#000;margin-bottom:15px}.mp-join-section{margin-top:20px;padding-top:20px;border-top:1px solid #444}.mp-join-btn{background:#4285f4;color:#fff}.mp-lobby-view{display:flex;flex-direction:column;gap:20px}.mp-room-info{background:#00ff881a;border:1px solid #00ff88;border-radius:8px;padding:15px}.mp-room-code-header{font-size:18px;font-weight:700;color:#0f8;margin-bottom:10px}.mp-room-code-clickable{background:#0f83;padding:4px 8px;border-radius:4px;cursor:pointer;border:1px dashed #00ff88;transition:all .2s ease;-webkit-user-select:all;user-select:all}.mp-room-code-clickable:hover{background:#00ff884d;transform:scale(1.05)}.mp-room-code-clickable.copied{background:#0f86;color:#fff}.mp-room-code-clickable.copy-failed{background:#ffff004d}.mp-host-status{color:#ccc;font-size:14px}.mp-copy-hint{color:#888;font-size:12px;margin-top:8px}.mp-players-list-container{background:#ffffff0d;border-radius:8px;padding:15px;min-height:120px}.mp-players-title{color:#ccc;margin:0 0 15px;font-size:16px;text-align:left}.mp-players-list{display:flex;flex-direction:column;gap:8px}.mp-player-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#ffffff0d;border-radius:6px;border-left:3px solid #666}.mp-player-item.ready{border-left-color:#0f8}.mp-player-name{color:#fff}.mp-player-name.disconnected{color:#666}.mp-player-status{font-size:12px;color:#888}.mp-player-status.ready{color:#0f8}.mp-ready-section{margin-top:5px;padding-top:20px;border-top:1px solid #444}.mp-game-mode-display{margin-bottom:20px;padding:12px;border-radius:6px;text-align:center;font-weight:700;border:2px solid #444}.mp-game-mode-display.mp-game-mode-duel{border-color:#ff6b6b;background:#ff6b6b1a}.mp-game-mode-display.mp-game-mode-freeplay{border-color:#0f8;background:#00ff881a}.mp-game-mode-title{font-size:16px;margin-bottom:8px}.mp-game-mode-title-duel{color:#ff6b6b}.mp-game-mode-title-freeplay{color:#0f8}.mp-game-mode-description{color:#ccc;font-size:12px;line-height:1.4}.mp-ready-btn{background:#0f8;color:#000;margin-bottom:15px}.mp-ready-btn.not-ready{background:#0f8;color:#000}.mp-ready-btn:not(.not-ready){background:#ff9500;color:#fff}.mp-leave-btn{padding:12px;background:transparent;color:#ff6b6b;border:2px solid #ff6b6b;font-size:14px}.mp-leave-btn:hover{background:#ff6b6b;color:#fff}.mp-joining-view{text-align:center;padding:40px 20px;display:flex;flex-direction:column;align-items:center;gap:20px}.mp-spinner{font-size:48px;animation:spin 2s linear infinite}.mp-joining-text{color:#ccc;font-size:16px}.mp-cancel-btn{padding:10px 20px;background:#666;color:#fff;max-width:150px}.mp-cancel-btn:hover{background:#555}.mp-game-start-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:10000;pointer-events:none}.mp-game-start-message{color:#0f8;font-size:48px;font-family:monospace;font-weight:700;text-align:center;text-shadow:0 0 20px #00ff88;animation:mpFadeInOut 3s ease-in-out}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes mpFadeInOut{0%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.1)}}@media (max-width: 768px){.auth-container{padding:25px;max-width:90%}.auth-title{font-size:20px}.auth-subtitle{font-size:12px;margin-bottom:20px}.auth-input{padding:10px;font-size:14px}.auth-button{padding:12px;font-size:14px}.auth-social-btn{padding:10px}.auth-social-icon{font-size:14px}.auth-divider-container{margin:15px 0}.auth-divider-text{font-size:10px}.auth-toggle-btn{font-size:12px}.auth-message{font-size:12px;padding:8px}.auth-close-btn{top:10px;right:15px;font-size:18px}.mp-container{padding:20px;min-width:90%;max-width:95%}.mp-title{font-size:20px;margin-bottom:20px}.mp-close-btn{top:8px;right:12px;font-size:20px}.mp-label{font-size:13px;margin-bottom:6px}.mp-input,.mp-select{padding:10px;font-size:14px}.mp-game-mode-section{padding:10px}.mp-game-mode-label{font-size:13px;margin-bottom:10px}.mp-game-mode-option{padding:10px;margin-bottom:6px}.mp-radio-label strong{font-size:1em}.mp-radio-label small{font-size:.85em}.mp-board-config-section{padding:10px}.mp-config-title{font-size:14px;margin-bottom:10px}.mp-button{padding:12px;font-size:14px}.mp-create-btn,.mp-ready-btn{margin-bottom:10px}.mp-leave-btn{padding:10px;font-size:13px}.mp-room-info{padding:12px}.mp-room-code-header{font-size:16px}.mp-host-status,.mp-copy-hint{font-size:11px}.mp-players-list-container{padding:12px;min-height:100px}.mp-players-title{font-size:14px;margin-bottom:10px}.mp-player-item{padding:6px 10px}.mp-player-name,.mp-player-status{font-size:11px}.mp-game-mode-display{padding:10px}.mp-game-mode-title{font-size:14px}.mp-game-mode-description{font-size:11px}.mp-joining-view{padding:30px 15px;gap:15px}.mp-spinner{font-size:40px}.mp-joining-text{font-size:14px}.mp-cancel-btn{padding:8px 16px;font-size:13px}.mp-game-start-message{font-size:32px}}#settingsModal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:none;justify-content:center;align-items:center;z-index:5000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;transition:opacity .3s ease}#settingsModal[style*="display: flex"]{opacity:1}.settings-modal-content{background:#000000f2;border:2px solid #007bff;border-radius:15px;padding:25px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;color:#fff;box-shadow:0 10px 30px #007bff4d;transform:scale(.9);transition:transform .3s cubic-bezier(.68,-.55,.265,1.55)}#settingsModal[style*="display: flex"] .settings-modal-content{transform:scale(1)}.settings-section{margin-bottom:25px;padding:20px;background:#ffffff0d;border-radius:10px;border:1px solid rgba(255,255,255,.1)}.settings-section h3{color:#007bff;margin:0 0 15px;font-size:18px;font-weight:700}.settings-group{margin-bottom:15px}.settings-group:last-child{margin-bottom:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideInFromLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInFromRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInFromTop{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInFromBottom{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:0}}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}.transition-fade{transition:opacity .3s ease}.transition-slide{transition:transform .3s ease,opacity .3s ease}.transition-scale{transition:transform .3s cubic-bezier(.68,-.55,.265,1.55),opacity .3s ease}.transition-all{transition:all .3s ease}.animate-fade-in{animation:fadeIn .3s ease forwards}.animate-fade-out{animation:fadeOut .3s ease forwards}.animate-slide-in-left{animation:slideInFromLeft .3s ease forwards}.animate-slide-in-right{animation:slideInFromRight .3s ease forwards}.animate-slide-in-top{animation:slideInFromTop .3s ease forwards}.animate-slide-in-bottom{animation:slideInFromBottom .3s ease forwards}.animate-scale-in{animation:scaleIn .3s cubic-bezier(.68,-.55,.265,1.55) forwards}.animate-scale-out{animation:scaleOut .3s ease forwards}.animate-bounce-in{animation:bounceIn .6s cubic-bezier(.68,-.55,.265,1.55) forwards}.animate-pulse{animation:pulse 2s infinite}.animate-shake{animation:shake .5s ease}@keyframes loadingDots{0%{content:"."}33%{content:".."}66%{content:"..."}}.loading-dots:after{content:".";animation:loadingDots 1.5s infinite}button{position:relative;overflow:hidden;transition:all .3s ease}button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}button:hover:before{width:300px;height:300px}.feedback-message{position:fixed;top:140px;left:-400px;background:linear-gradient(135deg,#000000e6,#000000b3);padding:16px 24px;border-radius:12px;font-family:Inter,monospace;font-size:16px;font-weight:500;z-index:2000;box-shadow:0 8px 24px #0006,0 0 20px #ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .5s cubic-bezier(.68,-.55,.265,1.55);max-width:350px}.feedback-message.show{left:20px}.modal-overlay{transition:backdrop-filter .3s ease,background-color .3s ease}.settings-modal-content::-webkit-scrollbar{width:8px}.settings-modal-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.settings-modal-content::-webkit-scrollbar-thumb{background:#007bff80;border-radius:4px;transition:background .3s ease}.settings-modal-content::-webkit-scrollbar-thumb:hover{background:#007bffb3}input[type=checkbox]{transition:all .3s ease}input[type=checkbox]:checked{transform:scale(1.1)}input[type=range]{transition:opacity .3s ease}input[type=range]:hover{opacity:1}@media (max-width: 768px){.settings-modal-content{max-width:95%;max-height:90vh;padding:20px}.transition-scale{transition:transform .2s ease,opacity .2s ease}@keyframes mobileSlideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.animate-mobile-slide-up{animation:mobileSlideUp .3s ease forwards}}.hover-grow{transition:transform .2s ease}.hover-grow:hover{transform:scale(1.05)}.hover-glow{transition:box-shadow .3s ease}.hover-glow:hover{box-shadow:0 0 20px #00ff8880}input:focus,textarea:focus,select:focus{outline:none;box-shadow:0 0 0 2px #007bff80;transition:box-shadow .2s ease}.collapsible{overflow:hidden;transition:max-height .3s ease}.collapsible.collapsed{max-height:0}.collapsible.expanded{max-height:500px}@keyframes cardFlip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}to{transform:rotateY(0)}}.animate-card-flip{animation:cardFlip .6s ease}@keyframes ripple{0%{transform:scale(0);opacity:1}to{transform:scale(4);opacity:0}}.ripple{position:absolute;border-radius:50%;background:#fff9;transform:scale(0);animation:ripple .6s ease;pointer-events:none}
