/* chess.css - Classic Chess Lobby Style - Updated Layout with Enhanced Rating Updates */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 15px;
    background: #c0c0c0;
    color: #000;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Main layout - Updated to make users panel full height and chat same size as tables */
.lobby-container {
    display: grid;
    grid-template-columns: 120px 1fr 250px;
    grid-template-rows: 1fr 280px; /* INCREASED: From 220px to 280px */
    height: calc(100vh - 8px); /* FIXED: Account for padding */
    gap: 2px;
    padding: 4px;
}

/* Remove container wrapper - not needed */

/* Left sidebar - spans both rows with simple auto layout */
.left-sidebar {
    grid-row: 1 / span 2;
    background: #9a9865;
    border: 2px inset #c0c0c0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

/* Container for top buttons */
.left-sidebar > .sidebar-btn:not(#optionsBtn) {
    margin-bottom: 8px;
    flex-shrink: 0;
}

.seated-player {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-start; /* Changed from center to flex-start */
  width: 100%;
  min-width: 0; /* Allow flex items to shrink below content size */
}

.seated-player .rating-color-box {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0; /* Never shrink the color box */
  order: -1; /* Ensure color box comes first */
}

.seated-player span {
  flex: 1;
  min-width: 0; /* Allow text to shrink */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.table-cell .seated-player {
  font-size: 13px;
  max-width: 100%; /* Constrain to cell width */
}

/* FIXED: Container for ratings legend and options button - moved up a bit more */
.sidebar-bottom-container {
    width: 100%;
    margin-top: auto; /* Push the whole container down */
    margin-bottom: 60px; /* INCREASED: 10px more to move container up slightly */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px; /* Space between ratings and options button */
    flex-shrink: 0;
}

/* FIXED: Ratings legend inside container - no margins needed */
.ratings-legend {
    width: 100%;
    position: relative;
    flex-shrink: 0;
}

/* FIXED: Options button inside container - simple styling */
.sidebar-bottom-container > #optionsBtn {
    margin: 0; /* No margins needed, controlled by container gap */
    flex-shrink: 0;
}

/* Title now positioned above and outside the white box */
.ratings-legend .legend-title {
    font-size: 13px;
    color: #ffffff;
    font-weight: bold;
    
    /* Tab styling */
    background: linear-gradient(to bottom, #2a7ba5 0%, #1a6b95 100%);
    border: 1px solid #0e5a7d;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: none; /* Connect to white box below */
    padding: 3px 8px;
    text-align: left;
    
    /* Positioning - above the white box */
    width: 70%;
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 0; /* No gap between title and content box */
    
    /* 3D effect */
    border-top-color: #3a8bb5;
    border-left-color: #3a8bb5;
    border-right-color: #0e5a7d;
    
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    
    /* Position above the content box */
    position: relative;
    z-index: 1;
}

/* Content box - now without the title inside */
.ratings-legend-content {
    background: white;
    border: 1px solid #808080;
    border-radius: 3px;
    border-top-left-radius: 0; /* Remove top-left radius to connect with title */
    padding: 4px;
    font-size: 10px;
    margin-top: -1px; /* Slight overlap to connect with title */
    position: relative;
    z-index: 0;
}

.ratings-legend .legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px; /* INCREASED: Much more space between lines */
    font-size: 13px; /* INCREASED: 2 sizes bigger (from 11px to 13px) */
}

.ratings-legend .legend-item:last-child {
    margin-bottom: 0;
}

.ratings-legend .color-box {
    width: 12px; /* INCREASED: Bigger squares */
    height: 12px; /* INCREASED: Bigger squares */
    margin-right: 6px; /* INCREASED: More space after square */
    border: none; /* REMOVED: Black border */
    flex-shrink: 0;
}

.ratings-legend .legend-text {
    color: #000;
    font-size: 13px; /* INCREASED: 2 sizes bigger (from 11px to 13px) */
}

/* FIXED: Options button positioning - always at bottom with proper margin */
.left-sidebar > #optionsBtn {
    margin-top: 0;
    margin-bottom: 0;
    flex-shrink: 0; /* Never shrink */
    position: relative; /* Keep in document flow but ensure it's at bottom */
}

/* UPDATED: Control button styling copied from table.css */
.sidebar-btn {
    background: #cdcb98; /* Custom color */
    border: 2px solid #a8a676; /* Darker version of base color for border */
    border-top-color: #e5e3b6; /* Lighter top border for 3D effect */
    border-left-color: #e5e3b6; /* Lighter left border for 3D effect */
    border-radius: 4px; /* Added 4px rounded corners */
    padding: 4px 8px;
    cursor: pointer;
    font-size: 11px;
    text-align: center;
    min-height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000; /* Black text */
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    margin-bottom: 2px; /* Extra margin between individual buttons */
    width: 100%;
    font-weight: bold;
    flex-shrink: 0; /* FIXED: Prevent buttons from shrinking */
}

.sidebar-btn:hover {
    background: #d6d4a5; /* Lighter on hover */
}

.sidebar-btn:active {
    background: #bfbd8b; /* Darker when clicked */
    border-top-color: #a8a676; /* Reverse the border colors */
    border-left-color: #a8a676;
    border-bottom-color: #e5e3b6;
    border-right-color: #e5e3b6;
}

.sidebar-btn:disabled {
    color: #606060;
    cursor: default;
    background: #cdcb98;
    opacity: 0.6;
}

.sidebar-btn.play-now {
    background: #cdcb98; /* Use custom color instead of green */
    color: #000;
}

.sidebar-btn.create-table {
    background: #cdcb98; /* Use custom color instead of pink */
    color: #000;
}

/* Center panel - now only takes top row */
.center-panel {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Tables section - now takes full height of center panel top row */
.tables-section {
    flex: 1;
    background: white; /* CHANGED: Back to white from #dcdcdc */
    border: 2px inset #c0c0c0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tables-header {
    background: linear-gradient(135deg, #FEFFC8 0%, #FEFFC8 100%);
    border-bottom: 1px solid #808080;
    padding: 4px 0; /* FIXED: Changed from 2px 0 to 4px 0 to match users-header */
    font-weight: bold;
    display: grid;
    grid-template-columns: 40px 60px 80px 80px 80px 1fr; /* INCREASED: Play column from 40px to 60px */
    font-size: 11px;
    min-height: 26px; /* ADDED: Match users-header height */
}

.tables-header div {
    padding: 2px 4px;
    border-right: 1px solid #808080;
    text-align: center;
    display: flex; /* ADDED: Match users-header styling */
    align-items: center; /* ADDED: Match users-header styling */
    justify-content: center; /* ADDED: Match users-header styling */
}

.tables-header div:last-child {
    border-right: none;
}

.table-list {
    flex: 1;
    overflow-y: auto;
    background: white; /* CHANGED: Back to white from #dcdcdc */
    min-height: 0;
}

.table-item {
    display: grid;
    grid-template-columns: 40px 60px 80px 80px 80px 1fr; /* INCREASED: Play column from 40px to 60px */
    border-bottom: 1px solid #e0e0e0;
    font-size: 11px;
    min-height: 18px;
    align-items: center;
    padding: 2px 0;
}

.table-item:hover {
    background: #e0e8ff;
}

.table-item.selected {
    background: #316ac5;
    color: white;
}

.table-cell {
    padding: 2px 4px;
    border-right: 1px solid #e0e0e0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-cell:last-child {
    border-right: none;
    text-align: left;
}

/* Action buttons in table rows - UPDATED: Added centering */
.table-actions {
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center; /* CENTER: Added this line to center the button */
}

.action-btn {
    background: #c0c0c0;
    border: 1px outset #c0c0c0;
    padding: 2px 4px; /* REDUCED: From 2px 8px to 2px 4px for better fit */
    font-size: 10px;
    cursor: pointer;
    font-family: inherit;
    min-height: 18px; /* INCREASED: From 16px to 18px for more height */
    text-align: center; /* CENTER: Added this line to center the text inside button */
    width: 100%; /* ADDED: Make button fill the entire cell width */
    height: 100%; /* ADDED: Make button fill the entire cell height */
    min-width: 50px; /* INCREASED: From 35px to 50px to fit "Watch" text */
    white-space: nowrap; /* PREVENT: Text from wrapping to new line */
}

.action-btn:hover {
    background: #d0d0d0;
}

.action-btn:active {
    border: 1px inset #c0c0c0;
}

.watch-btn {
    background: #87ceeb;
    color: #000;
}

.join-btn {
    background: #c0c0c0; /* CHANGED: From #90ee90 to #c0c0c0 */
    color: #000;
    text-align: center; /* CENTER: Added this line to center the WATCH text */
}

/* Right panel - users list (now spans both rows - full height) */
.users-panel {
    grid-row: 1 / span 2; /* Spans both rows for full height */
    grid-column: 3;
    background: white;
    border: 2px inset #c0c0c0;
    display: flex;
    flex-direction: column;
    overflow-x: visible !important; /* ENHANCED: Allow rating highlights to overflow */
}

/* Users panel header with sortable functionality */
.users-header {
    background: linear-gradient(135deg, #FEFFC8 0%, #FEFFC8 100%);
    border-bottom: 1px solid #808080;
    padding: 4px 8px; /* Match tables-header padding */
    font-weight: bold;
    font-size: 11px;
    display: grid;
    grid-template-columns: 60% 25% 15%; /* UPDATED: Name 60%, Rating 25%, Table 15% */
    gap: 4px;
    min-height: 26px; /* Match tables-header height */
}

.users-header div {
    padding: 2px 4px;
    border-right: 1px solid #808080;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.users-header div:last-child {
    border-right: none;
}

/* Sortable header styling */
.sortable-header {
    cursor: pointer !important;
    user-select: none;
    transition: background-color 0.2s ease;
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sortable-header:hover {
    background-color: rgba(94, 3, 149, 0.1) !important;
    border-radius: 2px;
}

.sortable-header:active {
    background-color: rgba(94, 3, 149, 0.2) !important;
}

.sort-indicator {
    font-size: 12px !important;
    color: #5e0395 !important;
    font-weight: bold !important;
    margin-left: 4px !important;
    display: inline-block !important;
    min-width: 12px !important;
    text-align: center !important;
}

.user-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible !important; /* ENHANCED: Allow rating highlights to overflow */
    background: white;
    min-height: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.user-item {
    display: grid;
    grid-template-columns: 60% 25% 15%; /* UPDATED: Match header percentages */
    padding: 1px 4px;
    font-size: 13px; /* INCREASED: From 12px to 13px */
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
    min-height: 20px; /* ENHANCED: Increased for better rating highlight display */
    color: #000; /* BLACK TEXT */
    overflow: visible !important; /* ENHANCED: Allow rating highlights to overflow */
    position: relative !important; /* ENHANCED: For z-index stacking */
}

.user-item:hover {
    background: #e8e8e8;
}

/* Rating color box for users list - now contained within name cell */
.user-name-with-color {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between color box and name */
}

.rating-color-box {
    width: 12px;
    height: 12px;
    border: none;
    flex-shrink: 0;
    transition: all 0.3s ease !important; /* ENHANCED: Smooth color transitions */
}

.user-info-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-name {
    font-weight: bold;
    color: #000; /* BLACK TEXT */
    font-size: 13px; /* INCREASED: From 12px to 13px */
}

/* ENHANCED: Base rating display styling with enhanced properties */
.user-rating-display {
    font-size: 12px; /* INCREASED: From 11px to 12px */
    color: #000; /* BLACK TEXT */
    text-align: center;
    transition: all 0.3s ease !important; /* ENHANCED: Smooth transitions */
    font-weight: normal !important;
    display: inline-block !important;
    min-width: 35px !important; /* ENHANCED: Ensure minimum width */
    position: relative !important; /* ENHANCED: For z-index */
}

.user-table-display {
    text-align: center;
    font-size: 12px; /* INCREASED: From 11px to 12px */
    color: #000; /* BLACK TEXT */
}

.user-status {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    color: white;
}

/* Status indicators */
.status-online { background: #27ae60; }
.status-ingame { background: #e74c3c; }
.status-authenticated { background: #3498db; }
.status-guest { background: #95a5a6; }

/* Rating colors - REMOVED: Now just used for reference, no colors applied */
.rating-1200-1399 { /* color: #8b4513; */ }
.rating-1400-1599 { /* color: #006400; */ }
.rating-1600-1799 { /* color: #4169e1; */ }
.rating-1800-1999 { /* color: #800080; */ }
.rating-2000-2199 { /* color: #ff4500; */ }
.rating-2200-plus { /* color: #dc143c; */ font-weight: bold; }

/* ========================================
   MINIMAL RATING UPDATE STYLES - NO VISUAL CHANGES
   ======================================== */

/* Remove all rating update highlight styles - keep original appearance */
.user-rating-display.rating-update-active,
.user-rating-display.rating-update-positive,
.user-rating-display.rating-update-draw {
    /* No visual changes - just allow the classes to exist without styling */
}

/* Header rating update styles */
.user-rating.rating-updated {
    color: #27ae60 !important;
    font-weight: bold !important;
    text-shadow: 0 0 5px rgba(39, 174, 96, 0.5) !important;
    animation: headerRatingPulse 1s ease-in-out !important;
}

@keyframes headerRatingPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Debugging styles - remove these in production */
.debug-highlight {
    border: 3px solid #ff00ff !important;
    background: rgba(255, 0, 255, 0.1) !important;
}

.debug-username {
    border: 2px solid #00ff00 !important;
}

.debug-rating {
    border: 2px solid #0000ff !important;
}

/* FIXED: Chat section - guaranteed to be visible with proper height */
.chat-section {
    grid-column: 2; /* Only spans the center column */
    grid-row: 2; /* Takes the bottom row */
    background: white;
    border: 2px inset #c0c0c0;
    display: flex;
    flex-direction: column;
    height: 280px; /* INCREASED: From 220px to 280px */
    max-height: 280px; /* Prevent overflow */
    min-height: 280px; /* Prevent shrinking */
    position: sticky;
    bottom: 0;
}

.chat-header {
    background: #ff9a66;
    border: 1px solid #000;
    border-bottom: 1px solid #808080;
    padding: 2px 8px;
    font-weight: bold;
    font-size: 13px;
    flex-shrink: 0; /* Don't shrink header */
    height: 23px; /* Fixed header height */
    color: #5130c5;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
    font-size: 12px;
    background: white;
    min-height: 200px; /* Set a larger minimum height */
    height: 220px; /* Set explicit height */
}

.chat-message {
    margin-bottom: 2px;
    word-wrap: break-word;
}

.chat-username {
    font-weight: bold;
    color: #000080;
}

/* FIXED: Chat input - guaranteed to always be visible */
.chat-input-container {
    border-top: 1px solid #808080;
    padding: 6px; /* FIXED: More padding for better visibility */
    background: #9a9865;
    display: flex;
    gap: 6px; /* FIXED: More gap for better spacing */
    flex-shrink: 0; /* NEVER shrink input area */
    align-items: center;
    height: 40px; /* FIXED: Fixed height ensures input is always visible */
    min-height: 40px; /* FIXED: Guarantee minimum height */
}

.chat-input {
    flex: 1;
    border: 1px inset #c0c0c0;
    padding: 6px 8px; /* FIXED: More padding for better usability */
    font-size: 11px;
    font-family: inherit;
    height: 28px; /* FIXED: Explicit height for input */
    min-height: 28px; /* FIXED: Ensure input is always visible */
    background: white;
}

.chat-input:focus {
    outline: none;
    background: #fffacd;
}

.chat-send-btn {
    background: linear-gradient(135deg, #cdcb98 0%, #cdcb98 100%);
    border: 2px outset #c0c0c0; /* FIXED: Thicker border for better visibility */
    padding: 6px 16px; /* FIXED: More padding */
    font-size: 11px;
     border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    height: 28px; /* FIXED: Match input height */
    min-height: 28px;
    white-space: nowrap;
    font-weight: bold;
    color: #000;
}

.chat-send-btn:hover {
    background: #d0d0d0;
}

.chat-send-btn:active {
    border: 2px inset #c0c0c0;
}

/* Create table form */
.create-table-form {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    margin: 8px;
    display: none;
    border: 1px solid #ddd;
}

.create-table-form.active {
    display: block;
}

.form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    font-size: 11px;
    color: #666;
    margin-bottom: 3px;
}

.form-group select,
.form-group input {
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 11px;
}

.form-buttons {
    display: flex;
    gap: 10px;
}

.form-buttons button {
    flex: 1;
    padding: 6px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-weight: bold;
    font-size: 11px;
}

.btn-primary {
    background: #3498db;
    color: white;
}

.btn-secondary {
    background: #95a5a6;
    color: white;
}

.create-table-btn {
    width: 100%;
    padding: 8px;
    background: #27ae60;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-weight: bold;
    font-size: 11px;
    margin: 8px;
}

.create-table-btn:hover {
    background: #219a52;
}

/* Loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    margin: 0 auto 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Scrollbars */
.table-list::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.user-list::-webkit-scrollbar {
    width: 16px;
}

.table-list::-webkit-scrollbar-track,
.user-list::-webkit-scrollbar-track {
    background: #c0c0c0;
    border: 1px inset #c0c0c0;
}

.chat-messages::-webkit-scrollbar-track {
    background: #cccc99;
    border: 1px inset #cccc99;
}

.table-list::-webkit-scrollbar-thumb,
.user-list::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border: 1px outset #c0c0c0;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: #cccc99;
    border: 1px outset #cccc99;
}

.table-list::-webkit-scrollbar-thumb:hover,
.user-list::-webkit-scrollbar-thumb:hover {
    background: #d0d0d0;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: #d6d6a6;
}

.table-list::-webkit-scrollbar-thumb:active,
.user-list::-webkit-scrollbar-thumb:active {
    border: 1px inset #c0c0c0;
}

.chat-messages::-webkit-scrollbar-thumb:active {
    border: 1px inset #cccc99;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .lobby-container {
        grid-template-columns: 1fr;
        grid-template-rows: 60px 1fr 200px 150px;
    }
    
    .left-sidebar {
        grid-row: 1;
        flex-direction: row;
        padding: 4px;
    }
    
    .sidebar-btn {
        min-height: 24px;
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .center-panel {
        grid-row: 2;
    }
    
    .users-panel {
        grid-row: 3;
        grid-column: 1;
    }
    
    .chat-section {
        grid-row: 4;
        grid-column: 1;
    }
}

/* Header styles - integrated design */
.header {
    background: linear-gradient(135deg, #FEFFC8 0%, #FEFFC8 100%);
    color: #5e0395;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #E6E6A3;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    min-height: 60px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 30px;
}

.header h1 {
    font-size: 26px; /* ADJUSTED: From 32px to 26px for perfect size */
    margin: 0;
    font-weight: bold;
    color: white;
    text-shadow: 
        -1px -1px 0px #000,
        1px -1px 0px #000,
        -1px 1px 0px #000,
        1px 1px 0px #000,
        2px 2px 0px #8a4fb8,
        3px 3px 0px #7a44a8,
        4px 4px 0px #6a3998,
        5px 5px 2px rgba(0, 0, 0, 0.3);
    transform: translateZ(0);
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Room Selection in Header */
.header-room-section {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.05);
    padding: 8px 15px;
    border-radius: 20px;
    backdrop-filter: blur(5px);
}

.header-room-section label {
    font-size: 12px;
    font-weight: bold;
    color: #5e0395;
}

.header-room-select {
    background: white;
    border: 1px solid #bdc3c7;
    border-radius: 15px;
    padding: 6px 12px;
    font-size: 11px;
    min-width: 130px;
    cursor: pointer;
}

.header-room-select:focus {
    outline: none;
    border-color: #5e0395;
    box-shadow: 0 0 5px rgba(94, 3, 149, 0.5);
}

.chat-header.not-connected {
  color: #dc143c !important; /* Red color for not connected */
  background: #ffcccc; /* Light red background */
}

.chat-header.connected {
  color: #5130c5; /* Original purple color */
  background: #ff9a66; /* Original orange background */
}

/* Guest Username in Header */
.header-username-section {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.05);
    padding: 8px 15px;
    border-radius: 20px;
    backdrop-filter: blur(5px);
}

.header-username-section label {
    font-size: 12px;
    font-weight: bold;
    color: #5e0395;
}

.header-username-input {
    background: white;
    border: 1px solid #bdc3c7;
    border-radius: 15px;
    padding: 6px 12px;
    font-size: 11px;
    min-width: 120px;
}

.header-username-input:focus {
    outline: none;
    border-color: #5e0395;
    box-shadow: 0 0 5px rgba(94, 3, 149, 0.5);
}

/* User Profile in Header */
.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.user-profile:hover {
    transform: translateY(-1px);
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5e0395 0%, #4a0275 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 16px;
    border: 2px solid rgba(94, 3, 149, 0.6);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    box-shadow: 0 2px 8px rgba(94, 3, 149, 0.3);
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-details .username {
    font-weight: bold;
    font-size: 14px;
    color: #5e0395;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-details .user-rating {
    font-size: 11px;
    color: #5e0395;
    opacity: 0.8;
    white-space: nowrap;
}

.header-buttons {
    display: flex;
    gap: 8px;
}

.header-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: all 0.3s ease;
}

.header-btn:not(.logout) {
    background: linear-gradient(135deg, #FEFFC8 0%, #F0F0A0 100%);
    color: #5e0395;
    border: 2px solid #5e0395;
    box-shadow: 0 2px 6px rgba(94, 3, 149, 0.3);
}

.header-btn:not(.logout):hover {
    background: linear-gradient(135deg, #F0F0A0 0%, #E6E6A3 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(94, 3, 149, 0.4);
}

.header-btn.logout {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3);
}

.header-btn.logout:hover {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.4);
}

/* Room selection overlay - hide when header controls are shown */
#roomSelectionView {
    display: none !important;
}

/* Show lobby view by default */
#lobbyView {
    display: grid !important;
}

/* Container adjustment */
.container {
    height: calc(100vh - 80px); /* Account for larger header */
}