:root{--primary-color:rgba(64,224,208,0.9);--background:rgba(25,25,35,0.95);--sidebar-bg:rgba(20,20,30,0.9);--message-bg:rgba(255,255,255,0.05);--text-color:#fff;--input-bg:rgba(255,255,255,0.1);--border-color:rgba(255,255,255,0.1);--shadow-color:rgba(0,0,0,0.3);--timestamp-color:rgba(255,255,255,0.7);}
        .dark-mode{--primary-color:rgba(64,224,208,0.9);--background:rgba(25,25,35,0.95);--sidebar-bg:rgba(20,20,30,0.9);--message-bg:rgba(255,255,255,0.05);--text-color:#fff;--input-bg:rgba(255,255,255,0.1);--border-color:rgba(255,255,255,0.1);--shadow-color:rgba(0,0,0,0.3);--timestamp-color:rgba(255,255,255,0.7);}
        .light-mode{--primary-color:#40E0D0;--background:rgba(255,255,255,0.95);--sidebar-bg:rgba(240,240,245,0.9);--message-bg:rgba(0,0,0,0.03);--text-color:#333;--input-bg:rgba(0,0,0,0.05);--border-color:rgba(0,0,0,0.1);--shadow-color:rgba(0,0,0,0.1);--timestamp-color:rgba(0,0,0,0.6);}
        *{box-sizing:border-box;margin:0;padding:0;}
        body{font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text-color);min-height:100vh;margin:0;display:flex;background:var(--background);transition:background-color 0.3s ease;}
        .app-container{display:flex;width:100%;height:100vh;position:relative;}
        .sidebar{width:280px;background:var(--sidebar-bg);backdrop-filter:blur(10px);border-right:1px solid var(--border-color);height:100vh;overflow-y:auto;transition:transform 0.3s ease;z-index:10;display:flex;flex-direction:column;}
        .sidebar-header{padding:20px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;}
        .sidebar-title{font-size:1.2rem;font-weight:600;}
        .theme-toggle{background:none;border:none;color:var(--text-color);font-size:1.2rem;cursor:pointer;padding:5px;border-radius:50%;transition:all 0.3s ease;}
        .theme-toggle:hover{background:var(--input-bg);}
        .room-list{flex:1;overflow-y:auto;padding:10px 0;}
        .room-item{padding:12px 20px;cursor:pointer;transition:background-color 0.2s ease;display:flex;align-items:center;gap:10px;}
        .room-item:hover{background:var(--input-bg);}
        .room-item.active{background:var(--primary-color);color:white;}
        .room-icon{font-size:0.9rem;}
        .join-room-container{padding:20px;border-top:1px solid var(--border-color);}
        .join-room-input{width:100%;padding:12px 15px;border:none;border-radius:8px;background:var(--input-bg);color:var(--text-color);margin-bottom:10px;}
        .join-room-btn{width:100%;padding:12px;border:none;border-radius:8px;background:var(--primary-color);color:white;cursor:pointer;transition:all 0.3s ease;}
        .join-room-btn:hover{opacity:0.9;transform:translateY(-2px);}
        .main-content{flex:1;display:flex;flex-direction:column;height:100vh;overflow:hidden;}
        .game-header{padding:15px 20px;background:var(--sidebar-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;z-index:5;}
        .game-title{font-size:1.2rem;font-weight:600;}
        .mobile-menu-btn{display:none;background:none;border:none;color:var(--text-color);font-size:1.2rem;cursor:pointer;}
        .game-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--background);backdrop-filter:blur(10px);padding:20px;}
        .players-info{display:flex;justify-content:space-between;width:100%;max-width:800px;margin-bottom:20px;}
        .player{display:flex;align-items:center;padding:10px 15px;border-radius:8px;background:var(--message-bg);flex:1;max-width:48%;}
        .player.active{border:2px solid var(--primary-color);}
        .player-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:bold;color:white;font-size:1.2rem;margin-right:10px;}
        .player-name{font-weight:600;}
        .player-role{margin-top:5px;font-size:0.8rem;opacity:0.8;}
        .player-score{font-size:1.2rem;font-weight:bold;margin-top:5px;}
        .score-bar{height:10px;background:var(--input-bg);border-radius:5px;margin-top:5px;overflow:hidden;}
        .score-progress{height:100%;background:var(--primary-color);transition:width 0.3s ease;}
        .game-status{margin-top:15px;font-size:1.1rem;text-align:center;min-height:24px;}
        .question-card{background:var(--message-bg);padding:20px;border-radius:12px;margin-bottom:20px;width:100%;max-width:800px;}
        .question-text{font-size:1.1rem;margin-bottom:15px;}
        .options-container{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px;}
        .option-btn{padding:12px;border:none;border-radius:8px;background:var(--input-bg);color:var(--text-color);cursor:pointer;transition:all 0.3s ease;text-align:left;}
        .option-btn:hover{opacity:0.9;}
        .option-btn.selected{background:var(--primary-color);color:white;}
        .result-message{margin-top:15px;font-weight:bold;}
        .success{color:#28a745;}
        .error{color:#dc3545;}
        .profile-setup{background:var(--message-bg);padding:20px;border-radius:12px;margin:20px;animation:fadeIn 0.3s ease;max-width:500px;margin:20px auto;}
        .profile-title{margin-bottom:15px;font-size:1.1rem;}
        .color-picker{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0;}
        .color-option{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all 0.2s ease;}
        .color-option.selected{border-color:var(--text-color);transform:scale(1.1);}
        .profile-input{width:100%;padding:12px 15px;border:none;border-radius:8px;background:var(--input-bg);color:var(--text-color);margin-bottom:15px;}
        .profile-save-btn{width:100%;padding:12px;border:none;border-radius:8px;background:var(--primary-color);color:white;cursor:pointer;transition:all 0.3s ease;}
        .profile-save-btn:hover{opacity:0.9;}
        @media (max-width:768px){.sidebar{position:fixed;left:0;top:0;height:100vh;transform:translateX(-100%);box-shadow:2px 0 10px rgba(0,0,0,0.2);}.sidebar.open{transform:translateX(0);}.mobile-menu-btn{display:block;}.room-item{padding:10px 15px;}.options-container{grid-template-columns:1fr;}}
        @keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
        ::-webkit-scrollbar{width:8px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:4px;}::-webkit-scrollbar-thumb:hover{background:rgba(64,224,208,0.7);}
        .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--timestamp-color);text-align:center;padding:20px;}
        .empty-icon{font-size:3rem;margin-bottom:15px;opacity:0.5;}
        .winner-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;justify-content:center;align-items:center;z-index:100;}
        .winner-box{background:var(--sidebar-bg);padding:30px;border-radius:10px;text-align:center;max-width:80%;}
        .winner-text{font-size:1.5rem;margin-bottom:20px;}
        .winner-name{color:var(--primary-color);font-weight:bold;}
        .solo-stats{background:var(--message-bg);padding:15px;border-radius:8px;margin-top:20px;font-size:0.9rem;}