#app {
    width: 100%;
    height: 100%;
}

.screen {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Game Screen Layout */
#game-screen {
    background: transparent;
    display: flex;
    flex-direction: row;
}

/* Sidebar */
.sidebar {
    width: 350px;
    flex-shrink: 0;
    height: 100%;
    background: rgba(18, 18, 24, 0.6);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10;
    box-shadow: 5px 0 30px rgba(0, 0, 0, 0.2);
}

/* Main Area */
.main-area {
    flex: 1;
    min-width: 0; /* Allows flex item to shrink below content size */
    height: 100%;
    display: flex;
    flex-direction: column;
    background: transparent;
    position: relative;
}

/* Chat Sidebar */
.chat-sidebar {
    width: calc(280px * var(--scale-factor));
    flex-shrink: 0;
    height: 100%;
    background: rgba(18, 18, 24, 0.6);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
}

/* Color Sidebar */
.color-sidebar {
 width: 260px;
 flex-shrink: 0;
 height: 100%;
 background: rgba(18, 18, 24, 0.6);
 border-right: 1px solid rgba(255, 255, 255, 0.08);
 display: flex;
 flex-direction: column;
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 z-index: 9;
 box-shadow: 5px 0 30px rgba(0, 0, 0, 0.1);
}


/* Sidebar Group (Double Sidebar) */
.sidebar-group {
    display: flex;
    height: 100%;
    z-index: 10;
    /* Shadow moved to col-1 */
}

.sidebar-col-1 {
    width: calc(280px * var(--scale-factor));
    flex-shrink: 0;
    height: 100%;
    background: rgba(18, 18, 24, 0.6);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.sidebar-col-2 {
    width: calc(280px * var(--scale-factor));
    flex-shrink: 0;
    height: 100%;
    background: rgba(18, 18, 24, 0.6);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 5px 0 30px rgba(0, 0, 0, 0.2);
    z-index: 9;
}/* Hide old sidebars if they exist in CSS but not HTML */
.sidebar, .color-sidebar {
 display: none;
}


/* Right Side Sidebar Style */
.sidebar-col-2.right-side {
 border-right: none;
 border-left: 1px solid rgba(255, 255, 255, 0.08);
 box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
}