body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: white;
            display: flex;
            height: 100vh;
            width: 100vw;
        }

        #gameContainer {
			flex: 1;
			position: relative;
			overflow: hidden;
			z-index: 1;
			transition: all 0.3s ease;
		}
		
		#gameContainer.fullscreen {
			width: 100vw !important;
			height: 100vh !important;
		}
		#cubeChessLogo {
			position: absolute;
			top: 10px;
			left: 10px;
			width: 200px; /* Adjust size if needed */
			height: auto;
			z-index: 10; /* Ensure it appears above the game */
			pointer-events: auto; /* Prevents interaction issues */
			transform-origin: top left;
		}
		
		/* Rotate in landscape mode */
		@media (orientation: portrait) {
			#cubeChessLogo {
				transform: rotate(-90deg);
				top: 201px;
				left: 1px;
				
			}
		}

		
		#nextMoveOverlay {
			position: fixed;
			top: 20px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1001;
			pointer-events: none; /* Allow clicking through */
		}
		
		#nextMove {
			color: white;
			font-size: 18px;
			text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Make text more visible */
			font-family: "Roboto", Roboto, sans-serif;
			font-weight: bold;
		}

		/* ── Player HUD Table ─────────────────────────────── */
		#playerHud {
			display: table;
			border-collapse: collapse;
			border: 1px solid #16a4bb;
			border-radius: 4px;
			min-width: 220px;
			background: rgba(0,0,0,0.55);
			font-family: "Roboto", Roboto, sans-serif;
		}
		.hud-row {
			display: table-row;
		}
		.hud-row + .hud-row .hud-cell {
			border-top: 1px solid #16a4bb;
		}
		.hud-avatar-cell {
			display: table-cell;
			vertical-align: middle;
			padding: 2px 4px 2px 0;
			position: relative;
			width: 36px;
			min-width: 36px;
			overflow: visible;
		}
		.hud-avatar-cell img {
			display: block;
			width: 32px;
			height: 32px;
			max-width: 32px;
			max-height: 32px;
			min-width: 32px;
			min-height: 32px;
			border-radius: 4px;
			position: relative;
			left: -36px;
			image-rendering: pixelated;
			flex-shrink: 0;
		}
		.hud-cell {
			display: table-cell;
			vertical-align: middle;
			padding: 2px 10px 2px 6px;
			white-space: nowrap;
			color: #fff;
			font-size: 13px;
			font-weight: 600;
			letter-spacing: 0.02em;
		}
		.hud-arrow {
			color: #16a4bb;
			font-size: 14px;
			margin-right: 4px;
			display: inline-block;
			width: 12px;
		}
		.hud-check {
			color: #16a4bb;
			font-weight: 900;
			margin-left: 6px;
			font-size: 12px;
			letter-spacing: 0.05em;
		}
		.hud-you {
			color: #aaa;
			font-size: 11px;
			font-weight: 400;
			margin-left: 3px;
		}
		.hud-guest {
			color: #aaa;
			font-size: 11px;
			font-weight: 400;
			margin-left: 3px;
		}
		.hud-color {
			color: #ccc;
			font-size: 11px;
			margin-left: 5px;
		}
		/* ── End Player HUD Table ─────────────────────────── */

		/* ── Clock Bar ───────────────────────────────────── */
		#clockBar {
			display: none;
			gap: 10px;
			justify-content: center;
			margin-top: 5px;
			pointer-events: none;
		}
		.clock-box {
			background: rgba(0,0,0,0.65);
			border: 1px solid rgba(255,255,255,0.18);
			border-radius: 6px;
			padding: 2px 12px;
			color: #ccc;
			font-family: monospace;
			font-size: 17px;
			font-weight: bold;
			letter-spacing: 0.06em;
			min-width: 62px;
			text-align: center;
			transition: border-color 0.2s, color 0.2s, background 0.2s;
		}
		.clock-box.clock-active {
			border-color: #16a4bb;
			color: #fff;
			background: rgba(22,164,187,0.18);
		}
		.clock-box.clock-low {
			color: #ff5555;
			border-color: #ff5555;
			background: rgba(255,60,60,0.15);
			animation: clockPulse 0.9s infinite;
		}
		.clock-label {
			font-size: 11px;
			opacity: 0.6;
			margin-right: 4px;
			font-family: sans-serif;
		}
		@keyframes clockPulse {
			0%, 100% { opacity: 1; }
			50% { opacity: 0.55; }
		}
		/* ── End Clock Bar ───────────────────────────────── */

		    @keyframes checkWarningGrow {
        from {
            font-size: 10px;
            opacity: 0.2;
        }
        to {
            font-size: 25px;
            opacity: 1;
        }
    }

    .check-warning {
        color: #16a4bb;
        font-family: "Roboto Black", Roboto, sans-serif;
        font-weight: 900;
        text-align: center;
        margin-top: 10px;
        
        /* Animation settings */
        animation: checkWarningGrow 0.3s ease-out forwards;
    }
	.checkmate-warning {
        color: #FFF;
        font-family: "Roboto", Roboto, sans-serif;
        font-weight: 600;
        text-align: center;
        margin-top: 12px;
        
    }

    .check-warning.fade-out {
        opacity: .2;
        transition: opacity 0.0s ease-out;
    }
	#checkWarning {
		pointer-events: none; /* Enable clicking on children */
	}

        #sidePanel {
            width: 250px;
            background-color: rgba(255, 255, 255, 0.95);
            border-left: 1px solid #ccc;
            display: flex;
            flex-direction: column;
            z-index: 2;
            position: relative;
        }

        #topPanel {
            padding: 10px;
			padding-top: 5px; /* Reduced since we removed nextMove */
            border-bottom: 1px solid #ccc;
            background-color: #f8f8f8;
            z-index: 3;
        }

        #bottomPanel {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
            font-family: monospace;
            line-height: 1.4;
            font-size: 14px;
        }

        canvas {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
        }

        .game-controls button {
            padding: 8px 15px;
            margin-right: 10px;
            background-color: #ffffff;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
		.arrow-button {
				border: none;
				background: none;
				padding: 0;
				cursor: pointer;
				outline: none;
			}
			
			.arrow-button:active {
				transform: scale(0.95);
			}
			
			.arrow-button img {
				 	width: 60%;  /* Scale to 60% of original size */
					height: auto;  /* Maintain aspect ratio */
					transition: opacity 0.2s;
			}
			
			.arrow-button:hover img {
				opacity: 0.8;
			}
		
		.checkmate-modal {
			width: 300px;
			height: 200px;
			background-image: url('maps/endgame.png');
			background-size: cover;
			background-position: center;
			border-radius: 0px;
			position: relative;
			color: white;
			padding: 10px;
			opacity: 1;
			transform: translateY(0);
			transition: opacity 0.5s ease, transform 0.5s ease;
			pointer-events: auto;
		}

.checkmate-message {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    text-align: left;
	opacity: 1;
}

.checkmate-message h1 {
    font-size: 24px;
	font-family: "Roboto", Roboto, sans-serif;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.checkmate-message h2 {
    font-size: 18px;
	font-family: "Roboto", Roboto, sans-serif;
	font-weight: 200;
	text-align: center;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.checkmate-message p {
    font-size: 16px;
	font-family: "Roboto", Roboto, sans-serif;
	font-weight: 200;
	text-align: center;
    opacity: 0.8;
    margin-bottom: 30px;
}
.new-game-btn-top {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-family: "Roboto", Roboto, sans-serif;
    margin-top: 10px;
	z-index: 1001; /* Higher than modal overlay */
    pointer-events: auto; /* Enable clicking */
}

.new-game-btn-top:hover {
    background-color: #45a049;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
	
}
.new-game-btn {
    position: absolute;
    left: 5px;
    bottom: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 8px 15px;
    font-size: 12px;
    border-radius: 1px;
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.checkmate-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;  /* Start hidden */
}

/* Hover effect for the button */
.new-game-btn:hover {
    background-color: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.promotion-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.promotion-title {
    text-align: center;
    font-size: 18px;
    margin-bottom: 15px;
}

.promotion-pieces {
    display: flex;
    gap: 15px;
}

.promotion-piece {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    border: 2px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.promotion-piece:hover {
    background: #f0f0f0;
    border-color: #999;
    transform: scale(1.05);
}

.pending-move {
    opacity: 0.6;
    font-style: italic;
}

        @media (orientation: portrait) {
    body {
        flex-direction: column;
    }

    #sidePanel {
        width: 100%;
        height: auto; /* Change from fixed height to auto */
        min-height: 300px; /* Set minimum height */
        max-height: 200vh; /* Maximum height of 50% viewport height */
        flex-direction: column;
    }

    #topPanel {
        width: 100%;
        flex: none;
        padding: 10px; /* Slightly reduce padding */
    }

    #bottomPanel {
        flex: 1;
        height: auto;
        max-height: calc(170vh - 200px); /* Account for topPanel height */
        overflow-y: auto; /* Allow scrolling if content is too long */
        padding: 10px;
        font-size: 12px;
    } /* Make sure game container takes remaining space */
    #gameContainer {

        flex: 1;
        min-height: 50vh; /* Ensure game gets at least 50% of viewport height */
    }
}

/* --- Styles for Network Overlay --- */
#networkOverlay {
    display: none; /* Hide overlay by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1002;
    pointer-events: auto;
    transition: background-color 0.3s ease;
    /* Changed to display: flex for centering content */
    /*display: flex;*/
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', Arial, sans-serif;
    color: #fff;
    overflow-y: auto; /* Allow scrolling if content overflows */
}


/* --- Style ALL Buttons within the Overlay --- */
#networkOverlay button {
    background: #2c5948; /* Dark square color */
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 16px;
    font-family: 'Roboto', Arial, sans-serif;
    margin: 5px 3px; /* Consistent margin */
    cursor: pointer;
    box-shadow: none;
    transition: background 0.2s;
    display: inline-block;
    min-width: 100px;
    text-align: center;
}

#networkOverlay button:hover,
#networkOverlay button:focus {
    background: #366b57; /* Slightly lighter dark square */
}

/* --- Style ALL Text/Email/Password Inputs within the Overlay --- */
#networkOverlay input[type="text"],
#networkOverlay input[type="email"],
#networkOverlay input[type="password"] {
    background: #ddf0d2; /* Light square color */
    color: #000000;
    border: none;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 16px;
    font-family: 'Roboto', Arial, sans-serif;
    margin-bottom: 10px; /* Consistent bottom margin */
    outline: none;
    box-shadow: none;
    display: block; /* Make inputs take full width within their container */
    width: 80%; /* Adjust width as needed */
    margin-left: auto; /* Center inputs within their container */
    margin-right: auto; /* Center inputs within their container */
    box-sizing: border-box; /* Include padding/border in width */
}

/* Container for the initial Room ID input and buttons */
#networkControls {
    /* Removed background, padding, border-radius - handled by overlay or specific sections */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 320px;
    gap: 10px; /* Reduced gap slightly */
    margin-bottom: 20px; /* Space before auth/room sections */
}

/* Remove specific input/button styles from #networkControls if they are now covered by the general rules above */
/*
#networkControls input[type="text"] { ... }
#networkControls button { ... }
#networkControls button:hover, #networkControls button:focus { ... }
*/


#authSection {
    width: 90%;
    max-width: 350px;
    margin: 0 auto 20px auto; /* Center and add bottom margin */
    text-align: center;
    border-top: 1px solid #555; /* Separator line */
    padding-top: 20px; /* Space above auth elements */
}

/* Adjust specific margins if needed, e.g., for logout */
#authSection #logoutBtn {
    margin-top: 15px; /* Keep specific margin for logout */
}

#roomSection {
    margin-top: 0; /* Remove top margin as authSection now has bottom margin */
    border-top: 1px solid #555; /* Separator line */
    padding-top: 20px;
    width: 90%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: none; /* Initially hidden by JS */
    margin-bottom: 20px; /* Add space below room controls */
}

#inviteInstructions {
    max-width: 800px;
    width: 90%;
    margin: 20px auto; /* Consistent vertical margin, auto horizontal */
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 200;
    color: rgba(255, 255, 255, 0.5);
}

#inviteInstructions h4 {
    margin-bottom: 15px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.7);
    text-align: left;
}

#inviteInstructions ol {
    margin: 0;
    padding-left: 20px;
    list-style-position: outside;
    text-align: left;
}

#inviteInstructions li {
    line-height: 1.7;
    margin-bottom: 10px;
    text-align: left;
}

#networkMessages {
    margin-top: 12px;
    text-align: center;
    font-size: 15px;
    color: #f0e6d2;
    font-family: 'Roboto', Arial, sans-serif;
}

/* Status text styling */
#networkStatus,
#assignedColor,
#authStatus /* Style auth status similarly */ {
    color: #fff !important;
    display: block; /* Ensure status takes its own line */
    margin-bottom: 10px; /* Space below status text */
    min-height: 1.2em; /* Prevent layout shift when text appears/disappears */
}

#assignedColor {
    font-weight: bold;
}

/* Ensure direct children of overlay allow clicks (like toggle button) */
/*#networkOverlay > * {*/
     /*pointer-events: auto;*/
/*}*/

/* Styles for the overlay when expanded (controlled by JS adding/removing class) */
#networkOverlay.expanded {
    display: flex; /* Use flex to enable centering */
    /* background: rgba(0, 0, 0, 0.85); */ /* Already set */
    /* pointer-events: auto; */ /* Already set */
}

/* Styles for the toggle button */
#networkToggle {
    position: fixed;
    bottom: 10px;
    left: 10px;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    z-index: 1003;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: transform 0.3s, top 0.3s, left 0.3s, bottom 0.3s;
}

#networkToggle::before {
     content: '';
     width: 0;
     height: 0;
     border-top: 6px solid transparent;
     border-bottom: 6px solid transparent;
     border-left: 8px solid #666;
     transition: transform 0.3s;
 }

/* Styles for the expanded state (top-left, triangle down) will be added later */
/* Example:
#networkOverlay.expanded #networkToggle {
    top: 10px;
    left: 10px;
    bottom: auto;
}
#networkOverlay.expanded #networkToggle::before {
    transform: rotate(90deg);
}
*/

#menuToggle {
    position: fixed;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

/* Landscape position */
@media (orientation: landscape) {
    #menuToggle {
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    #menuToggle.panel-hidden {
        right: 0;
    }
    
    #menuToggle::before {
        content: '';
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid #666;
        transition: transform 0.3s;
    }
    
    #menuToggle.panel-hidden::before {
        transform: rotate(180deg);
    }
}

/* Portrait position */
@media (orientation: portrait) {
    #menuToggle {
        bottom: 8px;
        right: 10px;
        left: auto;
        transform: none;
        width: 40px;
        height: 40px;
    }

    #menuToggle.panel-hidden {
        bottom: 0;
        right: 0;
    }

    #menuToggle::before {
        content: '';
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #666;
        transition: transform 0.3s;
    }

    #menuToggle.panel-hidden::before {
        transform: rotate(180deg);
    }
}

#compactInfoBar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 49;
    padding: 5px 54px 5px 12px;
    font-family: monospace;
    font-size: 13px;
    display: none;
    gap: 2em;
    align-items: center;
    pointer-events: none;
}
@media (orientation: landscape) {
    #compactInfoBar {
        padding-right: 12px;
    }
}

#sidePanel {
    width: 250px;
    background-color: rgba(255, 255, 255, 0.95);
    border-left: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    z-index: 2;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden; /* Add this */
}

/* Add or update these panel hiding rules */
#sidePanel.hidden {
    width: 0 !important; /* Force width to 0 when hidden */
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    opacity: 0; /* Make it invisible */
}

@media (orientation: portrait) {
    #sidePanel {
        width: 100%;
        height: 250px;
    }

    #sidePanel.hidden {
        height: 0 !important; /* Force height to 0 in portrait mode */
        width: 100% !important; /* Keep full width */
        min-height: 0 !important;
    }
}