:root {
    --cell-size: 20px; /* Default fallback */
}


.game-wrapper {
    background-color: var(--bg-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90dvh;
    padding: 20px;
}

.game-board {
    display: grid;
    gap: 15px;
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 768px) {    
    .game-board {
        gap: 30px;
    }
}

/* Tall Layout (Current - Height > Width) */
.game-container.tall-layout .game-board {
    grid-template-rows: 1fr 3fr .5fr;    /* shelf, grid, details */
    grid-template-columns: 1fr;          /* single column */
    /* Calculate max-width based on available height and 1:2 aspect ratio */
    max-width: min(750px, 50dvh); /* 1:2 ratio */
}

/* Wide Layout (New - Width > Height) */
.game-container.wide-layout .game-board {
    grid-template-columns: 1fr 3fr 1fr;  /* shelf, grid, details */
    grid-template-rows: 1fr;             /* single row */
    /* Max-width calculated dynamically in JavaScript */
    max-width: var(--wide-layout-max-width, 1500px);
}

/* Shelf Section */
.shelf {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-radius: 10px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

/* Shelf in Tall Layout (3 columns, 1 row) */
.game-container.tall-layout .shelf {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
}

/* Shelf in Wide Layout (1 column, 3 rows) */
.game-container.wide-layout .shelf {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    
}

.shelf-spot {
    aspect-ratio: 1/1;
    border: 1px dashed var(--dark-2);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

/* Grid Section */
.grid-container {
    display: flex;
    justify-content: center;
}

.sudoku-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 1px;    
    border: none;
    border-radius: 0;
    padding: 1px;
    box-shadow: inset 0 0 0 1px var(--dark-3);
    width: 100%;
    aspect-ratio: 1;
    background-color: var(--dark);
    position: relative; /* Required for absolute positioning of overlays */
}

/* Prevent text selection on mobile */
.block, .grid-cell, .shelf-spot {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Drag and Drop Styles */
.block.drag-preview {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    opacity: 1;
    background-color: transparent !important;
    transform: rotate(0deg) scale(0.8);
    /* Transition removed - GSAP handles animations */
}

/* .block.drag-preview.dragging - Scale is now handled by GSAP animation */

.block.drag-preview.returning {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Ensure unfilled preview cells are completely transparent */
.block.drag-preview .block-cell:not(.filled) {
    opacity: 0 !important;
    background-color: transparent !important;
}

/* Apply opacity to filled cells instead of entire element */
.block.drag-preview .block-cell.filled {
    opacity: 0.8;
}

/* Ensure drag preview background is transparent during dragging */
.block.drag-preview.dragging {
    background-color: transparent !important;
}

body.dragging {
    cursor: grabbing;
}

body.dragging .block {
    cursor: grabbing;
}

.grid-cell {
    background-color: var(--dark-1);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;    
}

/* Grid Cell States */
.grid-cell.open {
    background-color: var(--dark-2);
}
.grid-cell.conflict {
    background-color: var(--dark-2);
}
.grid-cell.taken {
    background-color: var(--purple); /* Purple for taken cells */
}
.grid-cell.taken.conflict {
    background-color: var(--pink); /* Purple for taken cells */
}
.grid-cell.complete {
    background-color: var(--green) !important;
}

/* Sudoku grid lines using nth-child selectors */
.sudoku-grid .grid-cell:nth-child(3n) {
    box-shadow: 1px 0 0 var(--dark-3); /* Right border for every 3rd cell (columns 3, 6, 9) */
}
/* Bottom borders for rows 3 and 6 */
.sudoku-grid .grid-cell:nth-child(n+19):nth-child(-n+27) {
    box-shadow: 0 1px 0 var(--dark-3); /* Bottom border for row 3 (cells 19-27) */
}
.sudoku-grid .grid-cell:nth-child(n+46):nth-child(-n+54) {
    box-shadow: 0 1px 0 var(--dark-3); /* Bottom border for row 6 (cells 46-54) */
}
/* Combined borders for cells that are both in 3rd/6th columns AND 3rd/6th rows */
.sudoku-grid .grid-cell:nth-child(3n):nth-child(n+19):nth-child(-n+27),
.sudoku-grid .grid-cell:nth-child(3n):nth-child(n+46):nth-child(-n+54) {
    box-shadow: 1px 0 0 var(--dark-3), 0 1px 0 var(--dark-3); /* Right + bottom border for corner cells */
}


.grid-cell.taken {
    box-shadow: 
    inset 3px 3px 5px color-mix(in srgb, var(--light) 5%, transparent 95%), 
    inset -3px -3px 5px color-mix(in srgb, var(--dark) 10%, transparent 90%), 
    0 0 0 1px var(--dark-2) !important;
}


/* 3x3 Box Overlay Grid - Separate grid on top of main grid */
.box-overlay-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 1px;
    padding: 1px;
    pointer-events: none;
    z-index: 10;
    /* box-shadow: inset 0 0 0 1px var(--purple); */
}

/* 3x3 Box Overlay Divs - Using CSS Grid positioning */
.box-overlay {
    /* background-color: color-mix(in srgb, var(--dark) 15%, transparent); */
    background-color: color-mix(in srgb, var(--dark) 9%, transparent); 
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cpattern patternUnits='userSpaceOnUse' id='a' height='20' width='20' patternTransform='rotate(135 800 400) scale(1) translate(3200 1600)'>%3E%3Cpath stroke='%23000' stroke-width='5' stroke-opacity='.075' d='M10 21L10-1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3C/svg%3E");

    background-size: cover;    
    grid-column: span 3;
    grid-row: span 3;
    /* box-shadow: 0 0 0 1px var(--purple); */
}



/* Top Middle Box (c14 to c36) - spans columns 4-6, rows 1-3 */
.box-overlay-top-middle {
    grid-column: 4 / 7;
    grid-row: 1 / 4;
}

/* Left Middle Box (c41 to c63) - spans columns 1-3, rows 4-6 */
.box-overlay-left-middle {
    grid-column: 1 / 4;
    grid-row: 4 / 7;
}

/* Right Middle Box (c47 to c69) - spans columns 7-9, rows 4-6 */
.box-overlay-right-middle {
    grid-column: 7 / 10;
    grid-row: 4 / 7;
}

/* Bottom Middle Box (c74 to c96) - spans columns 4-6, rows 7-9 */
.box-overlay-bottom-middle {
    grid-column: 4 / 7;
    grid-row: 7 / 10;
}

/* Game Details Section */
.score-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 5px;
    background-color: var(--darker);
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* Game Details in Tall Layout (3 columns, 1 row) */
.game-container.tall-layout .score-details {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
}

/* Game Details in Wide Layout (1 column, 3 rows) */
.game-container.wide-layout .score-details {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);    
}

.score-section,
.best-section,
.controls-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#new-game-btn{
    padding: 5px 5px;
}
.score-label,
.best-label {
    color: var(--light-4);
    font-size: 1rem;
    line-height: 1;
}
.score-value,
.best-value {
    font-family: "filson-soft", sans-serif;
    color: var(--yellow);
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1;
}
@media (min-width: 768px) { 
    .score-details{
        padding: 20px;
    }   
    .score-label,
    .best-label {
        font-size: 1rem;
    }
    .score-value,
    .best-value {
        font-size: 2rem;
    }
    #new-game-btn{
        padding: 10px 20px;
    }
}



/* Block Styles */
.block {
    display: grid;
    gap: 1px;
    padding: 1px;
    cursor: grab;
    user-select: none;
    transform: scale(0.8);
    /* Removed CSS transition - GSAP handles all animations */    
}

/* Block size classes */
.block.size-1x1 {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
}

.block.size-2x1 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
}

.block.size-1x2 {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.block.size-3x1 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
}

.block.size-1x3 {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.block.size-2x2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.block.size-3x2 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.block.size-2x3 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.block.size-3x3 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.block.dragging {
    cursor: grabbing;
    opacity: 0.7;
}

.block-cell {
    background-color: transparent;
    width: var(--cell-size);
    height: var(--cell-size);
}

/* Block cell states */
.block .block-cell.filled {
    background-color: var(--sky);
    box-shadow: 0 0 0 1px var(--blue); /* Blue border with no gap */
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.block.invalid .block-cell.filled {
    background-color: var(--dark-3); /* Gray */
    box-shadow: 0 0 0 1px var(--dark-2); /* Darker gray border */
}

.block.valid .block-cell.filled {
    background-color: var(--lime); /* Green */
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 75%, var(--dark) 25%);
}

/* Modal Content Styling */
.modal-content {
    background-color: var(--dark-3);
    border: 1px solid var(--purple);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
}

/* Final Score Title Styling */
#final-score-title {
    color: var(--yellow);
    margin-bottom: 0;
    font-weight: bold;
}