*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;color:#1a1a1a;transition:background 0.3s ease,color 0.3s ease}body.dark-mode{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);color:#e0e0e0}.main-content{color:#1a1a1a;transition:color 0.3s ease}body.dark-mode .main-content{color:#e0e0e0}.main-content h1,.main-content h2,.main-content h3,.main-content h4,.main-content h5,.main-content h6{color:#1a1a1a;transition:color 0.3s ease}body.dark-mode .main-content h1,body.dark-mode .main-content h2,body.dark-mode .main-content h3,body.dark-mode .main-content h4,body.dark-mode .main-content h5,body.dark-mode .main-content h6{color:#e0e0e0}.main-content p{color:#2d2d2d;transition:color 0.3s ease}body.dark-mode .main-content p{color:#c0c0c0}.navbar{background:rgba(255,255,255,0.95);padding:0.75rem 0;box-shadow:0 2px 10px rgba(0,0,0,0.1);transition:background 0.3s ease,box-shadow 0.3s ease;backdrop-filter:blur(10px)}body.dark-mode .navbar{background-color:#1a1a2e!important;border-bottom:1px solid #2d2d44!important;box-shadow:0 2px 4px rgba(0,0,0,0.4)!important}body.dark-mode .navbar .navbar-brand,body.dark-mode .navbar .navbar-brand span{color:#e0e0e0!important}.logo-text{font-family:'Righteous',cursive;font-size:1.5rem;color:#2c3e50;letter-spacing:0.5px;line-height:1;font-weight:400}body.dark-mode .logo-text{color:#e0e0e0}.logo-icon{width:35px;height:35px;font-size:1.1rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);transition:transform 0.2s ease}.navbar-brand:hover .logo-icon{transform:scale(1.05)}body.dark-mode .logo-icon{background:linear-gradient(135deg,#8b9aff 0%,#9d7aff 100%)}body.dark-mode .navbar .nav-link{color:#e0e0e0!important}body.dark-mode .navbar .nav-link:hover{color:#8b9aff!important;background-color:rgba(255,255,255,0.05);border-radius:5px}body.dark-mode .navbar .fa-solid,body.dark-mode .navbar .fa-regular{color:#adb5bd!important}body.dark-mode .navbar .btn-link{color:#adb5bd!important}body.dark-mode .navbar .btn-link:hover{color:#8b9aff!important}body.dark-mode .navbar .badge.bg-warning{background-color:rgba(255,193,7,0.2)!important;border:1px solid rgba(255,193,7,0.4)!important;color:#ffc107!important}body.dark-mode .navbar .vr{color:#444!important;opacity:0.5}body.dark-mode .dropdown-menu{background-color:#16213e!important;border:1px solid #2d2d44!important}body.dark-mode .dropdown-item{color:#e0e0e0!important}body.dark-mode .dropdown-item:hover{background-color:#0f3460!important;color:#fff!important}body.dark-mode .dropdown-item.text-danger{color:#ff6b6b!important}body.dark-mode .dropdown-item.text-danger:hover{background-color:rgba(255,107,107,0.2)!important;color:#ff8787!important}body.dark-mode .navbar .dropdown-toggle{color:#e0e0e0!important}body.dark-mode .navbar .dropdown-toggle span{color:#e0e0e0!important}.navbar .nav-link{transition:color 0.2s ease}.navbar .nav-link:hover{color:#667eea!important}body.dark-mode .navbar .nav-link{color:#b0b0b0!important}body.dark-mode .navbar .nav-link:hover{color:#8b9aff!important}.navbar .btn-link{transition:color 0.2s ease,transform 0.2s ease}.navbar .btn-link:hover{color:#667eea!important;transform:scale(1.1)}body.dark-mode .navbar .btn-link{color:#b0b0b0!important}body.dark-mode .navbar .btn-link:hover{color:#8b9aff!important}.navbar .border-warning{transition:all 0.2s ease}.navbar .border-warning:hover{background:rgba(255,193,7,0.2)!important;transform:scale(1.05)}body.dark-mode .navbar .border-warning{border-color:#ffc107!important;color:#ffc107!important;background:rgba(255,193,7,0.15)!important}.navbar .dropdown-menu{margin-top:0.5rem}body.dark-mode .navbar .dropdown-menu{background:#2a2a3e;border-color:#444}body.dark-mode .navbar .dropdown-item{color:#e0e0e0}body.dark-mode .navbar .dropdown-item:hover{background:#3a3a4e;color:#fff}body.dark-mode .navbar .dropdown-item.text-danger{color:#ff6b6b!important}body.dark-mode .navbar .dropdown-item.text-danger:hover{background:rgba(255,107,107,0.2)}body.dark-mode .dark-mode-icon::before{content:"\f186";font-family:"Font Awesome 6 Free";font-weight:900}.dark-mode-icon::before{content:"\f185";font-family:"Font Awesome 6 Free";font-weight:900}.nav-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.5rem;font-weight:bold;color:#667eea;text-decoration:none;display:flex;align-items:center;gap:0.5rem}.logo-img{height:40px;width:auto;display:inline-block;vertical-align:middle;color:inherit}.logo-text{display:inline-block;vertical-align:middle}.nav-links{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}.nav-link-with-badge{position:relative;text-decoration:none;color:inherit}.nav-icon{font-size:1.3rem;text-decoration:none;color:inherit;transition:transform 0.2s ease,opacity 0.2s ease;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.nav-icon:hover{transform:scale(1.1);opacity:0.8;background:rgba(102,126,234,0.1)}body.dark-mode .nav-icon:hover{background:rgba(139,154,255,0.2)}.notification-badge{position:absolute;top:-8px;right:-12px;background:#e74c3c;color:white;border-radius:50%;min-width:20px;height:20px;padding:0 6px;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:bold;border:2px solid white;box-shadow:0 2px 4px rgba(0,0,0,0.2);animation:pulse 2s infinite;line-height:1}.notification-badge.badge-pulse{animation:badgePulse 0.5s ease-out}@keyframes badgePulse{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}body.dark-mode .notification-badge{border-color:#1a1a2e}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}.language-selector{position:relative}.language-selector select{background:white;border:2px solid #667eea;border-radius:5px;padding:0.5rem 1rem;font-size:0.9rem;color:#333;cursor:pointer;transition:all 0.3s ease;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5rem center;padding-right:2rem}.language-selector select:hover{background-color:#f8f9fa;border-color:#5568d3}.language-selector select:focus{outline:none;border-color:#5568d3;box-shadow:0 0 0 3px rgba(102,126,234,0.1)}body.dark-mode .language-selector select{background:#2a2a3e;border-color:#667eea;color:#e0e0e0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b9aff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5rem center}body.dark-mode .language-selector select:hover{background-color:#3a3a4e;border-color:#8b9aff}.nav-links a{text-decoration:none;color:#333;font-weight:500;transition:color 0.3s}body.dark-mode .nav-links a{color:#e0e0e0}.nav-links a:hover{color:#667eea}body.dark-mode .nav-links a:hover{color:#8b9aff}.dark-mode-toggle{background:transparent;border:2px solid #667eea;border-radius:50%;width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all 0.3s ease;padding:0}.dark-mode-toggle:hover{background:rgba(102,126,234,0.1);transform:scale(1.1)}body.dark-mode .dark-mode-toggle{border-color:#8b9aff}body.dark-mode .dark-mode-toggle:hover{background:rgba(139,154,255,0.2)}.username{font-weight:600;color:#667eea}.nav-currency{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:linear-gradient(135deg,#f39c12 0%,#e67e22 100%);color:white;border-radius:20px;font-weight:bold;font-size:0.95rem;box-shadow:0 2px 8px rgba(243,156,18,0.3);transition:transform 0.2s ease,box-shadow 0.2s ease}.nav-currency:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(243,156,18,0.4)}body.dark-mode .nav-currency{background:linear-gradient(135deg,#f1c40f 0%,#f39c12 100%);color:#1a1a1a}.user-menu-dropdown{position:relative;display:inline-block}.user-menu-trigger{display:flex;align-items:center;gap:0.75rem;padding:0.5rem 1rem;background:rgba(102,126,234,0.1);border:2px solid #667eea;border-radius:25px;cursor:pointer;transition:all 0.3s ease;font-size:0.95rem;font-weight:500;color:#333}.user-menu-trigger:hover{background:rgba(102,126,234,0.2);transform:translateY(-2px);box-shadow:0 4px 8px rgba(102,126,234,0.2)}body.dark-mode .user-menu-trigger{background:rgba(139,154,255,0.1);border-color:#8b9aff;color:#e0e0e0}body.dark-mode .user-menu-trigger:hover{background:rgba(139,154,255,0.2);box-shadow:0 4px 8px rgba(139,154,255,0.3)}.user-avatar-placeholder{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:0.9rem}body.dark-mode .user-avatar-placeholder{background:linear-gradient(135deg,#8b9aff 0%,#9b59b6 100%)}.user-username{font-weight:600}.dropdown-arrow{font-size:0.7rem;transition:transform 0.3s ease}.user-menu-dropdown.active .dropdown-arrow{transform:rotate(180deg)}.user-menu-dropdown-content{display:none;position:absolute;right:0;top:calc(100% + 0.5rem);background:white;min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,0.15);border-radius:8px;overflow:hidden;z-index:1000;animation:slideDown 0.2s ease-out}body.dark-mode .user-menu-dropdown-content{background:#2a2a3e;box-shadow:0 8px 24px rgba(0,0,0,0.5)}.user-menu-dropdown.active .user-menu-dropdown-content{display:block}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;text-decoration:none;color:#333;transition:background 0.2s ease;border:none;background:none;width:100%;text-align:left;font-size:0.95rem}.dropdown-item:hover{background:rgba(102,126,234,0.1)}body.dark-mode .dropdown-item{color:#e0e0e0}body.dark-mode .dropdown-item:hover{background:rgba(139,154,255,0.2)}.dropdown-item-danger{color:#e74c3c}.dropdown-item-danger:hover{background:rgba(231,76,60,0.1)}body.dark-mode .dropdown-item-danger{color:#ff6b6b}body.dark-mode .dropdown-item-danger:hover{background:rgba(255,107,107,0.2)}.dropdown-icon{font-size:1.1rem;width:20px;text-align:center}.dropdown-divider{height:1px;background:#e0e0e0;margin:0.5rem 0}body.dark-mode .dropdown-divider{background:#3a3a4e}.main-content{max-width:1200px;margin:2rem auto;padding:0 2rem;color:#1a1a1a;transition:background 0.3s ease,color 0.3s ease}body.dark-mode .main-content{background:transparent;color:#e0e0e0;padding:0}.container{background:white;padding:2rem;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,0.1);color:#1a1a1a;transition:background 0.3s ease,color 0.3s ease,box-shadow 0.3s ease}body.dark-mode .container{background:#2a2a3e;color:#e0e0e0;box-shadow:0 4px 6px rgba(0,0,0,0.5)}.container h1,.container h2,.container h3{color:#1a1a1a;transition:color 0.3s ease}body.dark-mode .container h1,body.dark-mode .container h2,body.dark-mode .container h3{color:#ffffff}.container p{color:#2d2d2d;transition:color 0.3s ease}body.dark-mode .container p{color:#d0d0d0}.hero{padding:4rem 2rem;color:white;max-width:1400px;margin:0 auto}.hero-container{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.hero-content{text-align:left}.hero-content h1{font-size:3.5rem;margin-bottom:1rem;font-weight:700;color:#ffffff;text-shadow:2px 2px 8px rgba(0,0,0,0.3),0 0 20px rgba(102,126,234,0.5)}body.dark-mode .hero-content h1{color:#ffffff;text-shadow:2px 2px 8px rgba(0,0,0,0.5),0 0 20px rgba(139,154,255,0.6)}.hero-content p{font-size:1.25rem;margin-bottom:1.5rem;opacity:0.95}.hero-stats{display:flex;gap:1.5rem;margin-bottom:2rem;flex-wrap:wrap}.stat-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border-radius:20px;font-size:0.95rem;font-weight:600;border:1px solid rgba(255,255,255,0.2)}.stat-indicator{font-size:1rem}.hero-buttons{display:flex;gap:1rem;flex-wrap:wrap}.hero-image{position:relative;display:flex;justify-content:center;align-items:center}.hero-chessboard-img{width:100%;max-width:600px;height:auto;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,0.3);transform:perspective(1000px) rotateY(-5deg) rotateX(5deg);transition:transform 0.3s ease}.hero-chessboard-img:hover{transform:perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.02)}.btn-guest{background:rgba(255,255,255,0.2);color:white;border:2px solid rgba(255,255,255,0.3);backdrop-filter:blur(10px)}.btn-guest:hover{background:rgba(255,255,255,0.3);border-color:rgba(255,255,255,0.5);transform:translateY(-2px)}@media (max-width:968px){.hero-container{grid-template-columns:1fr;gap:2rem;text-align:center}.hero-content{text-align:center}.hero-buttons{justify-content:center}.hero-chessboard-img{max-width:100%;transform:none}}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:4rem;padding:0 2rem;max-width:1200px;margin-left:auto;margin-right:auto}@media (max-width:992px){.features{grid-template-columns:repeat(2,1fr);gap:1.5rem}}@media (max-width:768px){.features{grid-template-columns:repeat(2,1fr);gap:1rem}}@media (max-width:480px){.features{grid-template-columns:1fr;gap:1rem}}.feature-card{background:white;padding:2rem;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,0.1);text-align:center;transition:background 0.3s ease,color 0.3s ease,box-shadow 0.3s ease,transform 0.3s ease}.feature-card:hover{transform:translateY(-8px);box-shadow:0 12px 24px rgba(0,0,0,0.15)}body.dark-mode .feature-card{background:#2a2a3e;box-shadow:0 4px 6px rgba(0,0,0,0.3);color:#e0e0e0}.feature-icon{font-size:3rem;margin-bottom:1rem}.feature-card h3{margin-bottom:1rem;color:#667eea;transition:color 0.3s ease}body.dark-mode .feature-card h3{color:#8b9aff}.feature-card p{color:#2d2d2d;transition:color 0.3s ease}body.dark-mode .feature-card p{color:#c0c0c0}.hero-slogan{font-size:1.3rem;font-weight:600;color:#5841d1;margin:0.5rem 0;letter-spacing:0.1em;text-transform:uppercase}body.dark-mode .hero-slogan{color:#8b9aff}.hero-subtitle{font-size:1.3rem;margin-bottom:2rem;opacity:0.95}.cta-section{text-align:center;margin-top:4rem;padding:3rem;background:white;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,0.1);transition:background 0.3s ease,color 0.3s ease,box-shadow 0.3s ease;max-width:1200px;margin-left:auto;margin-right:auto}body.dark-mode .cta-section{background:#2a2a3e;box-shadow:0 4px 6px rgba(0,0,0,0.3);color:#e0e0e0}.cta-section h2{color:#667eea;margin-bottom:1rem;transition:color 0.3s ease}body.dark-mode .cta-section h2{color:#8b9aff}.cta-section p{color:#666;margin-bottom:2rem;font-size:1.1rem;transition:color 0.3s ease}body.dark-mode .cta-section p{color:#c0c0c0}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:white!important;padding:2.5rem;padding-bottom:0;border-radius:20px;max-width:700px;width:90%;max-height:90vh;box-shadow:0 10px 40px rgba(0,0,0,0.2);position:relative;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}.modal-content::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#667eea 0%,#764ba2 100%)}.modal-content h2{color:#667eea;margin-bottom:0.5rem;font-size:1.8rem;font-weight:700;text-align:center}.modal-content p{color:#666;margin-bottom:2rem;text-align:center;font-size:1rem}.time-control-options{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-bottom:0;padding-bottom:120px}.time-control-btn{padding:1.8rem 1.5rem;border:2px solid transparent;border-radius:16px;background:linear-gradient(135deg,#ffffff 0%,#f8f9ff 100%);cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);text-align:center;position:relative;overflow:hidden;box-shadow:0 4px 12px rgba(102,126,234,0.15)}.time-control-btn::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);opacity:0;transition:opacity 0.3s ease;z-index:0}.time-control-btn:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 24px rgba(102,126,234,0.3);border-color:#667eea}.time-control-btn:hover::before{opacity:1}.time-control-btn.selected{border:2px solid #667eea;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,0.4)}.time-control-btn.selected strong,.time-control-btn.selected small{color:white}.time-control-btn.selected::before{opacity:0}.time-control-btn[data-mode="bullet"]{border-color:#9c27b0;background:linear-gradient(135deg,#f3e5f5 0%,#e1bee7 100%)}.time-control-btn[data-mode="bullet"]::before{background:linear-gradient(135deg,#9c27b0 0%,#7b1fa2 100%)}.time-control-btn[data-mode="blitz"]{border-color:#ff9800;background:linear-gradient(135deg,#fff3e0 0%,#ffe0b2 100%)}.time-control-btn[data-mode="blitz"]::before{background:linear-gradient(135deg,#ff9800 0%,#f57c00 100%)}.time-control-btn[data-mode="rapid"]{border-color:#2196f3;background:linear-gradient(135deg,#e3f2fd 0%,#bbdefb 100%)}.time-control-btn[data-mode="rapid"]::before{background:linear-gradient(135deg,#2196f3 0%,#1976d2 100%)}.time-control-btn[data-mode="classic"]{border-color:#4caf50;background:linear-gradient(135deg,#e8f5e9 0%,#c8e6c9 100%)}.time-control-btn[data-mode="classic"]::before{background:linear-gradient(135deg,#4caf50 0%,#388e3c 100%)}.time-control-btn strong{display:block;font-size:1.3rem;margin-bottom:0.5rem;color:#667eea;position:relative;z-index:1;transition:color 0.3s ease;font-weight:700}.time-control-btn[data-mode="bullet"] strong{color:#9c27b0}.time-control-btn[data-mode="blitz"] strong{color:#ff9800}.time-control-btn[data-mode="rapid"] strong{color:#2196f3}.time-control-btn[data-mode="classic"] strong{color:#4caf50}.time-control-btn:hover strong,.time-control-btn:hover small{color:white;position:relative;z-index:1}.time-control-btn small{display:block;font-size:0.85rem;color:#666;position:relative;z-index:1;transition:color 0.3s ease;margin-top:0.3rem}.time-control-btn[data-mode="bullet"] small{color:#7b1fa2}.time-control-btn[data-mode="blitz"] small{color:#f57c00}.time-control-btn[data-mode="rapid"] small{color:#1976d2}.time-control-btn[data-mode="classic"] small{color:#388e3c}.time-control-tabs{display:flex;gap:0.5rem;margin-bottom:1.5rem;border-bottom:2px solid #e0e0e0}.tab-btn{background:none;border:none;padding:0.75rem 1.5rem;font-size:1rem;font-weight:500;color:#666;cursor:pointer;border-bottom:3px solid transparent;transition:all 0.3s ease}.tab-btn:hover{color:#667eea;background:rgba(102,126,234,0.1)}.tab-btn.active{color:#667eea;border-bottom-color:#667eea;font-weight:600}body.dark-mode .time-control-tabs{border-bottom-color:#4a4a5e}body.dark-mode .tab-btn{color:#a0a0a0}body.dark-mode .tab-btn:hover{color:#8b9aff;background:rgba(139,154,255,0.1)}body.dark-mode .tab-btn.active{color:#8b9aff;border-bottom-color:#8b9aff}.time-control-tab-content{display:none}.time-control-tab-content.active{display:block}.time-control-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-top:1.5rem}.time-control-categories{display:flex;flex-direction:column;gap:2rem;margin-top:1.5rem}.time-category-section{display:flex;flex-direction:column;gap:1rem}.time-category-title{font-size:0.9rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#666;margin:0;padding-bottom:0.5rem;border-bottom:2px solid #e0e0e0;display:flex;align-items:center}body.dark-mode .time-category-title{color:#b0b0b0;border-bottom-color:#3a3a4e}.time-control-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}@media (max-width:768px){.time-control-row{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.time-control-row{grid-template-columns:1fr}}.custom-time-controls{padding:1.5rem 0}.time-control-slider{margin-bottom:2rem}.time-control-slider label{display:block;margin-bottom:0.5rem;font-weight:500;color:#333}.time-control-slider input[type="range"]{width:100%;height:8px;border-radius:5px;background:#e0e0e0;outline:none;-webkit-appearance:none;appearance:none}.time-control-slider input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;transition:all 0.2s ease}.time-control-slider input[type="range"]::-webkit-slider-thumb:hover{background:#5568d3;transform:scale(1.1)}.time-control-slider input[type="range"]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;border:none;transition:all 0.2s ease}.time-control-slider input[type="range"]::-moz-range-thumb:hover{background:#5568d3;transform:scale(1.1)}.custom-time-preview{background:#f8f9fa!important;padding:1.5rem;border-radius:10px;margin-bottom:1.5rem;text-align:center}.custom-time-preview p{margin:0.5rem 0;font-size:1.1rem}.custom-time-preview .estimated-duration{color:#666;font-size:0.9rem}body.dark-mode .time-control-slider label{color:#e0e0e0}body.dark-mode .time-control-slider input[type="range"]{background:#4a4a5e}body.dark-mode .time-control-slider input[type="range"]::-webkit-slider-thumb{background:#8b9aff}body.dark-mode .time-control-slider input[type="range"]::-webkit-slider-thumb:hover{background:#7a8aef}body.dark-mode .time-control-slider input[type="range"]::-moz-range-thumb{background:#8b9aff}body.dark-mode .time-control-slider input[type="range"]::-moz-range-thumb:hover{background:#7a8aef}body.dark-mode .custom-time-preview{background:#2a2a3e}body.dark-mode .custom-time-preview .estimated-duration{color:#a0a0a0}.game-type-selection{margin-bottom:2rem}.game-type-selection label{display:block;margin-bottom:1rem;font-weight:600;color:#667eea;font-size:1.1rem}.game-type-options{display:flex;gap:1rem;margin-bottom:1.5rem}.game-type-btn{flex:1;padding:2rem 1.5rem;border:3px solid #667eea;border-radius:16px;background:linear-gradient(135deg,#ffffff 0%,#f8f9ff 100%);cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);text-align:center;position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(102,126,234,0.2)}.game-type-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);transition:left 0.3s ease;z-index:0}.game-type-btn:hover::before{left:0}.game-type-btn:hover{transform:translateY(-4px);box-shadow:0 6px 20px rgba(102,126,234,0.4);border-color:#764ba2}.game-type-btn input[type="radio"]{position:absolute;opacity:0;cursor:pointer}.game-type-btn:has(input[type="radio"]:checked){border-color:#667eea!important;border-width:4px!important;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)!important;box-shadow:0 8px 24px rgba(102,126,234,0.5),0 0 0 3px rgba(102,126,234,0.2)!important;transform:scale(1.02)}.game-type-btn:has(input[type="radio"]:checked)::before{left:0;background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.05) 100%)}.game-type-btn:has(input[type="radio"]:checked) strong{color:white!important;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,0.2)}.game-type-btn:has(input[type="radio"]:checked) small{color:rgba(255,255,255,0.95)!important;font-weight:500}.game-type-btn:hover:has(input[type="radio"]:checked) strong,.game-type-btn:hover:has(input[type="radio"]:checked) small{color:white}body.dark-mode .game-type-btn:has(input[type="radio"]:checked){border-color:#8b9aff!important;border-width:4px!important;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)!important;box-shadow:0 8px 24px rgba(139,154,255,0.6),0 0 0 3px rgba(139,154,255,0.3)!important;transform:scale(1.02)}body.dark-mode .game-type-btn:has(input[type="radio"]:checked)::before{left:0;background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.05) 100%)}body.dark-mode .game-type-btn:has(input[type="radio"]:checked) strong,body.dark-mode .game-type-btn:has(input[type="radio"]:checked) small{color:white!important;text-shadow:0 2px 4px rgba(0,0,0,0.3)}.game-type-btn strong{display:block;font-size:1.4rem;margin-bottom:0.6rem;color:#667eea;position:relative;z-index:1;transition:color 0.3s ease;font-weight:700}.game-type-btn:hover strong{color:white}.game-type-btn small{display:block;font-size:0.95rem;color:#666;position:relative;z-index:1;transition:color 0.3s ease;line-height:1.4}.game-type-btn:hover small{color:rgba(255,255,255,0.9)}body.dark-mode .game-type-btn{background:linear-gradient(135deg,#2a2a3e 0%,#1f1f2e 100%);border-color:#8b9aff;box-shadow:0 2px 8px rgba(139,154,255,0.3)}body.dark-mode .game-type-btn::before{background:linear-gradient(135deg,#8b9aff 0%,#764ba2 100%)}body.dark-mode .game-type-btn:hover{box-shadow:0 6px 20px rgba(139,154,255,0.5);border-color:#a5b3ff}body.dark-mode .game-type-btn strong{color:#8b9aff}body.dark-mode .game-type-btn small{color:#b0b0b0}body.dark-mode .game-type-selection label{color:#8b9aff}.search-interface{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;justify-content:center;align-items:center;z-index:2000}.search-status-card{background:white;padding:3rem;border-radius:15px;box-shadow:0 8px 30px rgba(0,0,0,0.3);text-align:center;min-width:400px;max-width:500px}.search-status-card h3{color:#667eea;margin-bottom:2rem;font-size:1.5rem}.spinner-large{border:5px solid #f3f3f3;border-top:5px solid #667eea;border-radius:50%;width:60px;height:60px;animation:spin 1s linear infinite;margin:2rem auto}.search-status-card p{margin:1rem 0;color:#333;font-size:1.1rem}.search-details{color:#666!important;font-size:0.9rem!important;margin-top:0.5rem}.hidden{display:none!important}.btn{padding:0.75rem 1.5rem;border:none;border-radius:5px;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.3s;text-decoration:none;display:inline-block}.btn-primary{background:#667eea;color:white}.btn-primary:hover{background:#5568d3;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.2)}.btn-secondary{background:white;color:#667eea;border:2px solid #667eea}.btn-secondary:hover{background:#667eea;color:white}.btn-large{padding:1rem 2rem;font-size:1.25rem}.btn-block{width:100%}.auth-container{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 200px);padding:2rem}.auth-card{background:white;padding:2.5rem;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.2);width:100%;max-width:400px}@media (max-width:768px){.auth-container{padding:1rem;min-height:calc(100vh - 150px)}.auth-card{padding:2rem 1.5rem}.nav-container{flex-direction:column;gap:1rem}.nav-links{flex-wrap:wrap;justify-content:center}.main-content{padding:1rem}.hero-content h1{font-size:2rem}.hero-content p{font-size:1rem}.hero-buttons{flex-direction:column}.hero-buttons .btn{width:100%}.time-control-options{grid-template-columns:1fr;gap:1rem}.game-type-options{flex-direction:column;gap:1rem}.game-type-btn{padding:1.5rem 1rem}.time-control-btn{padding:1.5rem 1rem}.search-status-card{min-width:unset;width:90%;padding:2rem 1.5rem}}@media (max-width:480px){.auth-card{padding:1.5rem 1rem}.navbar{padding:0.75rem 1rem}.logo{font-size:1.2rem}.nav-links{gap:0.75rem;font-size:0.9rem}.hero-content h1{font-size:1.75rem}.modal-content{width:95%;padding:1.5rem}}.auth-card h2{margin-bottom:1.5rem;text-align:center;color:#667eea}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:0.5rem;font-weight:500;color:#333}.form-group input{width:100%;padding:0.75rem;border:2px solid #e0e0e0;border-radius:5px;font-size:1rem;transition:border-color 0.3s}.form-group input:focus{outline:none;border-color:#667eea}.password-input-wrapper{position:relative;display:flex;align-items:center}.password-input-wrapper input{padding-right:45px}.password-toggle{position:absolute;right:10px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#666;transition:color 0.3s}.password-toggle:hover{color:#667eea}.password-toggle:focus{outline:none}.eye-icon{user-select:none}.error-message{color:#e74c3c;margin-bottom:1rem;text-align:center;padding:10px;background:rgba(231,76,60,0.1);border-radius:5px;border-left:4px solid #e74c3c;display:none;min-height:0}.error-message:not(:empty){display:block}.success-message{color:#28a745;font-size:0.9rem;margin-top:0.5rem;padding:10px;background:#d4edda;border:1px solid #c3e6cb;border-radius:5px;text-align:center}.auth-link{text-align:center;margin-top:1rem}.auth-link a{color:#667eea;text-decoration:none}.lobby-container{max-width:1200px;margin:0 auto;padding:2rem;overflow-x:hidden}.welcome-header{text-align:center;margin-bottom:3rem;padding:2rem;background:white;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,0.1)}.welcome-header h1{font-size:2.5rem;color:#1a1a1a;margin-bottom:0.5rem;font-weight:700}.username-highlight{color:#667eea;font-weight:700}.welcome-subtitle{color:#2d2d2d;font-size:1.1rem;margin-top:0.5rem}.section-title{font-size:1.5rem;color:#1a1a1a;margin-bottom:1.5rem;font-weight:600;background:white;padding:1rem 1.5rem;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,0.1)}.next-challenge-section{margin-bottom:3rem}.featured-card{background:linear-gradient(135deg,#5a4fd8 0%,#6c5ce7 100%);color:white;padding:2rem;border-radius:16px;box-shadow:0 10px 30px rgba(90,79,216,0.3);transition:transform 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease}.featured-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgba(90,79,216,0.4)}.challenge-content{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem}.challenge-icon{font-size:3rem;line-height:1}.challenge-info h3{font-size:1.5rem;margin-bottom:0.5rem;font-weight:600;color:#ffffff!important}.challenge-info p{opacity:0.9;font-size:1rem;margin:0;color:rgba(255,255,255,0.9)!important}.btn-featured{background:rgba(255,255,255,0.2);color:white!important;font-weight:600;padding:1rem 2rem;border-radius:10px;width:100%;display:flex;align-items:center;justify-content:center;gap:0.5rem;transition:all 0.3s ease;border:2px solid rgba(255,255,255,0.4);backdrop-filter:blur(10px)}.btn-featured:hover{background:rgba(255,255,255,0.3);transform:scale(1.02);box-shadow:0 5px 15px rgba(0,0,0,0.3);border-color:rgba(255,255,255,0.6)}.btn-icon{font-size:1.2rem}.actions-section{margin-bottom:3rem}.actions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.action-card{background:white;padding:2rem 1.5rem;border-radius:12px;text-align:center;text-decoration:none;color:#1a1a1a;box-shadow:0 4px 6px rgba(0,0,0,0.1);transition:all 0.3s ease;border:2px solid transparent}.action-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.15);border-color:#667eea;color:#667eea}.action-card-primary{border-color:#667eea;background:linear-gradient(135deg,#ffffff 0%,#f8f9ff 100%)}body.dark-mode .action-card-primary{border-color:#8b9aff;background:linear-gradient(135deg,#2a2a3e 0%,#1a1a3e 100%)}.action-card-featured{border:3px solid #f39c12;background:linear-gradient(135deg,#ffffff 0%,#fff8e1 100%);box-shadow:0 6px 20px rgba(243,156,18,0.2);position:relative}.action-card-featured::before{content:'⭐';position:absolute;top:0.5rem;right:0.5rem;font-size:1.2rem}body.dark-mode .action-card-featured{border-color:#f1c40f;background:linear-gradient(135deg,#2a2a3e 0%,#3a2a1e 100%);box-shadow:0 6px 20px rgba(241,196,15,0.3)}.action-card-featured:hover{transform:translateY(-8px);box-shadow:0 10px 30px rgba(243,156,18,0.3)}body.dark-mode .action-card-featured:hover{box-shadow:0 10px 30px rgba(241,196,15,0.4)}.action-icon{font-size:2.5rem;margin-bottom:1rem;display:block}.action-card h3{font-size:1.1rem;margin-bottom:0.5rem;font-weight:600;color:#1a1a1a}.action-card p{font-size:0.9rem;color:#2d2d2d;margin:0}.action-card-with-badge{position:relative}.action-card-badge{position:absolute;top:10px;right:10px;background:#e74c3c;color:white;border-radius:50%;min-width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:bold;padding:0 6px;box-shadow:0 2px 6px rgba(0,0,0,0.3);animation:pulse 2s infinite;border:2px solid white;z-index:10}body.dark-mode .action-card-badge{border-color:#2a2a3e}.dev-badge{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)!important;color:white!important;border-radius:12px!important;min-width:60px!important;height:22px!important;font-size:0.7rem!important;font-weight:700!important;padding:0 8px!important;box-shadow:0 2px 8px rgba(245,158,11,0.4)!important;border:1px solid rgba(255,255,255,0.3)!important;letter-spacing:0.5px;text-transform:uppercase}body.dark-mode .dev-badge{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)!important;border-color:rgba(255,255,255,0.2)!important;box-shadow:0 2px 8px rgba(245,158,11,0.5)!important}.stats-section{margin-top:3rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}.stats-hud-section{margin-top:3rem;margin-bottom:2rem}.stats-hud-bar{display:flex;background:white;border-radius:16px;padding:1.5rem 2rem;box-shadow:0 4px 12px rgba(0,0,0,0.08);align-items:center;gap:2rem}body.dark-mode .stats-hud-bar{background:#2a2a3e;box-shadow:0 4px 12px rgba(0,0,0,0.3)}.stats-hud-winrate{flex:0 0 25%;text-align:center;padding-right:2rem;border-right:2px solid #e0e0e0}body.dark-mode .stats-hud-winrate{border-right-color:#3a3a4e}.winrate-value{font-size:3rem;font-weight:700;line-height:1;margin-bottom:0.5rem;color:#1a1a1a}body.dark-mode .winrate-value{color:#ffffff}body.dark-mode .winrate-value.text-success{color:#10b981}body.dark-mode .winrate-value.text-muted{color:#d1d5db}.winrate-label{font-size:0.85rem;text-transform:uppercase;letter-spacing:1px;color:#666;font-weight:600}body.dark-mode .winrate-label{color:#d1d5db}.stats-hud-counters{flex:1;display:flex;justify-content:space-around;align-items:center;gap:1.5rem}.hud-counter{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;border-radius:12px;background:#f8f9fa;flex:1;transition:transform 0.2s ease,box-shadow 0.2s ease}body.dark-mode .hud-counter{background:#1a1a2e}.hud-counter:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}.hud-counter-success{border-left:4px solid #10b981}.hud-counter-success i{color:#10b981;font-size:1.5rem}.hud-counter-neutral{border-left:4px solid #6b7280}.hud-counter-neutral i{color:#6b7280;font-size:1.5rem}.hud-counter-danger{border-left:4px solid #ef4444}.hud-counter-danger i{color:#ef4444;font-size:1.5rem}.counter-content{flex:1}.counter-value{font-size:1.8rem;font-weight:700;line-height:1;margin-bottom:0.25rem;color:#1a1a1a}body.dark-mode .counter-value{color:#e0e0e0}.counter-label{font-size:0.85rem;text-transform:uppercase;letter-spacing:0.5px;color:#666;font-weight:500}body.dark-mode .counter-label{color:#b0b0b0}.ghost-footer{margin-top:4rem;padding:1.5rem 0;background:transparent;border-top:1px solid rgba(0,0,0,0.05)}body.dark-mode .ghost-footer{border-top-color:rgba(255,255,255,0.05)}.footer-links{list-style:none;padding:0;margin:0}.footer-link{transition:color 0.2s ease}.footer-link:hover{color:#667eea!important;text-decoration:underline!important}body.dark-mode .footer-link:hover{color:#8b9aff!important}.footer-separator{opacity:0.4;user-select:none}.footer-social-icon{color:#666;font-size:1.1rem;transition:all 0.2s ease;text-decoration:none;opacity:0.7}body.dark-mode .footer-social-icon{color:#b0b0b0}.footer-social-icon:hover{color:#667eea!important;opacity:1;transform:translateY(-2px)}body.dark-mode .footer-social-icon:hover{color:#8b9aff!important}.footer-copyright{white-space:nowrap}.footer-version{opacity:0.5;font-size:0.85em;font-weight:400}@media (max-width:768px){.stats-hud-bar{flex-direction:column;gap:1.5rem;padding:1.5rem}.stats-hud-winrate{flex:1;width:100%;padding-right:0;padding-bottom:1.5rem;border-right:none;border-bottom:2px solid #e0e0e0}body.dark-mode .stats-hud-winrate{border-bottom-color:#3a3a4e}.stats-hud-counters{flex-direction:column;width:100%;gap:1rem}.hud-counter{width:100%}.winrate-value{font-size:2.5rem}}.stat-card{background:white;padding:2rem 1.5rem;border-radius:12px;text-align:center;box-shadow:0 4px 6px rgba(0,0,0,0.1);transition:all 0.3s ease;border-top:4px solid #667eea;color:#1a1a1a}.stat-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.15)}.stat-card-success{border-top-color:#10b981}.stat-card-danger{border-top-color:#ef4444}.stat-card-neutral{border-top-color:#6b7280}.stat-icon{font-size:2rem;margin-bottom:0.5rem;display:block}.stat-title{color:#1a1a1a;font-size:0.9rem;margin-bottom:0.5rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}.stat-value{font-size:2.5rem;font-weight:700;color:#1a1a1a;margin:0.5rem 0;line-height:1}.stat-label{font-size:0.85rem;color:#2d2d2d;margin:0}body.dark-mode .stat-card .stat-title,body.dark-mode .stat-card .stat-value{color:#ffffff!important}body.dark-mode .stat-card .stat-label{color:#cccccc!important}.spinner{border:3px solid #f3f3f3;border-top:3px solid #667eea;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:1rem auto}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.waiting-message{width:100%;text-align:center;margin-top:1rem;color:#667eea}@media (max-width:768px){.lobby-container{padding:1rem}.welcome-header h1{font-size:2rem}.challenge-content{flex-direction:column;text-align:center}.challenge-icon{font-size:2.5rem}.actions-grid{grid-template-columns:repeat(2,1fr);gap:1rem}.action-card{padding:1.5rem 1rem}.stats-grid{grid-template-columns:repeat(2,1fr);gap:1rem}.stat-card{padding:1.5rem 1rem}.stat-value{font-size:2rem}}@media (max-width:480px){.welcome-header h1{font-size:1.75rem}.actions-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr}}.main-content{background:white;padding:2rem;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,0.1);min-height:calc(100vh - 200px);transition:background 0.3s ease,color 0.3s ease,box-shadow 0.3s ease}body.dark-mode .main-content{background:#2a2a3e;box-shadow:0 4px 6px rgba(0,0,0,0.3)}.main-content>*{color:#1a1a1a}.main-content h1,.main-content h2,.main-content h3,.main-content h4,.main-content h5,.main-content h6{color:#1a1a1a}.main-content p,.main-content li,.main-content span{color:#2d2d2d}.white-bg,.container,.card,.panel{color:#1a1a1a}.white-bg h1,.white-bg h2,.white-bg h3,.container h1,.container h2,.container h3,.card h1,.card h2,.card h3{color:#1a1a1a}.white-bg p,.container p,.card p{color:#2d2d2d}.friends-container{background:white;padding:2rem;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,0.1);max-width:1200px;margin:0 auto}.friends-tabs{display:flex;gap:1rem;margin-bottom:2rem;border-bottom:2px solid #e0e0e0}.tab-btn{padding:0.75rem 1.5rem;border:none;background:none;cursor:pointer;font-size:1rem;color:#1a1a1a;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all 0.3s;position:relative;font-weight:500}.tab-btn:hover{color:#667eea}.tab-btn.active{color:#667eea;border-bottom-color:#667eea}.tab-btn-with-badge{display:flex;align-items:center;gap:0.5rem}.tab-notification-badge{background:#e74c3c;color:white;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:bold;padding:0 6px;box-shadow:0 2px 4px rgba(0,0,0,0.2);animation:pulse 2s infinite}body.dark-mode .tab-notification-badge{border:2px solid #1a1a2e}.tab-content{display:none}.tab-content.active{display:block}.friends-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem}.friend-card-enhanced{background:white;padding:1.5rem;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,0.1);transition:all 0.3s ease;border:2px solid transparent}.friend-card-enhanced:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.15);border-color:#667eea}.friend-header{display:flex;gap:1rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #e0e0e0}.friend-avatar-container{position:relative;flex-shrink:0}.friend-avatar-img{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid #667eea}.friend-avatar-placeholder{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;align-items:center;justify-content:center;color:white;font-size:1.5rem;font-weight:bold;border:3px solid #667eea}.online-status{position:absolute;bottom:2px;right:2px;width:14px;height:14px;border-radius:50%;border:2px solid white}.online-status.online{background-color:#10b981}.online-status.offline{background-color:#9ca3af}.friend-main-info{flex:1}.friend-main-info h3{margin:0 0 0.5rem 0;font-size:1.2rem}.friend-main-info h3 a{color:#1a1a1a;text-decoration:none;transition:color 0.3s}.friend-main-info h3 a:hover{color:#667eea}.friend-ratings{display:flex;gap:0.5rem;flex-wrap:wrap}.rating-badge{background:#f0f0f0;padding:0.25rem 0.75rem;border-radius:12px;font-size:0.85rem;font-weight:600;color:#667eea}.rating-badge-small{background:#f0f0f0;padding:0.2rem 0.6rem;border-radius:10px;font-size:0.8rem;font-weight:600;color:#1a1a1a;border:1px solid #e5e7eb}.friend-stats{margin-bottom:1rem;padding:0.75rem;background:#f8f9fa;border-radius:8px}.stat-item{display:flex;justify-content:space-between;align-items:center}.stat-label{color:#2d2d2d;font-size:0.9rem}.stat-value{font-weight:600;color:#1a1a1a}.friend-stats .stat-value{font-size:0.9rem;font-weight:500;color:#1a1a1a}.friend-actions{display:flex;gap:0.5rem;flex-wrap:wrap}.btn-small{padding:0.5rem 1rem;font-size:0.85rem}.btn-danger{background:#ef4444;color:white;border:none}.btn-danger:hover{background:#dc2626}.btn-success{background:#10b981;color:white;border:none}.btn-success:hover{background:#059669}.requests-list{display:flex;flex-direction:column;gap:1rem}.challenge-card{border-left:4px solid #667eea}.challenge-info{margin-top:0.5rem;font-size:0.9rem;color:#374151;font-weight:500}.request-card-enhanced{background:white;padding:1.5rem;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,0.1);display:flex;justify-content:space-between;align-items:center;transition:all 0.3s ease}.request-card-enhanced:hover{box-shadow:0 8px 20px rgba(0,0,0,0.15)}.request-info{display:flex;gap:1rem;align-items:center;flex:1}.request-avatar-container{position:relative;flex-shrink:0}.request-avatar-img{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid #667eea}.request-avatar-placeholder{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;align-items:center;justify-content:center;color:white;font-size:1.2rem;font-weight:bold;border:2px solid #667eea}.request-details h4{margin:0 0 0.5rem 0;font-size:1.1rem}.request-details h4 a{color:#1a1a1a;text-decoration:none;transition:color 0.3s;font-weight:600}.request-details h4 a:hover{color:#667eea}.request-rating{color:#374151;font-size:0.9rem;margin:0;font-weight:500}.request-ratings{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:0.25rem}.request-actions{display:flex;gap:0.5rem}.request-status{display:flex;align-items:center;gap:1rem}.status-badge{padding:0.5rem 1rem;border-radius:20px;font-size:0.85rem;font-weight:600}.status-badge.pending{background:#fef3c7;color:#92400e}.empty-state{text-align:center;color:#666;padding:2rem;font-style:italic}.error{color:#ef4444;text-align:center;padding:1rem}.requests-section h3{color:#333;margin-bottom:1rem;font-size:1.3rem}@media (max-width:768px){.friends-list{grid-template-columns:1fr}.friend-card-enhanced{padding:1rem}.friend-header{flex-direction:column;text-align:center}.friend-actions{justify-content:center}.request-card-enhanced{flex-direction:column;gap:1rem}.request-info{width:100%}.request-actions,.request-status{width:100%;justify-content:center}}.add-friend-form{max-width:400px;margin:2rem auto}.form-input{width:100%;padding:0.75rem;border:2px solid #e0e0e0;border-radius:5px;font-size:1rem;margin-bottom:1rem}.message{margin-top:1rem;padding:0.75rem;border-radius:5px}.message.success{background:#d4edda;color:#155724}.message.error{background:#f8d7da;color:#721c24}.tutorial-container{max-width:1200px;margin:0 auto;padding:2rem;background:white;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,0.1);min-height:calc(100vh - 200px)}.tutorial-header{text-align:center;margin-bottom:3rem}.tutorial-header{background:white;padding:2rem;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,0.1);margin-bottom:2rem}.tutorial-header h1{font-size:2.5rem;color:#1a1a1a;margin-bottom:0.5rem}.tutorial-subtitle{color:#2d2d2d;font-size:1.1rem}.tutorial-content{margin-bottom:3rem}.tutorial-section{margin-bottom:4rem}.section-title{font-size:1.8rem;color:#1a1a1a;margin-bottom:0.5rem;font-weight:600}.section-description{color:#2d2d2d;margin-bottom:2rem;font-size:1.1rem}.pieces-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:2rem}.piece-card{background:white;border-radius:12px;padding:1.5rem;box-shadow:0 4px 6px rgba(0,0,0,0.1);transition:transform 0.3s ease,box-shadow 0.3s ease}.piece-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.15)}.piece-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.piece-icon{font-size:2.5rem;line-height:1}.piece-header h3{font-size:1.5rem;color:#1a1a1a;margin:0}.piece-description{margin-bottom:1.5rem}.piece-description p{color:#2d2d2d;line-height:1.6;margin:0}.mini-board-container{display:flex;justify-content:center;margin:1.5rem 0}.mini-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:240px;height:240px;border:2px solid #333;border-radius:4px;overflow:hidden}.mini-square{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;transition:all 0.2s ease}.mini-square.light{background-color:#f0d9b5}.mini-square.dark{background-color:#b58863}.mini-piece{font-size:1.8rem;line-height:1;z-index:2;user-select:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.3));text-shadow:0 1px 2px rgba(0,0,0,0.5)}body.dark-mode .mini-piece{filter:drop-shadow(0 2px 4px rgba(0,0,0,0.8)) drop-shadow(0 0 2px rgba(255,255,255,0.3));text-shadow:0 2px 4px rgba(0,0,0,0.9),0 0 3px rgba(255,255,255,0.4)}body.dark-mode .mini-square.light{background-color:#d4a574!important;border:1px solid rgba(255,255,255,0.1)}body.dark-mode .mini-square.dark{background-color:#8b6f47!important;border:1px solid rgba(255,255,255,0.1)}body.dark-mode .mini-board{border-color:#ffffff!important;border-width:2px;box-shadow:0 0 10px rgba(255,255,255,0.1)}.enemy-piece{opacity:0.7}.move-highlight{background-color:#90ee90!important;box-shadow:inset 0 0 0 2px #4caf50}.capture-highlight{background-color:#ffcccb!important;box-shadow:inset 0 0 0 2px #f44336}.castling-highlight{background-color:#87ceeb!important;box-shadow:inset 0 0 0 2px #2196f3}.enpassant-highlight{background-color:#ffd700!important;box-shadow:inset 0 0 0 2px #ff9800}.captured-piece{opacity:0.3;position:relative}.interactive-board{cursor:pointer;transition:all 0.3s ease}.interactive-board.exercise-completed{border:3px solid #28a745;box-shadow:0 0 15px rgba(40,167,69,0.5)}.interactive-board.exercise-error{border:3px solid #dc3545;animation:shake 0.5s ease}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.draggable-piece{cursor:grab;transition:opacity 0.2s ease}.draggable-piece:active{cursor:grabbing}.mini-square.drop-target{background-color:rgba(102,126,234,0.3)!important;border:2px dashed #667eea}.mini-square.success-highlight{background-color:rgba(40,167,69,0.4)!important;animation:pulse-success 0.5s ease}@keyframes pulse-success{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}.in-check-highlight{border:3px solid #dc3545!important;box-shadow:0 0 10px rgba(220,53,69,0.6);animation:pulse-check 1s ease infinite}@keyframes pulse-check{0%,100%{box-shadow:0 0 10px rgba(220,53,69,0.6)}50%{box-shadow:0 0 20px rgba(220,53,69,0.9)}}.checkmate-highlight{border:3px solid #28a745!important;box-shadow:0 0 15px rgba(40,167,69,0.7);background-color:rgba(40,167,69,0.2)!important}.stalemate-highlight{border:3px solid #ffc107!important;box-shadow:0 0 15px rgba(255,193,7,0.7);background-color:rgba(255,193,7,0.2)!important}.controlled-square{background-color:rgba(255,193,7,0.3)!important;position:relative}.controlled-square::after{content:'✗';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#ffc107;font-size:1.5rem;font-weight:bold;opacity:0.7}.center-control-highlight{border:2px solid #667eea!important}.center-influence{background-color:rgba(102,126,234,0.15)!important}.exercise-hint{text-align:center;margin-top:1rem;padding:0.75rem;background:rgba(102,126,234,0.1);border-radius:8px;display:flex;align-items:center;justify-content:center;gap:0.5rem;font-size:0.95rem;color:#667eea;transition:all 0.3s ease}body.dark-mode .exercise-hint{background:rgba(139,154,255,0.15);color:#8b9aff}.exercise-hint.success-hint{background:rgba(40,167,69,0.15);color:#28a745;border:1px solid #28a745}body.dark-mode .exercise-hint.success-hint{background:rgba(40,167,69,0.25);color:#4caf50;border-color:#4caf50}.hint-icon{font-size:1.2rem}.hint-text{font-weight:500}.success-text{font-weight:600}.strategy-icon-container{margin-bottom:1rem}.captured-piece::after{content:'✕';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;color:#f44336;z-index:3}body.dark-mode .move-highlight{background-color:#2d5a2d!important;box-shadow:inset 0 0 0 2px #4caf50,0 0 8px rgba(76,175,80,0.5)}body.dark-mode .capture-highlight{background-color:#5a2d2d!important;box-shadow:inset 0 0 0 2px #f44336,0 0 8px rgba(244,67,54,0.5)}body.dark-mode .castling-highlight{background-color:#2d4a5a!important;box-shadow:inset 0 0 0 2px #2196f3,0 0 8px rgba(33,150,243,0.5)}body.dark-mode .enpassant-highlight{background-color:#5a4a2d!important;box-shadow:inset 0 0 0 2px #ff9800,0 0 8px rgba(255,152,0,0.5)}.arrow{position:absolute;font-size:1.5rem;color:#667eea;font-weight:bold;z-index:3;pointer-events:none;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.7;transform:scale(1.1)}}.promotion-option{animation:glow 2s ease-in-out infinite}@keyframes glow{0%,100%{box-shadow:0 0 5px rgba(33,150,243,0.5)}50%{box-shadow:0 0 15px rgba(33,150,243,0.8)}}.move-legend{display:flex;justify-content:center;gap:1.5rem;margin-top:1rem;font-size:0.9rem}.legend-item{display:flex;align-items:center;gap:0.5rem}.legend-color{width:20px;height:20px;border-radius:4px;display:inline-block}.move-color{background-color:#90ee90;border:2px solid #4caf50}.capture-color{background-color:#ffcccb;border:2px solid #f44336}.special-rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-bottom:2rem}.special-rule-card{background:white;border-radius:12px;padding:2rem;box-shadow:0 4px 6px rgba(0,0,0,0.1);transition:transform 0.3s ease,box-shadow 0.3s ease}.special-rule-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.15)}.rule-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.rule-icon{font-size:2rem}.rule-header h3{font-size:1.5rem;color:#333;margin:0}.rule-description{margin-bottom:1.5rem}.rule-description p{color:#666;line-height:1.6;margin-bottom:0.5rem}.rule-description p:last-child{margin-bottom:0}.strategy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}.strategy-card{background:white;border-radius:12px;padding:2rem;box-shadow:0 4px 6px rgba(0,0,0,0.1);text-align:center;transition:transform 0.3s ease,box-shadow 0.3s ease}.strategy-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.15)}.strategy-icon{font-size:3rem;margin-bottom:1rem}.strategy-icon-container{margin-bottom:1rem}.strategy-card h3{font-size:1.3rem;color:#333;margin-bottom:1rem}.strategy-card p{color:#666;line-height:1.6}.chess960-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}.chess960-card{background:white;border-radius:12px;padding:2rem;box-shadow:0 4px 6px rgba(0,0,0,0.1);transition:transform 0.3s ease,box-shadow 0.3s ease}.chess960-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.15)}.chess960-card .rule-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.chess960-card .rule-icon{font-size:2rem}.chess960-card .rule-header h3{font-size:1.5rem;color:#333;margin:0}.chess960-card .rule-description{margin-bottom:1.5rem}.chess960-card .rule-description p{color:#666;line-height:1.6;margin-bottom:0.5rem}.chess960-card .rule-description p:last-child{margin-bottom:0}.chess960-card .rule-description ul{margin:1rem 0;padding-left:1.5rem}.chess960-card .rule-description li{color:#666;line-height:1.6;margin-bottom:0.5rem}.chess960-card .rule-description strong{color:#333;font-weight:600}.tutorial-actions{display:flex;justify-content:center;gap:1rem;margin-top:3rem;padding-top:2rem;border-top:2px solid #e0e0e0}@media (max-width:768px){.tutorial-container{padding:1rem}.pieces-grid,.special-rules-grid,.strategy-grid,.chess960-content{grid-template-columns:1fr}.mini-board{width:200px;height:200px}.mini-piece{font-size:1.5rem}.tutorial-actions{flex-direction:column}.tutorial-actions .btn{width:100%}}body.dark-mode .welcome-header,body.dark-mode .feature-card,body.dark-mode .action-card:not(.action-card-primary):not(.action-card-featured),body.dark-mode .stat-card,body.dark-mode .friend-card-enhanced,body.dark-mode .piece-card,body.dark-mode .tutorial-header,body.dark-mode .special-rule-card,body.dark-mode .chess960-card{background:#2a2a3e;color:#e0e0e0;box-shadow:0 4px 6px rgba(0,0,0,0.5)}body.dark-mode .piece-card:hover,body.dark-mode .special-rule-card:hover,body.dark-mode .chess960-card:hover{box-shadow:0 8px 20px rgba(0,0,0,0.7)}body.dark-mode .piece-header h3,body.dark-mode .rule-header h3,body.dark-mode .chess960-card .rule-header h3{color:#ffffff!important}body.dark-mode .piece-description p,body.dark-mode .rule-description p,body.dark-mode .chess960-card .rule-description p{color:#d0d0d0!important}body.dark-mode .rule-description li,body.dark-mode .chess960-card .rule-description li{color:#d0d0d0!important}body.dark-mode .rule-description strong,body.dark-mode .chess960-card .rule-description strong{color:#ffffff!important}.move-legend{display:flex;justify-content:center;gap:1.5rem;margin-top:1rem;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;color:#666}.legend-color{width:20px;height:20px;border-radius:4px;display:inline-block}.move-color{background-color:#90ee90;border:2px solid #4caf50}.capture-color{background-color:#ffcccb;border:2px solid #f44336}body.dark-mode .legend-item{color:#d0d0d0}body.dark-mode .move-color{background-color:#2d5a2d;border-color:#4caf50;box-shadow:0 0 4px rgba(76,175,80,0.5)}body.dark-mode .capture-color{background-color:#5a2d2d;border-color:#f44336;box-shadow:0 0 4px rgba(244,67,54,0.5)}.notification-container{position:fixed;top:80px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:10px;max-width:400px}.notification{background:white;border-radius:12px;padding:1.25rem 1.5rem;box-shadow:0 8px 24px rgba(0,0,0,0.15),0 2px 8px rgba(0,0,0,0.1);display:flex;align-items:flex-start;gap:1rem;animation:slideInRight 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);min-width:320px;max-width:400px;position:relative;overflow:hidden;border:1px solid rgba(102,126,234,0.1);transition:transform 0.2s ease,box-shadow 0.2s ease}.notification:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,0.2),0 4px 12px rgba(0,0,0,0.15)}@keyframes slideInRight{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}.notification.challenge-notification{border-left:4px solid #667eea}.notification.info-notification{border-left:4px solid #17a2b8}.notification.success-notification{border-left:4px solid #28a745;background:linear-gradient(to right,#f0f9ff 0%,white 10%)}.notification.error-notification{border-left:4px solid #dc3545;background:linear-gradient(to right,#fff5f5 0%,white 10%)}.notification-content{flex:1}.notification-title{font-weight:600;margin-bottom:0.5rem;color:#1a1a1a;font-size:1rem;line-height:1.4;display:flex;align-items:center;gap:0.5rem}.notification-message{color:#555;font-size:0.9rem;line-height:1.5;margin:0}.notification-actions{display:flex;gap:0.5rem;margin-top:0.75rem}.notification-actions button{padding:0.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:0.9rem;font-weight:500}.notification-actions .btn-accept{background:#28a745;color:white}.notification-actions .btn-accept:hover{background:#218838}.notification-actions .btn-decline{background:#dc3545;color:white}.notification-actions .btn-decline:hover{background:#c82333}.notification-close{background:rgba(0,0,0,0.05);border:none;font-size:1.4rem;cursor:pointer;color:#999;padding:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 0.2s ease;flex-shrink:0;line-height:1}.notification-close:hover{color:#333;background:rgba(0,0,0,0.1);transform:scale(1.1)}body.dark-mode .notification{background:#2d2d3a;color:#e0e0e0;border-color:rgba(102,126,234,0.3)}body.dark-mode .notification.success-notification{background:linear-gradient(to right,rgba(40,167,69,0.1) 0%,#2d2d3a 10%)}body.dark-mode .notification.error-notification{background:linear-gradient(to right,rgba(220,53,69,0.1) 0%,#2d2d3a 10%)}body.dark-mode .notification-title{color:#e0e0e0}body.dark-mode .notification-message{color:#c0c0c0}body.dark-mode .notification-close{color:#b0b0b0;background:rgba(255,255,255,0.1)}body.dark-mode .notification-close:hover{color:#e0e0e0;background:rgba(255,255,255,0.2)}body.dark-mode .friends-container,body.dark-mode .tutorial-container,body.dark-mode .lobby-container{background:transparent;color:#e0e0e0}body.dark-mode .welcome-header h1{color:#ffffff}body.dark-mode .welcome-subtitle{color:#b0b0b0}body.dark-mode .action-card h3{color:#ffffff}body.dark-mode .action-card p{color:#b0b0b0}body.dark-mode .section-title{color:#ffffff}body.dark-mode .stat-title{color:#ffffff}body.dark-mode .stat-value{color:#ffffff}body.dark-mode .stat-label{color:#b0b0b0}body.dark-mode .strategy-card{background:#2a2a3e!important;color:#e0e0e0!important;box-shadow:0 4px 6px rgba(0,0,0,0.5)!important}body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,body.dark-mode h4,body.dark-mode h5,body.dark-mode h6{color:#ffffff!important}body.dark-mode p,body.dark-mode span:not(.dark-mode-icon),body.dark-mode li,body.dark-mode label{color:#d0d0d0!important}body.dark-mode .section-title{background:#2a2a3e!important;color:#ffffff!important}body.dark-mode .btn{transition:all 0.3s ease}body.dark-mode .btn-primary{background:#667eea;color:white}body.dark-mode .btn-primary:hover{background:#8b9aff}body.dark-mode .btn-secondary{background:#3a3a4e;color:#e0e0e0;border-color:#8b9aff}body.dark-mode .btn-secondary:hover{background:#4a4a5e;border-color:#a5b3ff;color:#ffffff}body.dark-mode .form-input,body.dark-mode input[type="text"],body.dark-mode input[type="email"],body.dark-mode input[type="password"],body.dark-mode textarea,body.dark-mode select{background:#1a1a2e!important;color:#e0e0e0!important;border-color:#4a4a5e!important}body.dark-mode .form-input:focus,body.dark-mode input:focus,body.dark-mode textarea:focus,body.dark-mode select:focus{border-color:#667eea!important;outline:none;background:#2a2a3e!important}body.dark-mode .auth-card{background:#2a2a3e!important;color:#e0e0e0!important;box-shadow:0 10px 30px rgba(0,0,0,0.5)!important}body.dark-mode .auth-card h2{color:#8b9aff!important}body.dark-mode .form-group label{color:#d0d0d0!important;font-weight:500}body.dark-mode .form-group input{background:#1a1a2e!important;color:#ffffff!important;border-color:#4a4a5e!important}body.dark-mode .form-group input:focus{background:#2a2a3e!important;border-color:#667eea!important;color:#ffffff!important}body.dark-mode .form-group input::placeholder{color:#888!important}body.dark-mode .password-toggle{color:#d0d0d0!important}body.dark-mode .password-toggle:hover{color:#8b9aff!important}body.dark-mode .auth-link{color:#d0d0d0!important}body.dark-mode .auth-link a{color:#8b9aff!important}body.dark-mode .auth-link a:hover{color:#a0b0ff!important}body.dark-mode .warning-message{background-color:#3d2e00!important;border-left-color:#ffc107!important;color:#ffd93d!important}body.dark-mode .warning-message a{color:#8b9aff!important}body.dark-mode .warning-message a:hover{color:#a0b0ff!important}body.dark-mode .modal-overlay{background:rgba(0,0,0,0.8)!important}body.dark-mode .modal-content{background:linear-gradient(135deg,#2a2a3e 0%,#1f1f2e 100%)!important;color:#e0e0e0!important;box-shadow:0 10px 40px rgba(0,0,0,0.5)}body.dark-mode .modal-content p{color:#d0d0d0!important}body.dark-mode .game-type-selection label{color:#d0d0d0!important;font-weight:600}body.dark-mode .time-control-btn{background:linear-gradient(135deg,#2a2a3e 0%,#1f1f2e 100%);border-color:#4a4a5e;color:#e0e0e0}body.dark-mode .time-control-btn strong{color:#8b9aff}body.dark-mode .time-control-btn small{color:#b0b0b0}body.dark-mode .time-control-btn:hover{border-color:#8b9aff;background:linear-gradient(135deg,#3a3a4e 0%,#2f2f3e 100%)}body.dark-mode .time-control-btn.selected{border-color:#8b9aff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white}body.dark-mode .time-control-btn.selected strong,body.dark-mode .time-control-btn.selected small{color:white}.modal-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:0;padding:1.5rem 2.5rem;border-top:1px solid rgba(0,0,0,0.08);position:sticky;bottom:0;background:white;z-index:10;margin-left:-2.5rem;margin-right:-2.5rem;margin-bottom:0;border-radius:0 0 20px 20px}body.dark-mode .modal-actions{border-top-color:rgba(255,255,255,0.08);background:linear-gradient(135deg,#2a2a3e 0%,#1f1f2e 100%)}body.dark-mode .modal-content::before{background:linear-gradient(90deg,#8b9aff 0%,#764ba2 100%)}body.dark-mode .modal-content h2{color:#8b9aff}body.dark-mode .modal-content p{color:#b0b0b0}body.dark-mode .time-control-btn{background:linear-gradient(135deg,#2a2a3e 0%,#1f1f2e 100%);border-color:#4a4a5e;box-shadow:0 4px 12px rgba(0,0,0,0.3)}body.dark-mode .time-control-btn[data-mode="bullet"]{border-color:#9c27b0;background:linear-gradient(135deg,#3a1a3e 0%,#2f0f2e 100%)}body.dark-mode .time-control-btn[data-mode="blitz"]{border-color:#ff9800;background:linear-gradient(135deg,#3e2a1a 0%,#2e1f0f 100%)}body.dark-mode .time-control-btn[data-mode="rapid"]{border-color:#2196f3;background:linear-gradient(135deg,#1a2a3e 0%,#0f1f2e 100%)}body.dark-mode .time-control-btn[data-mode="classic"]{border-color:#4caf50;background:linear-gradient(135deg,#1a3e1a 0%,#0f2e0f 100%)}body.dark-mode .time-control-btn:hover{box-shadow:0 8px 24px rgba(102,126,234,0.4);border-color:#8b9aff}body.dark-mode .time-control-btn strong{color:#8b9aff}body.dark-mode .time-control-btn[data-mode="bullet"] strong{color:#ba68c8}body.dark-mode .time-control-btn[data-mode="blitz"] strong{color:#ffb74d}body.dark-mode .time-control-btn[data-mode="rapid"] strong{color:#64b5f6}body.dark-mode .time-control-btn[data-mode="classic"] strong{color:#81c784}body.dark-mode .time-control-btn small{color:#b0b0b0}body.dark-mode .time-control-btn[data-mode="bullet"] small{color:#ce93d8}body.dark-mode .time-control-btn[data-mode="blitz"] small{color:#ffcc80}body.dark-mode .time-control-btn[data-mode="rapid"] small{color:#90caf9}body.dark-mode .time-control-btn[data-mode="classic"] small{color:#a5d6a7}body.dark-mode a:not(.logo):not(.username){color:#8b9aff!important}body.dark-mode a:not(.logo):not(.username):hover{color:#a0b0ff!important}body.dark-mode .logo{color:#8b9aff!important}body.dark-mode .logo-img{color:#8b9aff}body.dark-mode .username{color:#8b9aff!important}body.dark-mode table{background:#2a2a3e!important;color:#e0e0e0!important}body.dark-mode th,body.dark-mode td{border-color:#4a4a5e!important;color:#e0e0e0!important}body.dark-mode th{background:#1a1a2e!important}body.dark-mode .error-message{display:none;background:rgba(231,76,60,0.3)!important;color:#ff6b6b!important;border-color:#e74c3c!important;border-left:4px solid #e74c3c!important;padding:15px!important;border-radius:5px!important}body.dark-mode .error-message:not(:empty){display:block}body.dark-mode .success-message{background:rgba(40,167,69,0.3)!important;color:#51cf66!important;border-color:#28a745!important;border-left:4px solid #28a745!important;padding:15px!important;border-radius:5px!important}body.dark-mode .featured-card{background:linear-gradient(135deg,#4a4a6e 0%,#5a5a7e 100%)!important;color:white!important}body.dark-mode .tab-btn{color:#d0d0d0!important}body.dark-mode .tab-btn.active{color:#8b9aff!important;border-bottom-color:#8b9aff!important}body.dark-mode .search-status-card{background:#2a2a3e!important;color:#e0e0e0!important}body.dark-mode .friend-stats{background:#1a1a2e!important;color:#d0d0d0!important}body.dark-mode .rating-badge,body.dark-mode .rating-badge-small{background:#1a1a2e!important;color:#ffffff!important;border-color:#4a4a5e!important}body.dark-mode .challenge-info{color:#d1d5db!important;font-weight:500}body.dark-mode .rule-card{background:#2a2a3e!important;color:#e0e0e0!important}body.dark-mode .rule-header h3{color:#ffffff!important}body.dark-mode .rule-description p{color:#d0d0d0!important}.how-to-play-banner-container{text-align:center;margin:2rem auto;padding:0 1rem}.how-to-play-banner{display:inline-flex;align-items:center;gap:0.75rem;padding:0.75rem 2rem;background:rgba(102,126,234,0.1);border:1px solid rgba(102,126,234,0.2);border-radius:50px;text-decoration:none;color:#667eea;font-size:1.1rem;font-weight:500;box-shadow:0 2px 8px rgba(102,126,234,0.15);transition:all 0.3s ease;position:relative}.how-to-play-banner:hover{transform:translateY(-3px);box-shadow:0 4px 16px rgba(102,126,234,0.25);background:rgba(102,126,234,0.15);border-color:rgba(102,126,234,0.3);color:#5568d3}.how-to-play-banner:active{transform:translateY(-1px);box-shadow:0 2px 8px rgba(102,126,234,0.2)}.banner-icon{font-size:1.3rem;line-height:1}.banner-text{line-height:1.2}body.dark-mode .how-to-play-banner{background:rgba(139,154,255,0.15);border-color:rgba(139,154,255,0.3);color:#8b9aff;box-shadow:0 2px 8px rgba(139,154,255,0.2)}body.dark-mode .how-to-play-banner:hover{background:rgba(139,154,255,0.25);border-color:rgba(139,154,255,0.4);color:#a0b0ff;box-shadow:0 4px 16px rgba(139,154,255,0.3)}@media (max-width:768px){.how-to-play-banner{padding:0.65rem 1.5rem;font-size:1rem}.banner-icon{font-size:1.2rem}}@media (max-width:480px){.how-to-play-banner{padding:0.6rem 1.25rem;font-size:0.95rem;flex-direction:column;gap:0.5rem}.banner-text{text-align:center}}.friends-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding:20px 0}.friend-card-modern{background:white;border-radius:16px;padding:20px;box-shadow:0 4px 12px rgba(0,0,0,0.08);transition:transform 0.2s,box-shadow 0.2s;display:flex;flex-direction:column;gap:16px;position:relative}.friend-card-modern:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}.friend-card-avatar{position:relative;width:64px;height:64px;flex-shrink:0}.friend-card-avatar img,.friend-card-avatar .friend-avatar-placeholder{width:64px;height:64px;border-radius:50%;object-fit:cover}.friend-card-avatar .friend-avatar-placeholder{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:24px}.friend-card-avatar .status-indicator{position:absolute;bottom:2px;right:2px;width:16px;height:16px;border-radius:50%;border:3px solid white;z-index:10;box-shadow:0 2px 4px rgba(0,0,0,0.15)}.friend-card-avatar .status-indicator.online{background-color:#22c55e;border:3px solid white;box-shadow:0 0 0 2px white,0 2px 6px rgba(34,197,94,0.4)}.friend-card-avatar .status-indicator.offline{background-color:#9ca3af;border:3px solid white;box-shadow:0 0 0 2px white,0 2px 6px rgba(156,163,175,0.3)}.friend-card-avatar .status-indicator.ingame{background-color:#f59e0b;border:3px solid white;box-shadow:0 0 0 2px white,0 2px 6px rgba(245,158,11,0.4)}.friend-card-content{flex:1}.friend-card-header{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.friend-card-name{margin:0;font-size:18px;font-weight:600}.friend-card-name a{color:#1a1a1a;text-decoration:none;transition:color 0.2s;font-weight:600}.friend-card-name a:hover{color:#667eea}.friend-elo-badges{display:flex;gap:6px;flex-wrap:wrap}.elo-badge-pill{background:linear-gradient(135deg,#f8f9fa 0%,#ffffff 100%);color:#1a1a1a;padding:8px 14px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;border:2px solid #e5e7eb;display:inline-flex;align-items:center;gap:8px;box-shadow:0 2px 4px rgba(0,0,0,0.05);transition:all 0.2s ease}.elo-badge-pill:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,0.1);border-color:#d1d5db}.elo-icon{font-size:16px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.1))}.elo-label{display:none}.elo-value{font-size:14px;font-weight:700;color:#1a1a1a;letter-spacing:0.3px}.elo-badge-pill[title="Bullet"]{background:linear-gradient(135deg,#fee2e2 0%,#fecaca 100%);border-color:#fca5a5}.elo-badge-pill[title="Bullet"] .elo-value{color:#dc2626}.elo-badge-pill[title="Blitz"]{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border-color:#fcd34d}.elo-badge-pill[title="Blitz"] .elo-value{color:#d97706}.elo-badge-pill[title="Rapide"]{background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);border-color:#93c5fd}.elo-badge-pill[title="Rapide"] .elo-value{color:#2563eb}.face-to-face-stats{margin-top:12px}.face-to-face-label{font-size:13px;color:#374151;margin-bottom:6px;font-weight:600}.face-to-face-bar{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;display:flex;margin-bottom:6px}.face-to-face-segment{height:100%;transition:width 0.3s ease}.face-to-face-win{background:#10b981}.face-to-face-draw{background:#6b7280}.face-to-face-loss{background:#ef4444}.face-to-face-text{font-size:13px;display:flex;gap:8px;align-items:center;font-weight:500;color:#1a1a1a}.face-to-face-empty{font-size:12px;color:#9ca3af;font-style:italic}.friend-card-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:auto}.btn-action{width:44px;height:44px;border-radius:10px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;font-size:18px;position:relative}.btn-action-challenge{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;width:48px;box-shadow:0 2px 4px rgba(102,126,234,0.3)}.btn-action-challenge:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,0.4);background:linear-gradient(135deg,#7c8ef0 0%,#8655b8 100%)}.btn-action-message{background:#f3f4f6;color:#6b7280;border:1px solid #e5e7eb}.btn-action-message:hover{background:#e5e7eb;color:#374151;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}.btn-action-remove{background:transparent;color:#ef4444;border:2px solid #ef4444}.btn-action-remove:hover{background:#ef4444;color:white;transform:translateY(-2px);box-shadow:0 4px 12px rgba(239,68,68,0.3)}.empty-friends-state{text-align:center;padding:60px 20px;grid-column:1 / -1}.empty-icon{font-size:64px;color:#d1d5db;margin-bottom:20px}.empty-text{font-size:18px;color:#6b7280;margin-bottom:24px}.empty-requests-state{text-align:center;padding:60px 20px}.empty-requests-icon{font-size:64px;color:#d1d5db;margin-bottom:20px}.empty-requests-text{font-size:16px;color:#6b7280}.btn-request-action{width:40px;height:40px;border-radius:10px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;font-size:18px}.btn-request-accept{background:#10b981;color:white}.btn-request-reject{background:#ef4444;color:white}.btn-request-action:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}.add-friend-block{background:white;border-radius:16px;padding:24px;margin-bottom:24px;box-shadow:0 4px 12px rgba(0,0,0,0.08)}.block-title{font-size:20px;font-weight:600;margin-bottom:20px;color:#1a1a1a;display:flex;align-items:center}.input-group-search{display:flex;gap:12px}.form-input-search{flex:1;padding:12px 16px;border:2px solid #e5e7eb;border-radius:12px;font-size:16px;transition:border-color 0.2s}.form-input-search:focus{outline:none;border-color:#667eea}.btn-primary-search{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border:none;padding:12px 24px;border-radius:12px;font-weight:600;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s}.btn-primary-search:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,0.4)}.invite-link-container{display:flex;gap:12px;margin-bottom:12px}.invite-link-input{flex:1;padding:12px 16px;border:2px solid #e5e7eb;border-radius:12px;background:#f9fafb;font-size:14px;color:#6b7280}.btn-copy-link{width:48px;height:48px;border-radius:12px;border:none;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;font-size:18px}.btn-copy-link:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,0.4)}.invite-link-hint{font-size:13px;color:#374151;margin:0;font-weight:400}.recent-players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.recent-player-card{background:#f9fafb;border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform 0.2s,box-shadow 0.2s}.recent-player-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}.recent-player-avatar{position:relative;width:56px;height:56px}.recent-player-avatar img,.recent-player-avatar .recent-player-placeholder{width:56px;height:56px;border-radius:50%;object-fit:cover}.recent-player-placeholder{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:20px}.recent-player-info{text-align:center}.recent-player-info h4{margin:0 0 4px 0;font-size:16px;font-weight:600;color:#2c3e50}.recent-player-rating{margin:0;font-size:13px;color:#6b7280}body.dark-mode .friend-card-modern{background:#2a2a3e;box-shadow:0 4px 12px rgba(0,0,0,0.3)}body.dark-mode .friend-card-name a{color:#ffffff;font-weight:600}body.dark-mode .friend-card-name a:hover{color:#8b9aff}body.dark-mode .elo-badge-pill{background:linear-gradient(135deg,#1a1a2e 0%,#2a2a3e 100%);color:#e0e0e0;border-color:#4a4a5e;box-shadow:0 2px 4px rgba(0,0,0,0.3)}body.dark-mode .elo-badge-pill:hover{box-shadow:0 4px 8px rgba(0,0,0,0.5);border-color:#5a5a6e}body.dark-mode .elo-label{display:none}body.dark-mode .elo-value{color:#ffffff;font-weight:700}body.dark-mode .elo-badge-pill[title="Bullet"]{background:linear-gradient(135deg,#7f1d1d 0%,#991b1b 100%);border-color:#dc2626}body.dark-mode .elo-badge-pill[title="Bullet"] .elo-value{color:#fca5a5}body.dark-mode .elo-badge-pill[title="Blitz"]{background:linear-gradient(135deg,#78350f 0%,#92400e 100%);border-color:#f59e0b}body.dark-mode .elo-badge-pill[title="Blitz"] .elo-value{color:#fcd34d}body.dark-mode .elo-badge-pill[title="Rapide"]{background:linear-gradient(135deg,#1e3a8a 0%,#1e40af 100%);border-color:#3b82f6}body.dark-mode .elo-badge-pill[title="Rapide"] .elo-value{color:#93c5fd}body.dark-mode .face-to-face-label{color:#e0e0e0;font-weight:600}body.dark-mode .face-to-face-text{color:#ffffff;font-weight:500}body.dark-mode .friend-card-avatar .status-indicator{border:3px solid #2a2a3e}body.dark-mode .friend-card-avatar .status-indicator.online{background-color:#22c55e;border:3px solid #2a2a3e;box-shadow:0 0 0 2px #2a2a3e,0 2px 6px rgba(34,197,94,0.5)}body.dark-mode .friend-card-avatar .status-indicator.offline{background-color:#9ca3af;border:3px solid #2a2a3e;box-shadow:0 0 0 2px #2a2a3e,0 2px 6px rgba(156,163,175,0.4)}body.dark-mode .friend-card-avatar .status-indicator.ingame{background-color:#f59e0b;border:3px solid #2a2a3e;box-shadow:0 0 0 2px #2a2a3e,0 2px 6px rgba(245,158,11,0.5)}body.dark-mode .face-to-face-bar{background:#1a1a2e}body.dark-mode .btn-action-message{background:#1a1a2e;color:#b0b0b0;border-color:#4a4a5e}body.dark-mode .btn-action-message:hover{background:#2a2a3e;color:#e0e0e0;border-color:#5a5a6e}body.dark-mode .btn-action-remove{background:transparent;color:#f87171;border-color:#f87171}body.dark-mode .btn-action-remove:hover{background:#dc2626;color:white;border-color:#dc2626}body.dark-mode .empty-text,body.dark-mode .empty-requests-text{color:#d1d5db}body.dark-mode .empty-icon,body.dark-mode .empty-requests-icon{color:#6b7280}body.dark-mode .add-friend-block{background:#2a2a3e;box-shadow:0 4px 12px rgba(0,0,0,0.3)}body.dark-mode .block-title{color:#ffffff;font-weight:600}body.dark-mode .form-input-search{background:#1a1a2e;border-color:#4a4a5e;color:#e0e0e0}body.dark-mode .form-input-search:focus{border-color:#667eea}body.dark-mode .invite-link-input{background:#1a1a2e;border-color:#4a4a5e;color:#b0b0b0}body.dark-mode .invite-link-hint{color:#d1d5db}body.dark-mode .request-card-enhanced h4 a{color:#ffffff!important;font-weight:600}body.dark-mode .request-rating{color:#d1d5db!important;font-weight:500}body.dark-mode .challenge-info{color:#d1d5db!important;font-weight:500}body.dark-mode .recent-player-card{background:#1a1a2e}body.dark-mode .recent-player-info h4{color:#ffffff;font-weight:600}body.dark-mode .recent-player-rating{color:#d1d5db}body.color-blind-protanopia .alert-danger,body.color-blind-protanopia .text-danger,body.color-blind-protanopia .btn-danger,body.color-blind-protanopia .badge-danger{background-color:#4a90e2!important;color:#ffffff!important;border-color:#357abd!important}body.color-blind-protanopia .alert-success,body.color-blind-protanopia .text-success,body.color-blind-protanopia .btn-success,body.color-blind-protanopia .badge-success{background-color:#f39c12!important;color:#ffffff!important;border-color:#d68910!important}body.color-blind-protanopia .square.selected,body.color-blind-protanopia .square.highlight{background-color:#4a90e2!important;border:2px solid #357abd!important}body.color-blind-protanopia .square.last-move{background-color:#f39c12!important}body.color-blind-deuteranopia .alert-danger,body.color-blind-deuteranopia .text-danger,body.color-blind-deuteranopia .btn-danger,body.color-blind-deuteranopia .badge-danger{background-color:#5dade2!important;color:#ffffff!important;border-color:#3498db!important}body.color-blind-deuteranopia .alert-success,body.color-blind-deuteranopia .text-success,body.color-blind-deuteranopia .btn-success,body.color-blind-deuteranopia .badge-success{background-color:#f7dc6f!important;color:#333333!important;border-color:#f4d03f!important}body.color-blind-deuteranopia .square.selected,body.color-blind-deuteranopia .square.highlight{background-color:#5dade2!important;border:2px solid #3498db!important}body.color-blind-deuteranopia .square.last-move{background-color:#f7dc6f!important}body.color-blind-tritanopia .alert-danger,body.color-blind-tritanopia .text-danger,body.color-blind-tritanopia .btn-danger,body.color-blind-tritanopia .badge-danger{background-color:#e74c3c!important;color:#ffffff!important;border-color:#c0392b!important}body.color-blind-tritanopia .alert-success,body.color-blind-tritanopia .text-success,body.color-blind-tritanopia .btn-success,body.color-blind-tritanopia .badge-success{background-color:#27ae60!important;color:#ffffff!important;border-color:#229954!important}body.color-blind-tritanopia .square.selected,body.color-blind-tritanopia .square.highlight{background-color:#e74c3c!important;border:2px solid #c0392b!important}body.color-blind-tritanopia .square.last-move{background-color:#27ae60!important}body.dyslexia-font{font-family:'Lexend','Comic Sans MS','Verdana',sans-serif!important}body.dyslexia-font *{font-family:'Lexend','Comic Sans MS','Verdana',sans-serif!important;letter-spacing:0.02em;word-spacing:0.05em;line-height:1.6}body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}body.reduce-motion .piece{transition:none!important}.keyboard-move-input{display:none;margin-top:1rem;padding:0.75rem;border:2px solid #007bff;border-radius:0.25rem;font-size:1rem;width:100%;max-width:300px;background:#ffffff;color:#000000}body.keyboard-input-enabled .keyboard-move-input{display:block}body.dark-mode .keyboard-move-input{background:#2d2d2d;color:#ffffff;border-color:#4a9eff}.keyboard-move-input:focus{outline:none;border-color:#0056b3;box-shadow:0 0 0 0.2rem rgba(0,123,255,0.25)}.keyboard-move-input::placeholder{color:#6c757d}body.dark-mode .keyboard-move-input::placeholder{color:#adb5bd}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:70px;background:#ffffff;border-top:1px solid #e0e0e0;box-shadow:0 -2px 10px rgba(0,0,0,0.1);display:flex;justify-content:space-around;align-items:center;z-index:1000;padding:0.5rem 0;padding-bottom:env(safe-area-inset-bottom,0.5rem)}body.dark-mode .bottom-nav{background:#1a1a2e;border-top-color:#2d2d44;box-shadow:0 -2px 10px rgba(0,0,0,0.4)}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:#6c757d;flex:1;padding:0.5rem;transition:all 0.2s ease;position:relative;min-width:0}.bottom-nav-item i{font-size:24px;margin-bottom:0.25rem;transition:color 0.2s ease}.bottom-nav-label{font-size:0.7rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:color 0.2s ease}.bottom-nav-item.active{color:#667eea}body.dark-mode .bottom-nav-item.active{color:#8b9aff}.bottom-nav-item.active i{color:#667eea;transform:scale(1.1)}body.dark-mode .bottom-nav-item.active i{color:#8b9aff}.bottom-nav-item:active{transform:scale(0.95);opacity:0.8}body.dark-mode .bottom-nav-item{color:#adb5bd}body.dark-mode .bottom-nav-item:hover{color:#8b9aff}.bottom-nav-avatar,.bottom-nav-avatar-placeholder{width:28px;height:28px;border-radius:50%;margin-bottom:0.25rem;object-fit:cover;border:2px solid transparent;transition:all 0.2s ease}.bottom-nav-avatar-placeholder{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#ffffff;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:0.85rem}body.dark-mode .bottom-nav-avatar-placeholder{background:linear-gradient(135deg,#8b9aff 0%,#9d7aff 100%)}.bottom-nav-item.active .bottom-nav-avatar,.bottom-nav-item.active .bottom-nav-avatar-placeholder{border-color:#667eea;transform:scale(1.1)}body.dark-mode .bottom-nav-item.active .bottom-nav-avatar,body.dark-mode .bottom-nav-item.active .bottom-nav-avatar-placeholder{border-color:#8b9aff}.bottom-nav-badge{position:absolute;top:0.25rem;right:50%;transform:translateX(50%);background:#dc3545;color:#ffffff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:bold;border:2px solid #ffffff;padding:0;line-height:1}body.dark-mode .bottom-nav-badge{border-color:#1a1a2e}@media (max-width:767.98px){.main-content{padding-bottom:80px}}