:root,.dark-mode{--primary-color:#40e0d0e6;--background:#191923f2;--sidebar-bg:#14141ee6;--message-bg:#ffffff0d;--text-color:#fff;--input-bg:#ffffff1a;--border-color:#ffffff1a;--shadow-color:#0000004d;--timestamp-color:#ffffffb3}.light-mode{--primary-color:#40e0d0;--background:var(--surface-strong);--sidebar-bg:#f0f0f5e6;--message-bg:#00000008;--text-color:#333;--input-bg:#0000000d;--border-color:#0000001a;--shadow-color:#0000001a;--timestamp-color:#0009}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--text-color);background:var(--background);min-height:100vh;margin:0;transition:background-color .3s;display:flex}.app-container{width:100%;height:100vh;display:flex;position:relative}.sidebar{background:var(--sidebar-bg);border-right:1px solid var(--border-color);z-index:10;flex-direction:column;width:280px;height:100vh;transition:transform .3s;display:flex;overflow-y:auto}.sidebar-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:20px;display:flex}.sidebar-title{font-size:1.2rem;font-weight:600}.theme-toggle{color:var(--text-color);cursor:pointer;background:0 0;border:none;border-radius:50%;padding:5px;font-size:1.2rem;transition:all .3s}.theme-toggle:hover{background:var(--input-bg)}.room-list{flex:1;padding:10px 0;overflow-y:auto}.room-item{cursor:pointer;align-items:center;gap:10px;padding:12px 20px;transition:background-color .2s;display:flex}.room-item:hover{background:var(--input-bg)}.room-item.active{background:var(--primary-color);color:#fff}.room-icon{font-size:.9rem}.join-room-container{border-top:1px solid var(--border-color);padding:20px}.join-room-input{border-radius:var(--radius-lg);background:var(--input-bg);width:100%;color:var(--text-color);border:none;margin-bottom:10px;padding:12px 15px}.join-room-btn{border-radius:var(--radius-lg);background:var(--primary-color);color:#fff;cursor:pointer;border:none;width:100%;padding:12px;transition:all .3s}.join-room-btn:hover{opacity:.9;transform:translateY(-2px)}.main-content{flex-direction:column;flex:1;height:100vh;display:flex;overflow:hidden}.game-header{background:var(--sidebar-bg);border-bottom:1px solid var(--border-color);z-index:5;justify-content:space-between;align-items:center;padding:15px 20px;display:flex}.game-title{font-size:1.2rem;font-weight:600}.mobile-menu-btn{color:var(--text-color);cursor:pointer;background:0 0;border:none;font-size:1.2rem;display:none}.game-container{background:var(--background);flex-direction:column;flex:1;justify-content:center;align-items:center;padding:20px;display:flex}.board-container{margin:20px 0;position:relative}.board{box-shadow:0 0 10px var(--shadow-color);background:#dcb35c;position:relative}.grid-line{background:#000;position:absolute}.piece{border-radius:50%;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 5px #00000080}.piece.black{background:#000}.piece.white{background:#fff}.piece.last-move:after{content:"";background:red;border-radius:50%;width:8px;height:8px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.players-info{justify-content:space-between;width:100%;max-width:500px;margin-bottom:20px;display:flex}.player{border-radius:var(--radius-lg);background:var(--message-bg);flex:1;align-items:center;max-width:48%;padding:10px 15px;display:flex}.player.active{border:2px solid var(--primary-color)}.player-avatar{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;margin-right:10px;font-size:1.2rem;font-weight:700;display:flex}.player-name{font-weight:600}.player-role{opacity:.8;margin-top:5px;font-size:.8rem}.game-status{text-align:center;min-height:24px;margin-top:15px;font-size:1.1rem}.restart-btn{border-radius:var(--radius-lg);background:var(--primary-color);color:#fff;cursor:pointer;border:none;margin-top:15px;padding:10px 20px;transition:all .3s}.restart-btn:hover{opacity:.9;transform:translateY(-2px)}.role-selection{justify-content:center;gap:15px;margin-top:20px;display:flex}.role-btn{border-radius:var(--radius-lg);cursor:pointer;background:var(--input-bg);color:var(--text-color);border:none;padding:10px 20px;transition:all .3s}.role-btn:hover{opacity:.9}.role-btn.selected{background:var(--primary-color);color:#fff}.profile-setup{background:var(--message-bg);border-radius:var(--radius-md);max-width:500px;margin:20px auto;padding:20px;animation:.3s fadeIn}.profile-title{margin-bottom:15px;font-size:1.1rem}.color-picker{flex-wrap:wrap;gap:10px;margin:15px 0;display:flex}.color-option{cursor:pointer;border:2px solid #0000;border-radius:50%;width:30px;height:30px;transition:all .2s}.color-option.selected{border-color:var(--text-color);transform:scale(1.1)}.profile-input{border-radius:var(--radius-lg);background:var(--input-bg);width:100%;color:var(--text-color);border:none;margin-bottom:15px;padding:12px 15px}.profile-save-btn{border-radius:var(--radius-lg);background:var(--primary-color);color:#fff;cursor:pointer;border:none;width:100%;padding:12px;transition:all .3s}.profile-save-btn:hover{opacity:.9}@media (width<=768px){.sidebar{height:100vh;position:fixed;top:0;left:0;transform:translate(-100%);box-shadow:2px 0 10px #0003}.sidebar.open{transform:translate(0)}.mobile-menu-btn{display:block}.room-item{padding:10px 15px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:#40e0d0b3}.empty-state{height:100%;color:var(--timestamp-color);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:20px;display:flex}.empty-icon{opacity:.5;margin-bottom:15px;font-size:3rem}.winner-overlay{z-index:100;background:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.winner-box{background:var(--sidebar-bg);border-radius:var(--radius-md);text-align:center;max-width:80%;padding:30px}.winner-text{margin-bottom:20px;font-size:1.5rem}.winner-name{color:var(--primary-color);font-weight:700}