/* Solitaire Window Styles */
#solitaire-window {
    width: 550px; /* Adjust width slightly if needed for 7 columns + gaps: (7*60) + (6*8) = 420 + 48 = 468px min content width */
    /* Let's keep width 550px for now, allows padding */
    height: 470px;
    position: absolute;
    top: 50px;
    left: 80px;
    background: #c0c0c0;
    display: block; /* Ensure it's visible */
}

/* Game board layout */
.solitaire-content {
    background: #008000; /* Standard green */
    padding: 15px 10px 10px 10px; /* More top padding */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Overall vertical gap */
    height: calc(100% - 60px);
    overflow: visible !important;
    box-sizing: border-box;
    position: relative;
}

/* Top section with foundation and stock - USE GRID */
.solitaire-top {
    display: grid;
    grid-template-columns: repeat(7, 60px); /* 7 columns matching tableau width */
    column-gap: 17px; /* Match tableau gap - ADJUSTED */
    /* height: 96px; Remove fixed height, let content define */
    align-items: start; /* Align items to the top of the grid area */
}

/* Make intermediate containers participate directly in parent grid */
.stock-waste,
.foundation-piles {
    display: contents; /* Children become direct grid items of .solitaire-top */
}

/* --- Remove old flex styles from intermediate containers --- */
/*
.stock-waste {
    display: flex;
    gap: 8px;
}
.foundation-piles {
    display: flex;
    gap: 8px;
    margin-left: 68px;
}
*/
/* ------------------------------------------------------------ */


/* Card pile placeholders */
.stock, .waste, .foundation, .tableau {
    width: 60px;
    height: 82px;
    border: 1px solid #000000; /* Black border */
    border-radius: 3px;
    position: relative; /* Needed for absolute positioned cards inside */
    overflow: visible !important;
    /* Ensure grid placement below doesn't add extra margin/padding */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- Place top items into the grid columns --- */
#stock {
    grid-column: 1;
    grid-row: 1; /* Explicitly set row */
}
#waste {
    grid-column: 2;
    grid-row: 1; /* Explicitly set row */
}
/* Assuming foundation IDs are foundation-0, foundation-1, etc. */
#foundation-0 {
    grid-column: 4;
    grid-row: 1; /* Explicitly set row */
}
#foundation-1 {
    grid-column: 5;
    grid-row: 1; /* Explicitly set row */
}
#foundation-2 {
    grid-column: 6;
    grid-row: 1; /* Explicitly set row */
}
#foundation-3 {
    grid-column: 7;
    grid-row: 1; /* Explicitly set row */
}
/* ----------------------------------------------- */


/* Tableau section */
.tableau-piles {
    display: flex; /* Keep flex for horizontal layout */
    gap: 17px; /* Horizontal gap between tableau piles - ADJUSTED */
    /* justify-content: space-between; Remove this if we want fixed gaps */
    flex-grow: 1;
    align-items: flex-start; /* Align piles to the top */
}

/* Card styles */
.card {
    width: 60px;
    height: 82px;
    background-image: url('../assets/cards/cards-sprite.png');
    background-repeat: no-repeat;
    background-size: 780px 492px; /* Fixed size: 13 cards × 60px wide, 6 rows × 82px high */
    border: 1px solid #000;
    border-radius: 3px;
    position: absolute;
    user-select: none;
    -webkit-user-select: none;
    image-rendering: pixelated;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    /* No transitions initially */
    transition: none;
    transform: none !important;
    z-index: 1;
    will-change: left, top;
}

/* Card back */
.card.face-down {
    /* Assume the 2nd back (index 1) is the red one */
    background-position: -60px -328px; 
}

/* Specific face card styles - in case we need to manually set some */
.spades-1 { background-position: 0 0; } /* Ace of Spades */
.spades-13 { background-position: -720px 0; } /* King of Spades */

/* Card back variations - fifth row at 82px per row */
.card.face-down.back-1 { background-position: 0 -328px; }
.card.face-down.back-2 { background-position: -60px -328px; }
.card.face-down.back-3 { background-position: -120px -328px; }
.card.face-down.back-4 { background-position: -180px -328px; }
.card.face-down.back-5 { background-position: -240px -328px; }
.card.face-down.back-6 { background-position: -300px -328px; }
.card.face-down.back-7 { background-position: -360px -328px; }
.card.face-down.back-8 { background-position: -420px -328px; }
.card.face-down.back-9 { background-position: -480px -328px; }
.card.face-down.back-10 { background-position: -540px -328px; }
.card.face-down.back-11 { background-position: -600px -328px; }
.card.face-down.back-12 { background-position: -660px -328px; }

/* Only face-up cards can be dragged */
.card.face-up {
    cursor: grab;
    z-index: 2;
}

/* Card dragging styles */
.card.dragging {
    cursor: grabbing !important;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4) !important;
    z-index: 1000 !important;
    transition: none !important;
}

/* Animation for returning cards to position */
.card.animating {
    transition: left 0.2s ease-out, top 0.2s ease-out !important;
}

/* Make tableau elements accept drops and stack cards */
.tableau {
    position: relative;
    width: 60px; /* Ensure fixed width */
    overflow: visible;
    border: none; /* Explicitly remove border for tableau */
    /* Ensure tableau piles don't have extra margin */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Make sure cards in tableau are staggered vertically for clear view */
.tableau .card {
    position: absolute !important;
}

/* Stock and waste piles */
/* These styles are covered by the generic .stock, .waste, .foundation rule now */

/* Foundation piles (for Aces) */
.foundation {
    position: relative; /* Already set, but ensure it's here */
    height: 82px;
    width: 60px;
    /* Border is set by generic rule */
    border-radius: 3px;
}

/* Add a small highlight to foundation to indicate target */
.foundation:empty {
    background: none;
    background-image: radial-gradient(#000000 1px, transparent 1px);
    background-size: 5px 5px;
    background-position: center;
}

/* Ensure all containers allow content to overflow for proper drag and drop */
.pile, .foundation, .tableau, .stock, .waste {
    overflow: visible !important;
}

/* Windows 98 window styling */
/* Refined Window Menu Styles */
.window-menu {
    display: flex;
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
    padding: 1px 2px; /* Padding creates the space for items */
    height: 20px;
    align-items: center; /* Align items vertically */
    box-sizing: border-box;
}

.window-menu .menu-item {
    /* Remove vertical margin and border */
    margin: 0 1px; /* Keep horizontal margin for spacing */
    border: none; 
    /* Set height to fill the container's inner height */
    height: 100%; 
    /* Use flex to vertically center the text within the item */
    display: inline-flex; 
    align-items: center;
    padding: 0 7px; /* Horizontal padding for text */
    cursor: pointer;
    font-size: 11px;
    font-family: 'MS Sans Serif', Arial, sans-serif;
    box-sizing: border-box;
}

.window-menu .menu-item:hover {
    background: #000080;
    color: white;
}

/* Solitaire Status Bar Styles */
.solitaire-status-bar {
    display: flex; /* Arrange items horizontally */
    height: 20px; /* Standard status bar height */
    padding: 1px 2px; /* Small padding */
    background: #c0c0c0; /* Standard Win98 silver */
    border-top: 1px solid #808080; /* Separator line */
    box-sizing: border-box;
    align-items: center; /* Vertically center content */
    font-size: 11px; /* Standard UI font size */
    font-family: 'MS Sans Serif', Arial, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

/* Individual sections within the status bar */
.solitaire-status-bar > div {
    padding: 0 5px; /* Horizontal padding inside each section */
    line-height: 16px; /* Adjust line height for vertical centering */
    height: 100%; /* Make sections fill bar height */
    
    /* Classic Win98 sunken border */
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080; /* top/left dark, bottom/right light */
    box-shadow: inset 1px 1px 0 #000000; /* Inner shadow for sunken effect */
    
    /* Ensure text doesn't wrap */
    white-space: nowrap; 
}

/* Spacing between sections (achieved via padding, no extra margin needed) */

/* Optional: Adjust widths if needed, but flex should handle it */
/* .solitaire-status-bar .score { flex-grow: 1; } */
/* .solitaire-status-bar .time { flex-shrink: 0; } */
/* .solitaire-status-bar .game-number { flex-shrink: 0; } */

/* Fix for window title icon */
.window-title .title-icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

/* Additional styles for tableau and card positioning */
/* Removed redundant tableau styles here */

/* Debug test - to ensure CSS is loaded */
.css-test {
    display: none; /* Hide the test div */
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: red;
    z-index: 9999;
}

/* Ensure cards can appear above other elements during drag */
.dragging {
    z-index: 9999 !important;
}

/* Dropdown Menu Styles (add at the end) */
.dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    background-color: #c0c0c0; /* Win98 silver */
    min-width: 120px;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff; /* Raised border */
    box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    padding: 1px; /* Overall padding around items */
    z-index: 1500; /* Ensure it's above window content */
    font-family: 'MS Sans Serif', Arial, sans-serif;
    font-size: 11px;
}

.dropdown-item {
    padding: 3px 15px; /* Padding inside items */
    color: black;
    cursor: pointer;
    white-space: nowrap;
}

.dropdown-item:hover {
    background-color: #000080; /* Win98 selection blue */
    color: white;
}

/* Style for disabled menu items */
.dropdown-item.disabled {
    color: #808080; /* Grey out text */
    cursor: default; /* Indicate non-interactive */
}

/* Prevent hover effect on disabled items */
.dropdown-item.disabled:hover {
    background-color: #c0c0c0; /* Keep original background */
    color: #808080; /* Keep text grey */
}

.dropdown-separator {
    height: 1px;
    background-color: #808080; /* Dark gray line */
    border-bottom: 1px solid #ffffff; /* White highlight below */
    margin: 3px 1px; /* Vertical margin, slight horizontal inset */
}

/* Optional active state for the menu bar button IN SOLITAIRE */
#solitaire-window .window-menu .menu-item.active {
     /* Remove previous background and dotted border */
     /* background-color: #eee; */
     /* border: 1px dotted #000; */
     
     /* Apply sunken border */
     border: 1px solid;
     border-color: #808080 #ffffff #ffffff #808080; /* top/left dark, bottom/right light */
     /* Ensure padding accounts for the border */
     padding: 0px 6px;
     margin: 0px 1px; 
     /* Keep background default silver */
     background-color: #c0c0c0;
     /* Keep text black */
     color: black;
}

/* Ensure active item doesn't change on hover IN SOLITAIRE */
#solitaire-window .window-menu .menu-item.active:hover {
    background-color: #c0c0c0;
    color: black;
    border-color: #808080 #ffffff #ffffff #808080;
}

/* --- Dialog Overlay (shared by Card Back, Options, About) --- */
.card-back-dialog-overlay,
.about-dialog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.card-back-dialog,
.about-dialog {
    width: auto;
    min-width: 200px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    font-family: 'MS Sans Serif', Arial, sans-serif;
    font-size: 11px;
}

.card-back-dialog .window-title,
.about-dialog .window-title {
    background: #000080;
    color: white;
    padding: 2px 4px;
    font-size: 11px;
    font-weight: bold;
    user-select: none;
}

/* Card Back Selection Grid */
.card-back-grid {
    display: grid;
    grid-template-columns: repeat(4, 60px);
    gap: 8px;
    justify-content: center;
}

.card-back-option {
    width: 60px;
    height: 82px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 3px;
    image-rendering: pixelated;
}

.card-back-option:hover {
    border-color: #808080;
}

.card-back-option.selected {
    border-color: #000080;
    box-shadow: 0 0 0 1px #000080;
}

/* Win98 Button style (for dialogs) */
.win98-button {
    font-family: 'MS Sans Serif', Arial, sans-serif;
    font-size: 11px;
    padding: 2px 10px;
    min-width: 60px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    cursor: pointer;
    margin-left: 4px;
}

.win98-button:active {
    border-color: #808080 #ffffff #ffffff #808080;
}

/* Waste pile fan for Draw 3 mode */
#waste.draw-three {
    width: 90px; /* Extra width for fanned cards */
}