:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh;display:block}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.feedback-button{position:fixed;bottom:24px;right:24px;width:60px;height:60px;background:linear-gradient(135deg,#1976d2,#1565c0);color:#fff;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px #1976d24d;transition:all .3s ease;z-index:1100;border:none;font-family:inherit}.feedback-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #1976d266;background:linear-gradient(135deg,#1565c0,#0d47a1)}.feedback-button:active{transform:translateY(0)}.feedback-button svg{width:20px;height:20px;margin-bottom:2px}.feedback-button-text{font-size:10px;font-weight:500;line-height:1}.feedback-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1200}.feedback-modal-content{background-color:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001a;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;animation:feedbackModalSlideIn .3s ease}@keyframes feedbackModalSlideIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.feedback-modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 16px;border-bottom:1px solid #e0e0e0}.feedback-modal-header h2{margin:0;color:#333;font-size:20px;font-weight:600}.feedback-close{font-size:24px;color:#666;cursor:pointer;line-height:1;transition:color .2s}.feedback-close:hover{color:#333}.feedback-modal-body{padding:24px}.feedback-modal-body p{margin:0 0 20px;color:#666;line-height:1.5}.feedback-field{margin-bottom:20px}.feedback-field label{display:block;margin-bottom:8px;color:#333;font-weight:500}.feedback-field select,.feedback-field input,.feedback-field textarea{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;font-family:inherit;transition:border-color .2s;box-sizing:border-box}.feedback-field select:focus,.feedback-field input:focus,.feedback-field textarea:focus{outline:none;border-color:#1976d2}.feedback-field textarea{resize:vertical;min-height:100px}.feedback-field small{display:block;margin-top:4px;color:#666;font-size:12px}.feedback-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.feedback-submit,.feedback-cancel{padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;font-family:inherit}.feedback-submit{background-color:#1976d2;color:#fff}.feedback-submit:hover{background-color:#1565c0}.feedback-submit:disabled{background-color:#ccc;cursor:not-allowed}.feedback-cancel{background-color:#f5f5f5;color:#333}.feedback-cancel:hover{background-color:#e0e0e0}.feedback-message{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-weight:500}.feedback-success{background-color:#e8f5e8;color:#2e7d32;border:1px solid #c8e6c9}.feedback-error{background-color:#ffebee;color:#c62828;border:1px solid #ffcdd2}@media (max-width: 768px){.feedback-button{bottom:20px;right:20px;width:56px;height:56px}.feedback-button-text{font-size:9px}.feedback-modal-content{width:95%;max-height:95vh}.feedback-modal-header,.feedback-modal-body{padding:20px}.feedback-actions{flex-direction:column}.feedback-submit,.feedback-cancel{width:100%}}@media (max-width: 480px){.feedback-button{bottom:16px;right:16px;width:52px;height:52px}.feedback-button svg{width:18px;height:18px}.feedback-button-text{font-size:8px}}body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:#e8f4fd!important;font-family:Arial,sans-serif}.home-page{position:fixed;inset:0;width:100vw;height:100vh;overflow-y:hidden}.main-content{margin-left:180px!important;margin-top:20px;padding:20px;transition:margin-left .3s;width:calc(100vw - 180px)!important;box-sizing:border-box}body.sidebar-collapsed .main-content{margin-left:60px;width:calc(100vw - 60px)!important}.welcome-section{text-align:center;margin-bottom:40px}.welcome-section h1{color:#333;font-size:2.5em;margin-bottom:10px}.welcome-section p{color:#666;font-size:1.2em}.game-options{max-width:800px;margin:0 auto 40px;background:linear-gradient(90deg,#e3f0ff,#90caf9);padding:30px;border-radius:10px;box-shadow:0 2px 10px #0000001a}.time-selection-container{display:flex;flex-direction:column;gap:20px;padding:20px;border-radius:15px;position:relative;overflow:hidden;max-width:600px;margin:0 auto}.time-selection-container:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border-radius:15px;z-index:0}.time-tabs{display:flex;gap:0;border-radius:12px;overflow:hidden;background:#ffffff26;padding:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 15px #0000001a;position:relative;z-index:1}.time-tab{background:transparent;color:#ffffffe6;border:none;padding:12px 20px;border-radius:8px;cursor:pointer;font-size:1em;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:center;flex:1;position:relative;overflow:hidden}.time-tab:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.time-tab:hover:before{left:100%}.time-tab:hover{background:#ffffff40;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.time-tab.active{background:linear-gradient(135deg,#fffffff2,#ffffffd9);color:#1976d2;transform:translateY(-2px);box-shadow:0 6px 20px #0003;font-weight:800}.time-content{flex:1;min-height:80px;display:flex;align-items:center;position:relative;z-index:1}.time-options{display:none;gap:15px;flex-wrap:wrap;justify-content:center;width:100%}.time-options.active{display:flex}.time-button{background:linear-gradient(135deg,#f8f9fa,#e9ecef);color:#495057;border:2px solid #dee2e6;padding:20px 24px;border-radius:12px;cursor:pointer;transition:all .3s ease;font-size:1.2em;font-weight:700;width:120px;height:60px;box-shadow:0 2px 4px #0000001a;text-shadow:0 1px 2px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;white-space:nowrap}.time-button:hover{background:linear-gradient(135deg,#e9ecef,#dee2e6);border-color:#2196f3;transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.time-button.selected{background:linear-gradient(135deg,#2196f3,#1976d2);color:#fff;border-color:#1976d2;transform:translateY(-1px);box-shadow:0 4px 12px #2196f366;text-shadow:0 1px 2px rgba(0,0,0,.2)}.play-button{background:linear-gradient(135deg,#1976d2,#1565c0);color:#fff;border:none;padding:16px 28px;border-radius:12px;font-size:1.1em;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:10px;white-space:nowrap;min-width:150px;justify-content:center;position:relative;z-index:1;box-shadow:0 4px 15px #1976d24d;overflow:hidden}.play-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .6s}.play-button:hover:before{left:100%}.play-button:hover{background:linear-gradient(135deg,#1565c0,#0d47a1);transform:translateY(-3px);box-shadow:0 8px 25px #1976d266}.stats-section{max-width:800px;margin:0 auto}.stats-section h2{color:#333;text-align:center;margin-bottom:30px}.home-page .stats-grid{display:flex;flex-direction:column;gap:12px;min-width:190px}.stat-card{background:linear-gradient(90deg,#e3f0ff,#90caf9);padding:20px 22px;border-radius:10px;box-shadow:0 2px 10px #0000001a;text-align:center}.stat-card i{font-size:1.9em;color:#1976d2;margin-bottom:9px}.stat-card h3{color:#333;margin:9px 0;font-size:1em}.stat-card p{color:#666;font-size:1.45em;font-weight:700;margin:0}@media (min-width: 1024px){.home-page .stats-grid{min-height:450px}.stat-card{display:flex;flex-direction:column;justify-content:center}}.message-count{background-color:#f44;color:#fff;border-radius:50%;padding:2px 6px;font-size:12px;position:relative;margin-left:8px;display:inline-block}.main-content-grid{display:grid;grid-template-columns:1fr 350px;gap:30px;max-width:1200px;margin:0 auto}#rankingsContainer{max-width:900px;margin:10px auto 0;overflow:hidden}html.no-scroll,body.no-scroll{overflow:hidden!important;height:100%!important}.left-column{display:flex;flex-direction:column;gap:30px}.game-stats-container{display:flex;gap:30px;justify-content:center;min-height:450px;align-items:flex-start}.game-options{order:2}.stats-section{order:1}.right-column{display:flex;flex-direction:column}.social-posts-section{background:linear-gradient(90deg,#e3f0ff,#90caf9);padding:25px;border-radius:15px;box-shadow:0 2px 10px #0000001a;height:450px;position:sticky;top:20px;position:relative;margin-top:-20px}.social-posts-section:before{content:"Coming Soon";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#1976d2f2;color:#fff;padding:15px 30px;border-radius:25px;font-size:1.2em;font-weight:700;z-index:10;box-shadow:0 4px 15px #0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.social-posts-section:after{content:"";position:absolute;inset:0;background:#ffffff1a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:15px;z-index:5;pointer-events:none}.social-posts-section h2{color:#1976d2;text-align:center;margin-bottom:20px;font-size:1.4em;font-weight:600}.social-posts-container{display:flex;flex-direction:column;gap:20px;max-height:380px;overflow-y:auto}.social-post{background:#fff;border-radius:12px;padding:16px;box-shadow:0 2px 8px #00000014;transition:transform .2s ease,box-shadow .2s ease;filter:blur(2px);opacity:.7;pointer-events:none}.social-post:hover{transform:none;box-shadow:0 2px 8px #00000014}.post-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.post-author{display:flex;align-items:center;gap:8px}.post-author i{font-size:1.2em;color:#1976d2}.author-name{font-weight:600;color:#333;font-size:.95em}.post-time{color:#666;font-size:.85em}.post-content{margin-bottom:12px}.post-content p{color:#333;line-height:1.4;margin:0;font-size:.95em}.post-actions{display:flex;gap:16px}.post-action{background:none;border:none;color:#666;cursor:pointer;padding:6px 8px;border-radius:6px;transition:all .2s ease;font-size:.9em;display:flex;align-items:center;gap:4px;filter:blur(1px);opacity:.6;pointer-events:none}.post-action:hover{background:none;color:#666}.post-action i{font-size:.9em}.load-more-posts{text-align:center;padding:10px 0}.load-more-btn{background:linear-gradient(135deg,#1976d2,#1565c0);color:#fff;border:none;padding:12px 20px;border-radius:8px;cursor:pointer;font-size:.9em;font-weight:600;transition:all .3s ease;display:flex;align-items:center;gap:8px;margin:0 auto;filter:blur(1px);opacity:.6;pointer-events:none}.load-more-btn:hover{background:linear-gradient(135deg,#1976d2,#1565c0);transform:none;box-shadow:none}.social-posts-container::-webkit-scrollbar{width:6px}.social-posts-container::-webkit-scrollbar-track{background:#ffffff4d;border-radius:3px}.social-posts-container::-webkit-scrollbar-thumb{background:#1976d24d;border-radius:3px}.social-posts-container::-webkit-scrollbar-thumb:hover{background:#1976d280}@media (max-width: 1023px){.main-content{margin-left:60px;padding:15px}.welcome-section h1{font-size:2.2em}.welcome-section p{font-size:1.1em}.game-options,.rankings-section{max-width:90%;padding:25px}.rankings-tabs{gap:0;padding:3px;border-radius:10px}.ranking-tab{padding:10px 16px;font-size:.9em;border-radius:6px}.ranking-content{padding:15px;min-height:180px}.current-rating{top:15px;right:15px}.rating-value{font-size:2em}.ranking-graph-container{height:100px}.stats-section{max-width:90%}.stats-grid{display:flex;flex-direction:column;gap:15px}.main-content-grid{grid-template-columns:1fr;gap:20px}.social-posts-section{position:static;max-height:400px}.social-posts-container{max-height:300px}}@media (max-width: 767px){.sidebar{width:40px!important;align-items:center!important}.sidebar .sidebar-logo{display:none!important}.sidebar button span{opacity:0!important;width:0!important;overflow:hidden!important}.sidebar .toggle-btn{margin-left:0!important}.main-content{margin-left:40px;padding:10px}.welcome-section{margin-bottom:30px}.welcome-section h1{font-size:1.8em;margin-bottom:8px}.welcome-section p{font-size:1em}.game-options{max-width:95%;padding:20px;margin-bottom:30px}.time-selection-container{flex-direction:column;gap:15px;padding:15px;border-radius:12px;max-width:95%}.time-tabs{gap:0;padding:3px;border-radius:10px}.time-tab{padding:10px 16px;font-size:.9em;border-radius:6px}.time-tab{padding:8px 12px;font-size:.8em}.time-content{min-height:60px}.time-options{gap:12px}.time-button{padding:18px 20px;font-size:1.1em;width:110px;height:55px;border-radius:10px;display:flex;align-items:center;justify-content:center;white-space:nowrap}.play-button{padding:12px 20px;font-size:1em;min-width:120px}.stats-section{max-width:95%}.stats-section h2{font-size:1.3em;margin-bottom:20px}.stat-card{padding:18px}.stat-card i{font-size:1.8em}.stat-card h3{font-size:1em}.stat-card p{font-size:1.3em}.main-content-grid{grid-template-columns:1fr;gap:15px}.game-stats-container{flex-direction:column;gap:20px;align-items:center}.home-page .stats-grid{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;min-width:auto}.social-posts-section{position:static;padding:20px;height:280px}.social-posts-container{max-height:200px}.social-post{padding:12px}.post-actions{gap:12px}}@media (max-width: 479px){.main-content{padding:8px}.welcome-section h1{font-size:1.6em}.game-options{padding:15px}.time-selection-container{padding:12px;gap:12px;border-radius:10px;max-width:98%}.time-tabs{gap:0;padding:2px;border-radius:8px}.time-tab{padding:8px 12px;font-size:.8em;border-radius:5px}.time-tab{padding:6px 10px;font-size:.75em}.time-button{padding:16px 18px;font-size:1em;width:100px;height:50px;border-radius:8px;display:flex;align-items:center;justify-content:center;white-space:nowrap}.play-button{padding:10px 16px;font-size:.9em;min-width:100px}.stat-card{padding:15px}.social-posts-section{height:200px}}body{margin:0;font-family:sans-serif;height:100vh;background-color:#f5f5f5;overflow-x:hidden;display:block}.sidebar{position:fixed;left:0;top:0;height:100vh;width:160px;background-color:#0d47a1;color:#fff;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;transition:transform .3s ease;z-index:1000;border-radius:0 15px 15px 0}.sidebar-logo{text-align:center;margin-bottom:30px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.1);width:100%}.logo-link{text-decoration:none;color:inherit;display:block;transition:transform .3s ease}.logo-link:hover{transform:scale(1.05)}.kingsclash-logo{font-family:Times New Roman,serif;font-weight:700;letter-spacing:0px;text-align:center;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;box-sizing:border-box}.kingsclash-text{font-size:19px!important;color:#fff!important;line-height:1;margin:0 auto;text-align:center;width:100%;letter-spacing:0px;box-sizing:border-box;white-space:nowrap;display:block}.kingsclash-logo .dot-net{color:#4fc3f7!important;font-weight:600;font-size:10px!important;margin:0;text-align:center;width:100%;padding-right:0;box-sizing:border-box;align-self:center}.sidebar-buttons{flex:1;display:flex;flex-direction:column;gap:10px;align-items:center}.sidebar.collapsed{width:40px;align-items:center}.toggle-btn{font-size:24px;color:#fff;cursor:pointer;margin-bottom:10px;margin-left:16px;transition:all .3s ease}.sidebar.collapsed .toggle-btn{margin-left:0}.sidebar-footer{margin-bottom:20px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative}.sidebar button{width:120px;padding:10px;background-color:#0a3d91;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;transition:all .3s ease;display:flex;justify-content:center;align-items:center;margin:0;position:relative;overflow:hidden}.sidebar.collapsed button{width:30px;padding:10px;margin-left:0}.sidebar button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.sidebar button:hover:before{left:100%}.sidebar button:hover{background-color:#0d47a1;transform:translateY(-2px);box-shadow:0 4px 15px #0d47a14d}.sidebar button span{transition:opacity .3s,width .3s;white-space:nowrap}.sidebar.collapsed button span{opacity:0;width:0;overflow:hidden}.sidebar.collapsed .sidebar-logo{display:none}a{text-decoration:none}.main-content{flex:1;padding:20px;box-sizing:border-box;max-width:100vw}@media (max-width: 767px){.sidebar{width:40px!important;align-items:center!important;padding:10px!important;z-index:1001!important}.sidebar-logo{display:none!important}.sidebar button{width:30px!important;padding:10px!important}.sidebar button span{opacity:0!important;width:0!important;overflow:hidden!important}.toggle-btn{margin-left:0!important;margin-bottom:15px!important}.main-content{margin-left:40px!important;width:calc(100% - 40px)!important;padding:10px!important}.sidebar:not(.collapsed){width:100vw!important;height:100vh!important;padding:20px!important;z-index:1002!important;position:fixed!important;top:0!important;left:0!important;border-radius:0!important;overflow-y:auto!important}.sidebar:not(.collapsed) .sidebar-logo{display:block!important}.sidebar:not(.collapsed) button{width:120px!important;margin:5px 0!important}.sidebar:not(.collapsed) button span{opacity:1!important;width:auto!important}.sidebar:not(.collapsed) .toggle-btn{margin-left:16px!important;position:absolute!important;top:20px!important;right:20px!important;font-size:28px!important}body:not(.sidebar-collapsed) .main-content{margin-left:40px!important;width:calc(100% - 40px)!important}}@media (min-width: 768px) and (max-width: 1023px){.main-content{margin-left:60px;width:calc(100% - 60px);padding:15px}body.sidebar-collapsed .main-content{margin-left:40px;width:calc(100% - 40px)}}.user-circle{position:fixed;top:20px;right:20px;width:50px;height:50px;background:linear-gradient(135deg,#1976d2,#1565c0);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;cursor:pointer;z-index:1000;box-shadow:0 2px 5px #0003;transition:transform .2s ease,box-shadow .3s ease,background .3s ease;will-change:transform;backface-visibility:hidden}.user-circle:hover{transform:translateY(-2px);box-shadow:0 6px 16px #1976d259;background:linear-gradient(135deg,#1565c0,#0d47a1)}.user-circle:active{transform:translateY(0)}.user-dropdown{position:fixed;top:80px;right:20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;z-index:1000;min-width:200px;padding:8px 0;display:none}.user-dropdown.show{display:block}.user-dropdown button{display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;background:none;border:none;color:#333;cursor:pointer;transition:background-color .2s;text-align:left;font-size:14px}.user-dropdown button:hover{background-color:#f0f0f0}.user-dropdown button i{width:20px;text-align:center}.friend-request-badge{position:absolute;top:-5px;right:-5px;background-color:#f44;color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px}.friend-request-count,.online-friends-count,.user-dropdown .message-count,.challenges-count,.active-games-count{background-color:#4caf50!important;color:#fff!important;padding:2px 6px!important;border-radius:10px!important;font-size:.8em!important;margin-left:auto!important;position:static!important;top:auto!important;right:auto!important;min-width:auto!important;text-align:left!important}.hidden{display:none!important}.user-dropdown .friend-request-count,.user-dropdown .message-count,.user-dropdown .online-friends-count,.user-dropdown .challenges-count,.user-dropdown .active-games-count{background-color:#f44!important;color:#fff!important;padding:2px 6px!important;border-radius:10px!important;font-size:.8em!important;margin-left:auto!important;position:static!important;top:auto!important;right:auto!important;min-width:auto!important;text-align:left!important;width:auto!important;height:auto!important}.online-friends i{color:#4caf50;font-size:.8em}.messages i{color:#2196f3;font-size:.9em}.logout{border-top:1px solid #eee!important;margin-top:8px;color:#dc3545!important}.logout:hover{background-color:#fff5f5!important}.userCircle-modal{display:none;position:fixed;z-index:1001;left:0;top:0;width:100%;height:100%;background-color:#00000080}.userCircle-modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border-radius:12px;width:90%;max-width:600px;position:relative;box-shadow:0 4px 20px #00000026}.challenges-list{max-height:60vh;overflow-y:auto;padding:15px;background-color:#f8f9fa;border-radius:8px;margin:10px}.challenge-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background-color:#fff;border-radius:8px;margin-bottom:10px;box-shadow:0 2px 4px #0000000d;transition:transform .2s ease,box-shadow .2s ease}.challenge-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.challenge-item:last-child{margin-bottom:0}.challenge-info{display:flex;flex-direction:column;gap:8px;flex:1;margin-right:20px}.challenge-details{display:flex;gap:15px;color:#7f8c8d;font-size:.95em}.color-info{display:flex;align-items:center;gap:8px}.color-info:before{content:"";font-family:"Font Awesome 5 Free";font-weight:900;color:#9b59b6}.challenger{font-weight:600;color:#2c3e50;font-size:1.1em;display:flex;align-items:center;gap:8px}.challenger:before{content:"";font-family:"Font Awesome 5 Free";font-weight:900;color:#3498db}.time-control{color:#7f8c8d;font-size:.95em;display:flex;align-items:center;gap:8px}.time-control:before{content:"";font-family:"Font Awesome 5 Free";font-weight:900;color:#e67e22}.challenge-actions{display:flex;gap:10px;flex-shrink:0}.accept-btn,.decline-btn{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:.95em;font-weight:500;transition:all .2s ease;box-shadow:0 2px 4px #0000001a;white-space:nowrap}.accept-btn{background-color:#2ecc71;color:#fff}.accept-btn:hover{background-color:#27ae60;transform:translateY(-1px);box-shadow:0 4px 8px #2ecc7133}.decline-btn{background-color:#e74c3c;color:#fff}.decline-btn:hover{background-color:#c0392b;transform:translateY(-1px);box-shadow:0 4px 8px #e74c3c33}.accept-btn i,.decline-btn i{font-size:1.1em}.no-challenges{text-align:center;color:#7f8c8d;padding:30px 20px;background-color:#fff;border-radius:8px;margin:10px;font-size:1.1em;display:flex;flex-direction:column;align-items:center;gap:10px}.no-challenges:before{content:"";font-family:"Font Awesome 5 Free";font-weight:900;font-size:2em;color:#bdc3c7}.challenges-list::-webkit-scrollbar{width:8px}.challenges-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.challenges-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.challenges-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.active-games-list{max-height:60vh;overflow-y:auto;padding:15px;background-color:#f8f9fa;border-radius:8px;margin:10px}.game-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background-color:#fff;border-radius:8px;margin-bottom:10px;box-shadow:0 2px 4px #0000000d;transition:transform .2s ease,box-shadow .2s ease}.game-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.game-item .game-info{display:flex;flex-direction:column;gap:8px;flex:1;margin-right:20px}.game-details{display:flex;gap:15px;color:#7f8c8d;font-size:.95em}.game-item .opponent{font-weight:600;color:#2c3e50;font-size:1.1em;display:flex;align-items:center;gap:8px}.continue-btn{padding:8px 16px;background-color:#2ecc71;color:#fff;border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:.95em;font-weight:500;transition:all .2s ease;box-shadow:0 2px 4px #0000001a;white-space:nowrap}.continue-btn:hover{background-color:#27ae60;transform:translateY(-1px);box-shadow:0 4px 8px #2ecc7133}.no-games{text-align:center;color:#7f8c8d;padding:30px 20px;background-color:#fff;border-radius:8px;margin:10px;font-size:1.1em;display:flex;flex-direction:column;align-items:center;gap:10px}.no-games:before{content:"";font-family:"Font Awesome 5 Free";font-weight:900;font-size:2em;color:#bdc3c7}.online-friends-list{max-height:60vh;overflow-y:auto;padding:15px;background-color:#f8f9fa;border-radius:8px;margin:10px}.online-friend-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background-color:#fff;border-radius:8px;margin-bottom:10px;box-shadow:0 2px 4px #0000000d;transition:transform .2s ease,box-shadow .2s ease}.online-friend-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.online-friend-item:last-child{margin-bottom:0}.online-friend-info{display:flex;flex-direction:column;gap:8px;flex:1;margin-right:20px}.online-friend-name{font-weight:600;color:#2c3e50;font-size:1.1em;display:flex;align-items:center;gap:8px}.online-friend-name:before{content:"";font-family:"Font Awesome 5 Free";font-weight:900;color:#3498db}.online-friend-rating{color:#7f8c8d;font-size:.95em;display:flex;align-items:center;gap:8px}.online-friend-rating:before{content:"";font-family:"Font Awesome 5 Free";font-weight:900;color:#f39c12}.challenge-btn{padding:10px 20px!important;background-color:#4caf50!important;color:#fff!important;border:none!important;border-radius:5px!important;cursor:pointer!important;display:inline-block!important;text-align:center!important;font-size:14px!important;font-weight:400!important;transition:background-color .3s!important;text-decoration:none!important;white-space:nowrap!important}.challenge-btn:hover{background-color:#45a049!important}.challenge-btn i{font-size:1.1em}.no-friends{text-align:center;color:#7f8c8d;padding:30px 20px;background-color:#fff;border-radius:8px;margin:10px;font-size:1.1em;display:flex;flex-direction:column;align-items:center;gap:10px}.no-friends:before{content:"";font-family:"Font Awesome 5 Free";font-weight:900;font-size:2em;color:#bdc3c7}.friend-requests-list{max-height:60vh;overflow-y:auto;padding:15px;background-color:#f8f9fa;border-radius:8px;margin:10px}.friend-request-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background-color:#fff;border-radius:8px;margin-bottom:10px;box-shadow:0 2px 4px #0000000d;transition:transform .2s ease,box-shadow .2s ease}.friend-request-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.friend-request-item:last-child{margin-bottom:0}.friend-request-info{display:flex;align-items:center;gap:12px;flex:1;margin-right:20px}.friend-request-avatar{width:45px;height:45px;background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2em;box-shadow:0 2px 4px #3498db4d}.friend-request-details{display:flex;flex-direction:column;gap:6px}.friend-request-name{font-weight:600;color:#2c3e50;font-size:1.1em;display:flex;align-items:center;gap:8px}.friend-request-name:before{content:"";font-family:"Font Awesome 5 Free";font-weight:900;color:#3498db}.friend-request-rating{color:#7f8c8d;font-size:.95em;display:flex;align-items:center;gap:8px}.friend-request-rating:before{content:"";font-family:"Font Awesome 5 Free";font-weight:900;color:#f39c12}.friend-request-actions{display:flex;gap:10px;flex-shrink:0}.friend-request-actions .accept-btn,.friend-request-actions .reject-btn{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:.95em;font-weight:500;transition:all .2s ease;box-shadow:0 2px 4px #0000001a;white-space:nowrap}.friend-request-actions .accept-btn{background-color:#2ecc71;color:#fff}.friend-request-actions .accept-btn:hover{background-color:#27ae60;transform:translateY(-1px);box-shadow:0 4px 8px #2ecc7133}.friend-request-actions .reject-btn{background-color:#e74c3c;color:#fff}.friend-request-actions .reject-btn:hover{background-color:#c0392b;transform:translateY(-1px);box-shadow:0 4px 8px #e74c3c33}.friend-request-actions .accept-btn i,.friend-request-actions .reject-btn i{font-size:1.1em}.no-requests{text-align:center;color:#7f8c8d;padding:30px 20px;background-color:#fff;border-radius:8px;margin:10px;font-size:1.1em;display:flex;flex-direction:column;align-items:center;gap:10px}.no-requests:before{content:"";font-family:"Font Awesome 5 Free";font-weight:900;font-size:2em;color:#bdc3c7}.rankings-component{width:100%;max-width:100%;margin:0 0 20px;background:linear-gradient(90deg,#e3f0ff,#90caf9);border-radius:10px;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif;padding:20px;box-sizing:border-box}.profile-layout .rankings-component{max-width:100%;width:100%}.center-section .profile-layout .rankings-component{max-width:100%!important;width:100%!important}.rankings-header{margin-bottom:20px;text-align:center}.rankings-header h2{font-size:1.6em;font-weight:800;color:#fff;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.2)}.rankings-tabs{display:flex;gap:0;margin-bottom:20px;justify-content:center;flex-wrap:wrap;border-radius:12px;overflow:hidden;background:#ffffff26;padding:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 15px #0000001a;position:relative;z-index:1}.ranking-tab{background:transparent;color:#ffffffe6;border:none;padding:12px 20px;border-radius:8px;cursor:pointer;font-size:1em;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:center;flex:1;position:relative;overflow:hidden;display:flex;align-items:center;gap:8px;justify-content:center}.ranking-tab:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.ranking-tab:hover:before{left:100%}.ranking-tab:hover{background:#ffffff40;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.ranking-tab.active{background:linear-gradient(135deg,#fffffff2,#ffffffd9);color:#1976d2;transform:translateY(-2px);box-shadow:0 6px 20px #0003;font-weight:800}.ranking-tab i{font-size:1.1em}.ranking-content{position:relative;background:#fffffff2;border-radius:12px;padding:20px;box-shadow:0 4px 15px #0000001a;min-height:160px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow-x:hidden;overflow-y:hidden}.current-rating{position:absolute;top:20px;right:20px;text-align:center;z-index:2}.rating-display{margin-bottom:15px}.rating-value{display:block;font-size:2.5em;font-weight:800;color:#1976d2;line-height:1}.rating-label{display:block;font-size:.9em;color:#666;font-weight:600;margin-top:5px}.rating-stats{display:flex;gap:20px}.stat-item{text-align:center}.stat-value{display:block;font-size:1.2em;font-weight:700;color:#333}.stat-label{display:block;font-size:.8em;color:#666;margin-top:2px}.ranking-graph-container{width:100%;min-height:200px;display:flex;align-items:center;justify-content:center;position:relative}#rankingChart{max-width:100%;max-height:100%}#rankingChartReact{max-width:100%;width:100%!important;height:100%!important;display:block;box-sizing:border-box}.rankings-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:15px}.ranking-card{background:#fff;border-radius:8px;padding:12px;display:flex;align-items:center;gap:8px;box-shadow:0 3px 10px #00000014;transition:all .3s ease;position:relative;overflow:hidden}.ranking-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#ff6b6b,#4ecdc4,#45b7d1,#96ceb4)}.ranking-card.bullet:before{background:linear-gradient(90deg,#ff6b6b,#ff8e8e)}.ranking-card.blitz:before{background:linear-gradient(90deg,#ffa726,#ffcc02)}.ranking-card.rapid:before{background:linear-gradient(90deg,#4ecdc4,#44a08d)}.ranking-card.classical:before{background:linear-gradient(90deg,#667eea,#764ba2)}.ranking-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0000001f}.ranking-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;flex-shrink:0}.ranking-card.bullet .ranking-icon{background:linear-gradient(135deg,#ff6b6b,#ff8e8e)}.ranking-card.blitz .ranking-icon{background:linear-gradient(135deg,#ffa726,#ffcc02)}.ranking-card.rapid .ranking-icon{background:linear-gradient(135deg,#4ecdc4,#44a08d)}.ranking-card.classical .ranking-icon{background:linear-gradient(135deg,#667eea,#764ba2)}.ranking-info{flex:1}.ranking-info h3{margin:0 0 4px;font-size:1em;font-weight:600;color:#333}.ranking-rating{margin:0 0 2px;font-size:1.4em;font-weight:700;color:#2c3e50}.ranking-games{margin:0;font-size:.85em;color:#7f8c8d}.no-rankings{text-align:center;color:#666;padding:15px;font-size:.9em}.no-rankings i{font-size:1.5em;color:#ccc;margin-bottom:10px;display:block}.error-message{color:#d32f2f;padding:10px;text-align:center;background:#ffebee;border-radius:4px;margin:10px 0}.rankings-loading{text-align:center;padding:20px;color:#666}.rankings-loading i{font-size:2em;color:#ccc;margin-bottom:10px;display:block;animation:spin 1s linear infinite}@media (min-width: 768px) and (max-width: 1023px){.rankings-tabs{gap:8px}.ranking-tab{padding:10px 16px;font-size:13px;min-width:90px}.rating-value{font-size:2.2em}.ranking-graph-container{height:160px}.rankings-grid{grid-template-columns:repeat(2,1fr);gap:8px}}@media (max-width: 767px){.rankings-component{padding:15px;margin-bottom:15px}.rankings-header h2{font-size:1.4em}.rankings-tabs{gap:6px;margin-bottom:15px}.ranking-tab{padding:8px 12px;font-size:12px;min-width:80px;gap:6px}.ranking-tab i{font-size:1em}.ranking-content{padding:15px;min-height:140px}.current-rating{top:15px;right:15px}.rating-value{font-size:2em}.rating-stats{gap:15px}.stat-value{font-size:1.1em}.ranking-graph-container{height:140px}.rankings-grid{grid-template-columns:1fr;gap:8px}.ranking-card{padding:10px;gap:6px}.ranking-icon{width:30px;height:30px;font-size:12px}.ranking-info h3{font-size:.9em}.ranking-rating{font-size:1.2em}.ranking-games{font-size:.8em}}@media (max-width: 479px){.rankings-component{padding:12px}.rankings-header h2{font-size:1.3em}.rankings-tabs{flex-direction:column;gap:4px}.ranking-tab{width:100%;justify-content:center;padding:10px}.ranking-content{padding:12px}.current-rating{position:relative;top:auto;right:auto;margin-bottom:15px}.rating-value{font-size:1.8em}.rating-stats{justify-content:center}.ranking-graph-container{height:120px}.ranking-card{padding:8px}.ranking-icon{width:28px;height:28px;font-size:11px}.ranking-info h3{font-size:.85em}.ranking-rating{font-size:1.1em}.ranking-games{font-size:.75em}}@media (prefers-color-scheme: dark){.rankings-component{background:#2d3748;color:#e2e8f0}.rankings-header h2{color:#e2e8f0}.ranking-content{background:#4a5568}.ranking-card{background:#4a5568;color:#e2e8f0}.ranking-info h3{color:#e2e8f0}.ranking-rating{color:#90cdf4}.ranking-games{color:#a0aec0}.rating-value{color:#90cdf4}.stat-value{color:#e2e8f0}.stat-label{color:#a0aec0}}.ranking-tab:focus{outline:none}.ranking-card:focus-within{outline:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.rankings-component *{transition:all .3s ease}.ranking-tab:hover,.ranking-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.rankings-loading{animation:pulse 2s ease-in-out infinite}@media print{.rankings-component{box-shadow:none;border:1px solid #ccc}.ranking-tab{background:#f5f5f5!important;color:#333!important;border:1px solid #ccc}.ranking-card{box-shadow:none;border:1px solid #ccc}}.profile-page{position:fixed;inset:0;width:100vw;height:100vh;overflow-y:auto;overflow-x:hidden;padding-left:250px;box-sizing:border-box}body.sidebar-collapsed .profile-page{padding-left:60px}.profile-page .profile-main-content{padding:20px;width:calc(100vw - 250px)!important;margin:0!important;box-sizing:border-box}body.sidebar-collapsed .profile-page .profile-main-content{width:calc(100vw - 60px)!important}.center-section{max-width:1400px;margin:0;position:relative}.profile-layout{display:flex;flex-direction:column;gap:20px;width:100%}.profile-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;width:100%;max-width:1200px;box-sizing:border-box}.profil-container{background:#fff;padding:18px;border-radius:12px;box-shadow:0 1px 8px #00000014;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}#rankingsContainer{width:100%!important;max-width:100%!important;box-sizing:border-box;overflow:hidden}.profile-layout .rankings-component{width:100%!important;max-width:100%!important;margin:0!important;box-sizing:border-box}.user-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.action-button{background-color:#4caf50;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:8px}.action-button:hover{background-color:#45a049}.main-username{font-size:2.2em;margin:0;text-align:center;color:#333}.join-date{color:#666;text-align:center;margin:0}.stats-container{background:#fff;border-radius:10px;padding:12px;margin-top:12px;box-shadow:0 1px 3px #0000000f}.stats-container h3{text-align:center;margin:0 0 8px;font-size:14px}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.stat-box{background:#f8f9fa;border-radius:8px;padding:6px 8px;text-align:center;height:54px;display:flex;flex-direction:column;justify-content:center}.stat-value{font-size:15px;font-weight:700;color:#1a73e8;display:block;line-height:1}.stat-label{color:#666;font-size:10px;line-height:1}.right-column{display:flex;flex-direction:column;gap:20px}.friends-sidebar,.game-history-sidebar{background:linear-gradient(90deg,#e3f0ff,#90caf9);border-radius:12px;padding:12px;box-shadow:0 2px 8px #0000001a;overflow-x:hidden;box-sizing:border-box}.friends-sidebar .online-friends{display:none}.friends-list{margin-top:10px;display:flex;flex-direction:column;gap:8px;max-height:560px;overflow-y:auto;overflow-x:hidden;align-items:flex-start;width:100%;box-sizing:border-box}.friend-item{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;gap:8px;padding:8px 10px;border-radius:8px;background:#fff;border:1px solid #eeeeee;transition:background-color .2s ease;width:100%;max-width:100%;box-sizing:border-box}.friend-item:hover{background:#fff}.friend-item.online{border-left:4px solid #4CAF50}.friend-actions{display:flex;gap:8px;align-items:center;margin-left:auto;white-space:nowrap}.friend-avatar{flex:0 0 32px}.friend-info{flex:1 1 auto;min-width:0}.friend-actions .challenge-btn,.friend-actions .remove-friend-btn{width:32px;height:32px;min-width:32px;min-height:32px;border:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;line-height:1;padding:0}.friend-actions .challenge-btn i,.friend-actions .remove-friend-btn i{font-size:14px;line-height:1}.friend-actions .challenge-btn{background:#4caf50}.friend-actions .remove-friend-btn{background:#f44336}.friend-actions .challenge-btn:hover{background:#45a049;transform:scale(1.1)}.friend-actions .remove-friend-btn:hover{background:#da190b;transform:scale(1.1)}.friend-status{font-size:.85em;color:#666;display:inline-flex;align-items:center;gap:2px;margin-top:0;line-height:1}.friends-sidebar .friend-info{display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:1}.friends-sidebar .friend-actions .challenge-btn,.friends-sidebar .friend-actions .remove-friend-btn{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;border-radius:50%!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.friends-sidebar .friend-actions .challenge-btn{background:#4caf50!important}.friends-sidebar .friend-actions .remove-friend-btn{background:#f44336!important}.online-indicator{width:8px;height:8px;border-radius:50%;background:#4caf50;animation:pulse 2s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.game-history-sidebar{overflow:hidden;max-height:600px}.game-history-list{max-height:560px;overflow-y:auto;padding-right:6px}.game-history-item{display:flex;gap:12px;padding:12px;border:1px solid #e0e0e0;border-radius:6px;background:#fafafa;margin-bottom:12px}.game-history-item:hover{background:#f5f5f5;border-color:#4caf50;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.game-board-mini{width:140px;height:140px;border:2px solid #ccc;border-radius:4px;flex:0 0 140px;overflow:hidden;background:#fff}.game-info{display:flex;flex-direction:column;gap:2px}.game-date{color:#666;font-size:12px}.game-time-control{color:#444;font-size:12px}.game-players{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13px}.vs-separator{color:#999}.game-result{font-weight:600;font-size:12px;padding:3px 6px;border-radius:3px;display:inline-block}.game-result.win{color:#2e7d32;background:#4caf501a}.game-result.loss{color:#c62828;background:#f443361a}.game-result.draw{color:#ef6c00;background:#ff98001a}.friend-item{display:flex;flex-direction:column;padding:10px;border-bottom:1px solid #eee}.friend-info{display:flex;align-items:center;gap:10px}.friend-avatar{width:32px;height:32px;background:#007bff;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;margin-right:8px;font-size:.9em}.friend-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-friends{text-align:center;color:#666;padding:15px;font-size:.9em}.search-container.hidden{display:none}@media (max-width: 900px){.profile-grid{grid-template-columns:1fr}}.search-container{margin-top:10px;position:relative;width:100%;max-width:360px}.search-box{display:flex;align-items:center;gap:8px}.search-box input#userSearch{flex:1;min-width:0;padding:8px 10px;border:1px solid #ccc;border-radius:6px}.search-box .search-button{width:36px;height:36px;min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:6px;background:transparent;color:#1976d2;cursor:pointer}.search-box .search-button i{font-size:16px}.search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid #dde7f5;border-radius:8px;box-shadow:0 4px 10px #00000014;display:flex;flex-direction:column;gap:4px;padding:6px;max-height:220px;overflow-y:auto;z-index:50}.search-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:#fff;border:1px solid transparent;min-height:36px}.search-item:hover{background:#f0f7ff;border-color:#dde7f5}.search-item .search-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-item .search-add{width:28px;height:28px;min-width:28px;min-height:28px;border:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#4caf50;color:#fff;cursor:pointer;box-shadow:0 1px 2px #0000001a}.search-item .search-add i{font-size:14px}.search-loading,.search-empty{padding:8px;color:#555;font-size:.9em}.challenge-modal{padding:20px}.challenge-modal h2{margin-bottom:16px;text-align:center}.userCircle-modal-content.challenge-modal{background:linear-gradient(90deg,#e3f0ff,#90caf9)!important;border-radius:12px;box-shadow:0 2px 10px #0000001a}.challenge-modal .challenge-time-selection,.challenge-modal .challenge-color-selection{background:#f8f9fa;padding:16px;border-radius:8px;box-shadow:0 2px 4px #0000000d;margin-top:12px}.challenge-modal .time-selection-container{display:flex;flex-direction:column;gap:20px;padding:20px;border-radius:15px;position:relative;overflow:hidden;max-width:600px;margin:0 auto}.challenge-modal .time-selection-container:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border-radius:15px;z-index:0}.challenge-modal .time-tabs{display:flex;gap:0;border-radius:12px;overflow:hidden;background:#ffffff26;padding:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 15px #0000001a;position:relative;z-index:1}.challenge-modal .time-tab{background:transparent;color:#000000bf;border:none;padding:12px 20px;border-radius:8px;cursor:pointer;font-size:1em;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:center;flex:1;position:relative;overflow:hidden}.challenge-modal .time-tab:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent);transition:left .5s}.challenge-modal .time-tab:hover:before{left:100%}.challenge-modal .time-tab:hover{background:#0000000f;color:#000;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.challenge-modal .time-tab.active{background:linear-gradient(135deg,#fffffff2,#ffffffd9);color:#1976d2;transform:translateY(-2px);box-shadow:0 6px 20px #0003;font-weight:800}.challenge-modal .time-content{flex:1;min-height:80px;display:flex;align-items:center;position:relative;z-index:1}.challenge-modal .time-options{display:none;gap:15px;flex-wrap:wrap;justify-content:center;width:100%}.challenge-modal .time-options.active{display:flex}.challenge-modal .time-button{background:linear-gradient(135deg,#f8f9fa,#e9ecef);color:#495057;border:2px solid #dee2e6;padding:20px 24px;border-radius:12px;cursor:pointer;transition:all .3s ease;font-size:1.2em;font-weight:700;width:120px;height:60px;box-shadow:0 2px 4px #0000001a;text-shadow:0 1px 2px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;white-space:nowrap}.challenge-modal .time-button:hover{background:linear-gradient(135deg,#e9ecef,#dee2e6);border-color:#2196f3;transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.challenge-modal .time-button.selected{background:linear-gradient(135deg,#2196f3,#1976d2);color:#fff;border-color:#1976d2;transform:translateY(-1px);box-shadow:0 4px 12px #2196f366;text-shadow:0 1px 2px rgba(0,0,0,.2)}.challenge-modal .color-tabs{display:flex;gap:0;border-radius:12px;overflow:hidden;background:#ffffff26;padding:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 15px #0000001a;position:relative;z-index:1}.challenge-modal .color-tab{background:transparent;color:#000000bf;border:none;padding:12px 20px;border-radius:8px;cursor:pointer;font-size:1em;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:center;flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px}.challenge-modal .color-tab:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent);transition:left .5s}.challenge-modal .color-tab:hover:before{left:100%}.challenge-modal .color-tab:hover{background:#0000000f;color:#000;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.challenge-modal .color-tab.active{background:linear-gradient(135deg,#2196f3,#1976d2);color:#fff;border-color:#1976d2;transform:translateY(-1px);box-shadow:0 4px 12px #2196f366;font-weight:800}.challenge-modal .challenge-actions{display:flex;gap:12px;margin-top:16px}.challenge-modal .challenge-send-btn{flex:1;padding:12px 16px;border:none;border-radius:6px;background:linear-gradient(135deg,#1976d2,#1565c0);color:#fff;cursor:pointer;font-weight:700}.challenge-modal .challenge-send-btn:hover{background:linear-gradient(135deg,#1565c0,#0d47a1)}.challenge-modal .challenge-cancel-btn{flex:1;padding:12px 16px;border:none;border-radius:6px;background:#f5f5f5;color:#666;cursor:pointer}.challenge-modal .challenge-cancel-btn:hover{background:#e0e0e0}html,body,#root{min-height:100vh}.auth-page{min-height:100vh;display:flex;justify-content:center;align-items:center;background:transparent;padding:0;box-sizing:border-box}.login-container{background:linear-gradient(90deg,#e3f0ff,#90caf9);padding:30px 20px;border-radius:10px;box-shadow:0 2px 10px #0000001a;width:100%;max-width:400px;box-sizing:border-box}.login-header{text-align:center;margin-bottom:25px}.login-header h1{color:#333;margin:0 0 8px;font-size:28px}.login-header p{margin:0;color:#666;font-size:16px}.form-group{margin-bottom:18px}.form-group label{display:block;margin-bottom:6px;color:#666;font-size:14px;font-weight:500}.form-group input{width:100%;padding:12px 14px;border:1px solid #ddd;border-radius:8px;font-size:16px;box-sizing:border-box;transition:border-color .3s,box-shadow .3s}.form-group input:focus{outline:none;border-color:#4caf50;box-shadow:0 0 0 3px #4caf501a}.login-button,.register-button{width:100%;padding:14px;background:#4caf50;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .3s,transform .1s;margin-top:10px}.login-button:hover,.register-button:hover{background:#45a049}.login-button:active,.register-button:active{transform:scale(.98)}.register-link,.login-link{text-align:center;margin-top:25px}.register-link a,.login-link a{color:#4caf50;text-decoration:none;font-weight:500}.register-link a:hover,.login-link a:hover{text-decoration:underline}.error-message{color:red;text-align:center;margin-top:15px;display:none;padding:10px;background:#ffebee;border-radius:5px;font-size:14px}.login-type{margin-bottom:20px;text-align:center;display:flex;justify-content:center;gap:20px}.login-type label{cursor:pointer;font-size:14px;display:flex;align-items:center;gap:6px}.login-type input[type=radio]{margin:0;width:16px;height:16px;accent-color:#4CAF50}.register-container{background:linear-gradient(90deg,#e3f0ff,#90caf9);padding:30px 20px;border-radius:10px;box-shadow:0 2px 10px #0000001a;width:100%;max-width:400px;box-sizing:border-box}.register-header{text-align:center;margin-bottom:25px}.register-header h1{color:#333;margin:0 0 8px;font-size:28px}.register-header p{margin:0;color:#666;font-size:16px}.kingsclash-logo{font-family:Times New Roman,serif;font-weight:700;letter-spacing:1px;text-align:center;margin:0;padding:0;color:#333;display:flex;flex-direction:column;align-items:center;gap:2px}.kingsclash-text{font-size:44px;color:#333;line-height:1;margin:0}.dot-net{color:#4fc3f7;font-weight:600;font-size:30px;margin:0;text-align:right;width:100%;padding-right:12px}.login-container .kingsclash-text,.register-container .kingsclash-text{font-size:44px!important}.login-container .dot-net,.register-container .dot-net{font-size:30px!important}@media (min-width: 768px){.auth-page,.login-container,.register-container{padding:40px}.login-header h1,.register-header h1{font-size:32px}.form-group input{padding:14px 16px}.login-button,.register-button{padding:16px}}@media (min-width: 1024px){.login-container,.register-container{padding:50px}.login-header h1,.register-header h1{font-size:44px}.form-group{margin-bottom:20px}.form-group input{padding:16px 18px}.login-button,.register-button{padding:18px}}@media (min-width: 1440px){.login-container,.register-container{max-width:450px}}@media (max-width: 767px){.kingsclash-text{font-size:34px}.dot-net{font-size:26px}}.modal{display:none;position:fixed;inset:0;width:100%;height:100%;background-color:#00000080;z-index:1000}.modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:20px;width:80%;max-width:500px;border-radius:5px;box-shadow:0 2px 10px #0000001a}.matchmaking-status{text-align:center;padding:20px}.matchmaking-status p{margin:10px 0;color:#666;font-size:16px}.cancel-button{background-color:#dc3545;color:#fff;border:none;padding:12px 24px;border-radius:5px;cursor:pointer;font-size:16px;font-weight:700;transition:background-color .2s;margin:20px auto 0;width:100%;max-width:200px;display:block}.cancel-button:hover{background-color:#c82333}.loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #2196F3;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}body{margin:0;padding:0;font-family:Arial,sans-serif;background-color:#e3f2fd;min-height:100vh;display:flex;flex-direction:column}.main-content{margin-left:160px;width:calc(100vw - 160px);padding:20px;box-sizing:border-box}.sidebar-collapsed .main-content{margin-left:60px}.game-area{display:grid;grid-template-columns:200px 1fr 300px;gap:0;min-height:calc(100vh - 100px);width:100%;margin:0;box-sizing:border-box}.player-section{grid-column:1;display:flex;flex-direction:column;justify-content:space-between;height:800px;width:200px;margin-top:57px;align-items:stretch}.player-section .player{flex:0 0 auto;margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:15px;border-radius:8px;background-color:#fff;box-shadow:0 2px 4px #0000001a}.player.opponent{order:1}.desktop-replay-controls{order:2}.surrender-button{order:3}.player.self{order:4}.player.opponent{background-color:#333;color:#fff;margin-top:0}.player.self{background-color:#f0f0f0}.player-section.player-black .player.self{background-color:#333;color:#fff}.player-section.player-black .player.opponent{background-color:#f0f0f0;color:#333}.player-avatar{width:50px;height:50px;background-color:#007bff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:24px}.player-details{text-align:center}.player-name{font-weight:700;font-size:1.2em;margin-bottom:4px}.player-rating{font-size:.9em;color:#666;font-weight:700}.player.opponent .player-rating{color:#ccc}.rating-change{font-weight:700;margin-left:5px}.rating-change.positive{color:#4caf50}.rating-change.negative{color:#f44336}.rating-change.neutral{color:#666}.surrender-button{display:flex;flex-direction:column;gap:10px;align-self:center;margin:20px 0;flex-shrink:0}.desktop-replay-controls{display:flex;align-items:center;gap:8px;margin:10px 0;padding:8px 10px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;justify-content:center;width:100%;max-width:200px;box-sizing:border-box;flex-wrap:wrap;align-self:center}.draw-button{padding:12px 24px;background-color:#ffc107;color:#212529;border:none;border-radius:5px;cursor:pointer;font-weight:700;transition:background-color .2s;width:200px}.draw-button:hover{background-color:#e0a800}#surrenderButton{padding:12px 24px;background-color:#dc3545;color:#fff;border:none;border-radius:5px;cursor:pointer;font-weight:700;transition:background-color .2s;width:200px}#surrenderButton:hover{background-color:#c82333}.board-container{grid-column:2;position:relative;display:flex;align-items:center;justify-content:center;margin-top:60px;width:100%;max-width:820px;margin-left:auto;margin-right:auto;aspect-ratio:1 / 1}.player-section{margin-right:0;position:relative;left:24px}.game-sidebar{margin-left:-36px}#board{width:100%;height:100%}#board .square-55d63{background-color:#0d47a1}#board .square-55d63.white-1e1d7{background-color:#e3f2fd}.game-sidebar{grid-column:3;display:flex;flex-direction:column;height:800px;width:300px;margin-top:60px;gap:20px}.moves-container{flex:.2;overflow-y:auto;border:1px solid #ccc;background:#fff;height:200px;background-color:#fff;border-radius:8px;padding:15px;margin-bottom:20px;box-shadow:0 2px 4px #0000001a}.moves-container h3{margin:0 0 10px;color:#333;font-size:1.2em}.moves-list{max-height:300px;overflow-y:auto;font-family:monospace}.move-pair{display:flex;align-items:center;padding:4px 0;border-bottom:1px solid #eee}.move-number{color:#666;margin-right:8px;min-width:30px}.move{padding:2px 6px;border-radius:4px;margin-right:8px}.move.white{background-color:#f0f0f0}.move.black{background-color:#e0e0e0}.moves-list::-webkit-scrollbar{width:8px}.moves-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.moves-list::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.moves-list::-webkit-scrollbar-thumb:hover{background:#555}.chat-container{flex:.8;border:1px solid #ccc;background:#fff;border-radius:8px;padding:15px;box-shadow:0 2px 4px #0000001a;height:380px;display:flex;flex-direction:column}.chat-messages{flex:1;overflow-y:auto;padding:10px;background:#f8f9fa;border-radius:4px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px;height:100%}.chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid #ccc;background:#fff;gap:10px;border-top:1px solid #eee}#chatInput{margin-right:10px;border:1px solid #ccc;font-size:14px;min-width:0;flex:1;padding:8px;border:1px solid #ddd;border-radius:4px}#sendMessage{background-color:#2196f3;transition:background-color .2s;white-space:nowrap;padding:8px 16px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}#sendMessage:hover{background-color:#1976d2;background-color:#0056b3}.chat-message{margin-bottom:12px;padding:0;border-radius:0;background-color:transparent;width:100%;box-sizing:border-box;display:flex;flex-direction:column}.chat-message.own-message{align-items:flex-end}.chat-message.other-message{align-items:flex-start}.chat-message-content{display:flex;flex-direction:column;max-width:70%;position:relative}.chat-message.own-message .chat-message-content{align-items:flex-end}.chat-message.other-message .chat-message-content{align-items:flex-start}.chat-sender{font-size:12px;color:#666;margin-bottom:4px;font-weight:400}.chat-message.own-message .chat-sender{text-align:right}.chat-message.other-message .chat-sender{text-align:left}.chat-text{color:#333;word-break:break-word;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.4;position:relative;box-shadow:0 1px 2px #0000001a}.chat-message.own-message .chat-text{background-color:#e3f2fd;color:#000;border-bottom-right-radius:4px}.chat-message.other-message .chat-text{background-color:#fff;color:#000;border:1px solid #e0e0e0;border-bottom-left-radius:4px}.chat-message.system-message{align-items:center}.chat-message.system-message .chat-message-content{max-width:90%;align-items:center}.chat-message.system-message .chat-text{background-color:#f0f0f0;color:#666;border-radius:12px;font-size:13px;text-align:center;border:none;box-shadow:none}.draw-offer-message{background-color:#fff3cd;border:1px solid #ffeaa7;border-radius:8px;padding:15px;margin:10px 0;text-align:center}.draw-offer-buttons{display:flex;gap:10px;justify-content:center;margin-top:10px}.draw-accept{padding:8px 16px;background-color:#28a745;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;transition:background-color .2s}.draw-accept:hover{background-color:#218838}.draw-decline{padding:8px 16px;background-color:#dc3545;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;transition:background-color .2s}.draw-decline:hover{background-color:#c82333}.revanche-request-message{background-color:#fff3cd;border:1px solid #ffeaa7;border-radius:8px;padding:15px;margin:10px 0;text-align:center}.revanche-request-buttons{display:flex;gap:10px;justify-content:center;margin-top:10px}.revanche-accept{padding:8px 16px;background-color:#28a745;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;transition:background-color .2s}.revanche-accept:hover{background-color:#218838}.revanche-decline{padding:8px 16px;background-color:#dc3545;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;transition:background-color .2s}.revanche-decline:hover{background-color:#c82333}.resize-handle{position:absolute;right:-10px;bottom:-10px;cursor:nwse-resize;color:#666;font-size:20px;background-color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0000001a}.game-over-overlay{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000c;color:#fff;padding:20px 40px;border-radius:10px;text-align:center;z-index:1000;box-shadow:0 0 20px #00000080}.game-over-overlay h2{margin:0 0 10px;font-size:24px}.game-over-overlay p{margin:0;font-size:18px;opacity:.9}.game-over-buttons{display:flex;gap:15px;justify-content:center;margin-top:20px;flex-wrap:wrap}.game-over-btn{padding:12px 24px;font-size:16px;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;min-width:140px}.game-over-btn:first-child{background-color:#007bff;color:#fff}.game-over-btn:first-child:hover{background-color:#0056b3;transform:translateY(-2px);box-shadow:0 4px 8px #007bff4d}.game-over-btn:last-child{background-color:#28a745;color:#fff}.game-over-btn:last-child:hover{background-color:#1e7e34;transform:translateY(-2px);box-shadow:0 4px 8px #28a7454d}.victory-animation{animation:victory-pulse 1s ease-in-out infinite}@keyframes victory-pulse{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.05)}to{transform:translate(-50%,-50%) scale(1)}}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999}.confetti{position:absolute;width:10px;height:10px;background-color:red;opacity:.8;animation:confetti-fall 3s linear forwards}@keyframes confetti-fall{0%{transform:translateY(-100vh) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.winner-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#000000e6;color:#fff;padding:30px 50px;border-radius:15px;font-size:24px;font-weight:700;z-index:1000;text-align:center;box-shadow:0 0 30px #00000080;animation:fadeIn .5s ease-in-out}.winner-content{display:flex;flex-direction:column;align-items:center;gap:20px}.winner-content h2{margin:0;font-size:32px;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.5)}.winner-content button{background-color:#4caf50;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:18px;cursor:pointer;transition:background-color .3s}.winner-content button:hover{background-color:#45a049}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.timer{font-family:monospace;font-size:1.5em;background-color:#333;color:#fff;font-size:18px;font-weight:700;padding:8px 12px;border-radius:4px;background-color:#f5f5f5;border:2px solid #ddd;transition:all .3s ease}.player.self .timer{background-color:#fff;color:#333;border:2px solid #333}.timer.active{background-color:#007bff!important;color:#fff!important;border-color:#007bff!important;box-shadow:0 0 10px #007bff4d;background-color:#4caf50;color:#fff;border-color:#45a049;box-shadow:0 2px 4px #0003}.player.opponent .timer:not(.active){background-color:#555;color:#fff}.player.self .timer:not(.active){background-color:#f8f9fa;color:#333;border-color:#dee2e6}.timer.warning{background-color:#ff9800;color:#fff;border-color:#f57c00;animation:pulse 1s infinite}.timer.danger{background-color:#f44336;color:#fff;border-color:#d32f2f;animation:pulse .5s infinite}.timer.first-move-phase{background-color:#ff9800!important;color:#fff!important;border-color:#ff9800!important;box-shadow:0 0 10px #ff98004d;animation:pulse-first-move 2s infinite}.timer.first-move-phase.active{background-color:#ff5722!important;color:#fff!important;border-color:#ff5722!important;box-shadow:0 0 15px #ff572266;animation:pulse-first-move-active 1s infinite}.timer.normal-phase.active{background-color:#007bff!important;color:#fff!important;border-color:#007bff!important;box-shadow:0 0 10px #007bff4d}@keyframes pulse-first-move{0%,to{box-shadow:0 0 10px #ff98004d}50%{box-shadow:0 0 20px #ff980080}}@keyframes pulse-first-move-active{0%,to{box-shadow:0 0 15px #ff572266}50%{box-shadow:0 0 25px #ff572299}}.board-container .game-info{position:absolute;top:-40px;left:50%;transform:translate(-50%);background:#ffffffe6;padding:8px 16px;border-radius:5px;box-shadow:0 2px 5px #0000001a;font-weight:700;color:#333}.time-mode{font-size:14px;text-transform:capitalize}.captured-pieces{display:flex;flex-wrap:wrap;gap:2px;padding:8px;background:#ffffffe6;border-radius:5px;box-shadow:0 2px 5px #0000001a;min-height:30px;align-items:center;justify-content:center}.captured-piece{width:20px;height:20px;background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.7;transition:opacity .3s ease}.captured-piece:hover{opacity:1}.captured-pieces.empty{opacity:.3;font-style:italic;color:#666;font-size:12px}.material-advantage{display:flex;align-items:center;justify-content:center;padding:4px 8px;background:#ffffffe6;border-radius:5px;box-shadow:0 2px 5px #0000001a;font-weight:700;font-size:14px;min-height:20px;margin-top:4px}.material-advantage.positive{color:#4caf50}.material-advantage.negative{color:#f44336}.material-advantage.neutral{color:#666}.material-advantage.empty{opacity:.3;font-style:italic;color:#666;font-size:12px}#board .square-55d63.king-in-check img{animation:kingCheckGlow 1.5s ease-in-out infinite alternate!important;filter:drop-shadow(0 0 10px #ff0000) drop-shadow(0 0 20px #ff0000)!important}@keyframes kingCheckGlow{0%{filter:drop-shadow(0 0 5px #ff0000) drop-shadow(0 0 10px #ff0000)!important}to{filter:drop-shadow(0 0 15px #ff0000) drop-shadow(0 0 25px #ff0000)!important}}.replay-controls{display:flex;align-items:center;gap:10px;margin:10px 0;padding:10px;background:#f5f5f5;border-radius:5px;justify-content:center}.replay-btn{padding:8px 12px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:opacity .2s ease}.replay-btn:disabled{opacity:.5;cursor:not-allowed}.replay-btn:hover:not(:disabled){opacity:.8}.prev-btn,.next-btn{background:#4a90e2;color:#fff;width:60px}.current-btn{background:#28a745;color:#fff;flex-basis:100%;margin-top:6px}.move-counter{font-size:14px;color:#666;margin:0 6px;font-weight:500;flex:1;text-align:center}#board.replay-mode:after{content:attr(data-replay-text);position:absolute;top:10px;right:10px;background:#000000b3;color:#fff;padding:5px 10px;border-radius:3px;font-size:12px;z-index:1000}@media (max-width: 1024px){.game-area{flex-direction:column;align-items:center;gap:10px;padding:10px;height:auto;min-height:calc(100vh - 100px);overflow:hidden}.main-content{padding:10px;overflow:hidden}.mobile-only{display:contents!important;width:100%}.game-info{display:none!important}#premove-queue-container{order:1!important;width:100%!important;max-width:400px!important;margin-bottom:10px!important;display:block!important;height:60px!important;overflow-y:auto!important}.mobile-only .moves-container{order:2!important;width:100%!important;max-width:400px!important;height:50px!important;margin-bottom:10px!important;overflow-y:auto!important;flex:none!important}.player-section{order:unset!important;width:100%!important;max-width:400px!important;height:auto!important;margin-top:0!important;flex-direction:column!important;gap:10px!important;display:contents!important}.player.opponent{order:3!important;margin:0!important;padding:10px!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}.player.self{order:5!important;margin:0!important;padding:10px!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}.player-section.player-black .player.opponent{order:5!important}.player-section.player-black .player.self{order:3!important}.board-container{order:4!important;width:100%!important;max-width:400px!important;aspect-ratio:1!important;margin-top:0!important}.mobile-only .replay-controls{order:8!important;width:100%!important;max-width:400px!important;margin:10px 0!important;padding:10px!important;background:#fff!important;border-radius:8px!important;box-shadow:0 2px 4px #0000001a!important}.desktop-buttons,.desktop-replay-controls{display:none!important}.mobile-only .desktop-buttons{display:flex!important;order:7!important;width:100%!important;max-width:400px!important;flex-direction:row!important;gap:10px!important;margin:10px 0!important}.mobile-only .desktop-buttons .draw-button,.mobile-only .desktop-buttons #surrenderButtonMobile{width:50%!important;padding:12px 10px!important;font-size:14px!important;margin:0!important}.chat-container{position:fixed!important;bottom:20px!important;right:20px!important;width:60px!important;height:60px!important;border-radius:50%!important;background:#007bff!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;box-shadow:0 4px 8px #0000004d!important;z-index:1000!important;transition:all .3s ease!important}.chat-container:hover{background:#0056b3!important;transform:scale(1.1)!important}.chat-container:before{content:"💬"!important;font-size:24px!important}.chat-container h3,.chat-messages,.chat-input{display:none!important}.chat-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;z-index:2000}.chat-modal.active{display:flex;flex-direction:column}.chat-modal-content{background:#fff;margin:20px;border-radius:8px;flex:1;display:flex;flex-direction:column;max-height:calc(100vh - 40px)}.chat-modal-header{padding:15px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}.chat-modal-header h3{margin:0;color:#333}.chat-modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:#666}.chat-modal-messages{flex:1;overflow-y:auto;padding:15px}.chat-modal-input{padding:15px;border-top:1px solid #eee;display:flex;gap:10px}.chat-modal-input input{flex:1;padding:10px;border:1px solid #ddd;border-radius:4px}.chat-modal-input button{padding:10px 20px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.timer{font-size:16px!important;padding:6px 10px!important}.player-avatar{width:40px!important;height:40px!important;font-size:20px!important}.player-name{font-size:1em!important}.player-rating{font-size:.8em!important}.captured-pieces{min-height:25px!important;padding:5px!important}.captured-piece{width:16px!important;height:16px!important}.material-advantage{font-size:12px!important;padding:3px 6px!important;min-height:16px!important}.mobile-only .moves-list{max-height:30px!important;height:30px!important;font-size:12px!important;overflow-y:auto!important}.move{padding:1px 4px!important;font-size:11px!important}.move-number{font-size:11px!important;min-width:25px!important}.game-sidebar{display:none!important}#surrenderButtonMobile{padding:12px 10px!important;background-color:#dc3545!important;color:#fff!important;border:none!important;border-radius:5px!important;cursor:pointer!important;font-weight:700!important;transition:background-color .2s!important;width:50%!important;font-size:14px!important;margin:0!important}#surrenderButtonMobile:hover{background-color:#c82333!important}.game-over-buttons{flex-direction:column;gap:10px;margin-top:15px}.game-over-btn{padding:14px 20px;font-size:15px;min-width:120px}}@media (min-width: 1025px){.desktop-buttons{display:flex}.mobile-buttons{display:none}}.premove-from-highlight{background-color:#d8cab0!important;box-shadow:0 0 10px 2px #d8cab066!important;transition:background .2s,box-shadow .2s}.premove-to-highlight{background-color:#cdbba7!important;box-shadow:0 0 12px 3px #cdbba780!important;transition:background .2s,box-shadow .2s}#premove-queue-container{background:#fff3e0;border:2px solid #ff9800;border-radius:8px;padding:12px 16px;margin-bottom:16px;min-width:180px;box-shadow:0 2px 8px #ff980014;font-family:inherit}#premove-queue-container h3{margin:0 0 8px;color:#ff9800;font-size:1.1em;font-weight:700;letter-spacing:.5px}#premove-queue-list{list-style:none;padding:0;margin:0}#premove-queue-list li{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;font-size:1em}#premove-queue-list li:last-child{margin-bottom:0}#premove-queue-list button{background:#ff9800;color:#fff;border:none;border-radius:4px;margin-left:8px;cursor:pointer;font-size:14px;padding:2px 8px;transition:background .2s}#premove-queue-list button:hover{background:#e65100}@media (max-width: 1024px){#premove-queue-container{min-width:120px;padding:8px;font-size:.95em}}@media (max-width: 600px){#premove-queue-container{min-width:80px;padding:6px 4px;font-size:.9em}#premove-queue-container h3{font-size:1em}}.promotion-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;pointer-events:none}.promotion-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0000004d;pointer-events:auto}.promotion-content{position:relative;background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-radius:8px;padding:6px;box-shadow:0 8px 16px #00000026;border:2px solid #2196f3;width:320px;height:80px;pointer-events:auto;animation:promotionModalSlideIn .2s ease-out}@keyframes promotionModalSlideIn{0%{opacity:0;transform:translateY(-50px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.promotion-options{display:flex;gap:6px;justify-content:center;align-items:center;height:100%}.promotion-option{background:linear-gradient(135deg,#fff,#f8f9fa);border:2px solid #dee2e6;border-radius:6px;padding:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:75px;height:68px;color:#495057;text-decoration:none;outline:none}.promotion-option:hover{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-color:#2196f3;transform:scale(1.1);box-shadow:0 4px 8px #2196f34d}.promotion-option:focus{outline:2px solid #2196f3;outline-offset:2px}.promotion-option:active{transform:scale(.95);box-shadow:0 2px 4px #2196f366}.promotion-piece-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}@media (max-width: 600px){.promotion-content{padding:20px;margin:20px}.promotion-options{grid-template-columns:1fr;gap:12px}.promotion-option{padding:15px;flex-direction:row;justify-content:flex-start;gap:15px}.promotion-piece{width:50px;height:50px;flex-shrink:0}.promotion-info{text-align:left}.promotion-header h3{font-size:20px}.promotion-header p{font-size:14px}}.promotion-option .promotion-piece{transition:transform .2s ease}.promotion-option:hover .promotion-piece{transform:scale(1.1)}.selected-square{background-color:#ffa500cc!important;box-shadow:0 0 10px #ffa50099!important;animation:pulse 1.5s infinite!important;z-index:10!important;position:relative!important}.possible-move{background-color:#0f09!important;box-shadow:0 0 8px #0f06!important;animation:fadeInOut 2s infinite!important;z-index:5!important;position:relative!important}.possible-move.capture{background-color:#ff0000b3!important;box-shadow:0 0 12px #ff000080!important;animation:capturePulse 1s infinite!important;z-index:5!important;position:relative!important}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes fadeInOut{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}@keyframes capturePulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@media (max-width: 768px){.selected-square{background-color:#ffa500e6!important}.possible-move{background-color:#0f0c!important}.possible-move.capture{background-color:#f00c!important}}.selected-square:focus,.possible-move:focus{outline:3px solid #007bff!important;outline-offset:2px!important}[data-square]:hover{cursor:pointer!important;transition:all .2s ease!important}.selected-square:hover{background-color:#ffa500e6!important}.possible-move:hover{background-color:#0f0c!important;transform:scale(1.05)!important}.possible-move.capture:hover{background-color:#f00c!important}.square-55d63.selected-square{background-color:#ffa500cc!important;box-shadow:0 0 10px #ffa50099!important}.square-55d63.possible-move{background-color:#0f09!important;box-shadow:0 0 8px #0f06!important}.square-55d63.possible-move.capture{background-color:#ff0000b3!important;box-shadow:0 0 12px #ff000080!important}.language-button-container{position:relative;display:flex;justify-content:center;align-items:center}.language-current{gap:6px}.flag-icon{font-size:1em;width:18px;text-align:center}.language-name{font-size:.9em;white-space:nowrap;transition:opacity .3s,width .3s}.language-current i{font-size:.8em;transition:transform .3s ease;opacity:.8}.language-current:hover i{transform:rotate(180deg);opacity:1}.language-dropdown{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#fff;border-radius:12px;box-shadow:0 8px 24px #00000026;display:none;z-index:1000;overflow:hidden;animation:slideUp .25s ease-out;border:1px solid rgba(0,0,0,.08);margin-bottom:8px;width:140px}.language-dropdown.show{display:block}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(15px) scale(.95)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}.language-option{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background-color .2s ease;color:#333;border-bottom:1px solid rgba(0,0,0,.06)}.language-option:last-child{border-bottom:none}.language-option:hover{background:#f4f7fb}.language-option.active{background:linear-gradient(135deg,#1976d226,#1976d21a);color:#1976d2;font-weight:600;border-left:3px solid #1976d2}.language-option .flag-icon{font-size:1.1em;width:20px;text-align:center}.language-option:hover .flag-icon{transform:scale(1.1)}.language-option span:last-child{font-size:.95em;font-weight:500}.language-option:hover span:last-child{font-weight:600}.sidebar.collapsed .language-name,.sidebar.collapsed .language-current i{opacity:0;width:0;overflow:hidden}@media (min-width: 768px) and (max-width: 1023px){.sidebar-language-selector{padding:12px 15px}.language-current{padding:8px 10px}.language-name{font-size:.85em}.language-dropdown{margin-bottom:8px}.language-option{padding:12px 16px}}@media (max-width: 767px){.sidebar-language-selector{padding:10px 20px 20px;border-top:1px solid rgba(255,255,255,.1)}.language-current{width:30px;padding:10px}.language-name,.language-current i{opacity:0!important;width:0!important;overflow:hidden!important}.sidebar:not(.collapsed) .language-current{width:120px!important;margin:5px 0!important}.sidebar:not(.collapsed) .language-name{opacity:1!important;width:auto!important}.sidebar:not(.collapsed) .language-current i{opacity:1!important;width:auto!important}.language-dropdown{position:fixed;bottom:20px;left:20px;right:20px;margin-bottom:0;border-radius:16px;box-shadow:0 12px 40px #0000004d;background:#fffffffa;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px)}.language-option{padding:16px 18px;font-size:1em;border-radius:8px;margin:4px 8px}.language-option .flag-icon{font-size:1.4em}.language-option:hover{transform:translate(6px)}}@media (max-width: 479px){.sidebar-language-selector{padding:8px 12px}.language-current{width:30px;padding:10px}.language-dropdown{left:10px;right:10px;bottom:15px}.language-option{padding:12px 14px;font-size:.9em}}@media (prefers-color-scheme: dark){.language-dropdown{background:#2d3748;border:1px solid #4a5568}.language-option{color:#e2e8f0;border-bottom-color:#4a5568}.language-option:hover{background-color:#4a5568;color:#63b3ed}.language-option.active{background-color:#2b6cb0;color:#bee3f8}}.language-current:focus{outline:none;box-shadow:none}.language-option:focus{outline:2px solid #1976d2;outline-offset:-2px}@media print{.sidebar-language-selector{display:none}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}body{margin:0;font-family:sans-serif;background-color:#f5f5f5;display:flex;height:100vh}.messages-root .main-content{margin-left:170px;padding:0 6px 6px;transition:margin-left .3s;flex:1;overflow-y:auto;height:100vh;width:calc(100% - 170px);box-sizing:border-box}.messages-root body.sidebar-collapsed .main-content{margin-left:60px;width:calc(100% - 60px)}@media (min-width: 769px){.messages-root .main-content{margin-left:250px!important;padding:20px!important;width:calc(100% - 250px)!important}.messages-root body.sidebar-collapsed .main-content{margin-left:60px!important;width:calc(100% - 60px)!important}.messages-container{width:100%!important;box-sizing:border-box}.contacts-section{width:300px!important;min-width:300px!important}.new-message-btn{transform:translate(0)!important;margin-right:0!important;margin-left:auto!important}}@media (hover: hover) and (pointer: fine){.messages-root .main-content{margin-left:250px!important;padding:20px!important;width:calc(100% - 250px)!important}.messages-root body.sidebar-collapsed .main-content{margin-left:60px!important;width:calc(100% - 60px)!important}.contacts-section{width:300px!important;min-width:300px!important}.new-message-btn{transform:translate(0)!important;margin-right:0!important;margin-left:auto!important}}.messages-page{display:flex;justify-content:flex-start;align-items:flex-start;min-height:calc(100vh - 80px)}.messages-container{display:flex;height:calc(100vh - 120px);background:#fff;border-radius:10px;box-shadow:0 2px 4px #0000001a;overflow:hidden;width:100%;max-width:1600px;margin:0 6px 6px 0;box-sizing:border-box}.contacts-section{width:300px;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;background:#f8f9fa;border-top-left-radius:10px;border-bottom-left-radius:10px}.contacts-header{padding:20px 12px 20px 20px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center;background:#fff;border-top-left-radius:10px;position:relative;z-index:1;gap:10px}.contacts-header h2{margin:0;color:#333;position:relative;display:inline-block}.new-message-btn{padding:10px 14px;font-size:14px;background-color:#4caf50;color:#fff;border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background-color .3s;width:auto;position:relative;z-index:2;margin-left:auto}.new-message-btn:hover{background-color:#45a049}.new-message-btn i{font-size:12px}.search-box{padding:15px;position:relative;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;justify-content:center}.search-box input{width:calc(100% - 40px);max-width:260px;padding:10px 42px 10px 15px;border:1px solid #e0e0e0;border-radius:20px;font-size:14px;transition:all .3s ease}.search-box input:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 2px #2196f333}.search-box i{position:absolute;right:24px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none}.search-box .search-results{left:50%;transform:translate(-50%);max-width:320px;width:calc(100% - 40px)}.contacts-list{flex:1;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:15px;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #f0f0f0;position:relative}.contact-item:hover{background-color:#f5f5f5}.contact-item.active{background-color:#e8f2ff}.contact-avatar{width:40px;height:40px;background:#2196f3;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:500;color:#333;margin-bottom:4px}.contact-last-message{font-size:13px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-status{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.contact-time{font-size:12px;color:#999}.unread-badge{background-color:#4caf50;color:#fff;padding:2px 6px;border-radius:10px;font-size:12px;font-weight:700;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;position:absolute;top:8px;right:8px}.chat-section{flex:1;display:flex;flex-direction:column}.chat-header{padding:15px 20px;border-bottom:1px solid #e0e0e0;background:#fff;display:flex;align-items:center;gap:12px}.back-to-contacts-btn{background:none;border:none;color:#666;font-size:1.2em;cursor:pointer;padding:5px;border-radius:4px;transition:all .3s ease;display:none}.chat-user-info{display:flex;align-items:center;gap:12px}.chat-avatar{width:40px;height:40px;background:#2196f3;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}.chat-user-details h3{margin:0;color:#333}.status{font-size:13px}.status.online{color:#4caf50}.status.offline{color:#999}.chat-messages{flex:1;padding:20px;overflow-y:auto;background:#f5f5f5}.message{display:flex;margin-bottom:15px}.message.sent{justify-content:flex-end}.message-content{max-width:70%;padding:10px 15px;border-radius:15px;position:relative}.message.received .message-content{background:#fff;margin-left:10px}.message.sent .message-content{background:#4caf50;color:#fff;margin-right:10px}.message-time{font-size:11px;color:#999;margin-top:4px;text-align:right}.message.sent .message-time{color:#fffc}.no-chat-selected{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#999}.no-chat-selected i{font-size:48px;margin-bottom:15px}.no-chats-message{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:#666;text-align:center;background:#f9f9f9;border-radius:8px;margin:20px}.no-chats-message i{font-size:48px;margin-bottom:20px;color:#ccc}.no-chats-message p{margin:5px 0;font-size:14px}.no-chats-message p:first-of-type{font-weight:700;font-size:16px;color:#333}.chat-input-area{padding:15px;background:#fff;border-top:1px solid #e0e0e0}.chat-input-container{display:flex;gap:10px}#messageInput{flex:1;padding:12px;border:1px solid #e0e0e0;border-radius:20px;resize:none;height:40px;font-family:inherit;transition:all .3s ease}#messageInput:focus{outline:none;border-color:#4caf50;box-shadow:0 0 0 2px #4caf5033}#sendMessageBtn{width:40px;height:40px;border:none;border-radius:50%;background:#4caf50;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}#sendMessageBtn:hover{background:#45a049;transform:scale(1.05)}#sendMessageBtn:disabled{background:#ccc;cursor:not-allowed;transform:none}.modal{display:none;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:9999}.modal.show{display:flex!important}.modal-content{position:relative;background:#fff;border-radius:10px;box-shadow:0 4px 6px #0000001a;z-index:10000}.messages-modal{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;background:#00000080;z-index:10000}.messages-modal-content{background:#fff;border-radius:12px;box-shadow:0 12px 32px #0003;width:90%;max-width:560px;padding:24px;position:relative}.close{position:absolute;right:20px;top:20px;font-size:24px;cursor:pointer;color:#666}.search-results{position:absolute;top:calc(100% + 6px);left:12px;right:12px;background:#fff;border:1px solid #e0e0e0;border-radius:10px;box-shadow:0 6px 18px #00000014;max-height:320px;overflow-y:auto;z-index:1000;padding:6px 0}.search-result-item{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;transition:background-color .2s,transform .12s ease;border-bottom:1px solid #f1f1f1}.search-result-item:last-child{border-bottom:none}.search-result-item:hover{background-color:#eef6ff}.search-result-item:active{transform:translateY(1px)}.mobile-sidebar-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:998}.mobile-sidebar-overlay.active{display:block}.touch-active{transform:scale(.98);opacity:.8;transition:all .15s ease}.contact-item.touch-active{background:#e8f5e9;transform:translateY(1px)}.new-message-btn.touch-active{background:#45a049;transform:translateY(1px)}#sendMessageBtn.touch-active{background:#45a049;transform:scale(.95)}.search-result-item.touch-active{background:#f0f0f0;transform:translateY(1px)}@media (max-width: 768px) and (hover: none) and (pointer: coarse){.messages-root .main-content{margin-left:40px;padding:10px;width:calc(100% - 40px)}.messages-root body.sidebar-collapsed .main-content{margin-left:40px;width:calc(100% - 40px)}.messages-container{flex-direction:column;height:calc(100vh - 40px);border-radius:8px}.contacts-section{width:100%!important;height:100%;border-right:none;border-bottom:none;border-radius:8px;display:block}.chat-section{height:100%;border-bottom-left-radius:8px;border-bottom-right-radius:8px;display:none}.messages-container.chat-active .contacts-section{display:none}.messages-container.chat-active .chat-section{display:flex}.contacts-header{padding:15px}.contacts-header h2{font-size:1.2em}.new-message-btn{padding:10px 14px;font-size:1em;width:auto;margin-right:0;z-index:999;transform:translate(-65px);border-radius:6px}.search-box{padding:12px}.search-box input{padding:8px 30px 8px 12px;font-size:.9em}.contact-item{padding:12px}.contact-avatar{width:35px;height:35px;font-size:.9em}.contact-name{font-size:.9em}.contact-last-message{font-size:.8em}.unread-badge{top:6px;right:6px;min-width:16px;height:16px;font-size:11px}.chat-header{padding:12px 15px}.back-to-contacts-btn{display:inline-flex}.chat-user-info{flex:1}.chat-avatar{width:35px;height:35px;font-size:.9em}.chat-user-details h3{font-size:1.1em}.chat-messages{padding:15px}.message-content{max-width:80%;padding:8px 12px;font-size:.9em}.message-time{font-size:.8em}.chat-input-area{padding:12px}.chat-input-container{gap:8px}#messageInput{padding:10px;height:35px;font-size:.9em}#sendMessageBtn{width:35px;height:35px}.modal-content{margin:0;width:88%;max-width:400px;padding:18px;z-index:10000;position:relative;left:auto;transform:none}}@media (max-width: 480px) and (hover: none) and (pointer: coarse){.messages-root .main-content{margin-left:40px;padding:8px;width:calc(100% - 40px)}.messages-container{height:calc(100vh - 32px);border-radius:6px}.contacts-section{height:35%}.chat-section{height:65%}.contacts-header{padding:10px}.contacts-header h2{font-size:1.1em}.new-message-btn{padding:8px 12px;font-size:.95em;margin-right:0;z-index:999;transform:translate(-55px);border-radius:6px}.search-box{padding:10px}.search-box input{padding:6px 25px 6px 10px;font-size:.85em}.contact-item{padding:10px}.contact-avatar{width:30px;height:30px;font-size:.8em}.contact-name{font-size:.85em}.contact-last-message{font-size:.75em}.unread-badge{top:5px;right:5px;min-width:14px;height:14px;font-size:10px}.chat-header{padding:10px 12px}.chat-avatar{width:30px;height:30px;font-size:.8em}.chat-user-details h3{font-size:1em}.chat-messages{padding:12px}.message-content{max-width:85%;padding:6px 10px;font-size:.85em}.message-time{font-size:.75em}.chat-input-area{padding:10px}.chat-input-container{gap:6px}#messageInput{padding:8px;height:32px;font-size:.85em}#sendMessageBtn{width:32px;height:32px}.modal-content{margin:0;width:90%;max-width:350px;padding:15px;z-index:10000;position:relative;left:auto;transform:none}}.message-count{background-color:#f44;color:#fff;border-radius:50%;padding:2px 6px;font-size:12px;position:absolute;top:-8px;right:-15px;min-width:18px;text-align:center}.message-count.hidden{display:none}@media (min-width: 769px),(hover: hover) and (pointer: fine){.modal-content{width:600px;max-width:90vw;min-width:400px;margin:0;padding:32px 40px;border-radius:14px;font-size:1.08em}}