html {
    height: 100%; /* Ensure HTML element can be a reference for 100% height */
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0; /* Added padding: 0 for good measure */
    font-family: Arial, sans-serif;
    min-height: 100%; /* Ensure body takes at least full height of HTML element */
    background-image: url('assets/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Ensures background covers viewport, fixed during scroll */
    overflow-y: auto; /* Allow vertical scroll for content */
    image-rendering: auto; /* Added for potentially better image scaling quality */
    color: #333; /* Default text color, can be overridden by specific components */
}

#app-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 20px 0; /* Top padding is 0, L/R 0, Bottom 20px page padding */
}

#game-board {
    position: relative;
    top: calc(10px - 10vh); /* Adjusted to move up by 10% of viewport height from 10px */
    margin: 0 auto;
}

#game-container {
    position: relative;
    margin-top: 0;
    width: 950px;
    height: 950px;
    z-index: 2;
    margin-bottom: 0px;
    flex-shrink: 0;
}

/* #background-image { (This rule can be removed or commented out if the img tag is removed) */
/*    position: absolute; */
/*    top: 0; */
/*    left: 0; */
/*    width: 100%; */
/*    height: 100%; */
/*    z-index: 1; */
/* } */

#board-image {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 750px; /* Resized to match 15x50px grid */
    height: 750px; /* Resized to match 15x50px grid */
    z-index: 2; /* Was 2, keep above potential body background layers, below grid */
}

#board-grid {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    /* width and height are now determined by grid-template */
    display: grid;
    grid-template-columns: repeat(15, 50px); /* Cells are 50px wide */
    grid-template-rows: repeat(15, 50px);    /* Cells are 50px high */
    z-index: 3; /* Above the board image itself */
}

.grid-cell {
    /* border: 1px solid #ccc; /* Removed to make grid lines invisible */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Renamed .tile from user to .letter-tile and applied styles */
.letter-tile {
    width: 48px;  /* Reverted to 48px to allow a small margin in 50px cell */
    height: 48px; /* Reverted to 48px */
    object-fit: contain;
    flex-shrink: 0; /* Kept from previous good suggestion */
    cursor: grab; /* Kept from previous */
    user-select: none; /* Kept from previous */
}

/* Styles for the new #bottom-bar */
#bottom-bar {
    background-color: #5b2e0d;
    padding: 10px;
    border-radius: 16px;
    max-width: 750px;
    margin: -18vh auto 20px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    z-index: 5;
}

.tile-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
    width: 100%; /* Ensure it can take width for centering */
}

/* Styles for #tile-rack to fit within .tile-row */
#tile-rack { 
    display: flex; 
    justify-content: center; /* Center tiles within the rack */
    align-items: center;
    gap: 8px; /* Match .tile-row gap */
    /* Remove previous positioning, background, border, etc. */
    padding: 0;
    min-width: 0; /* Reset */
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically align scores and actions groups */
    width: 100%;
    padding: 0 10px; /* Add some padding if needed */
    box-sizing: border-box;
}

.scores { /* This is the container for the three score spans */
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 16px;
    flex-grow: 1; /* Allow scores to take some space */
    justify-content: flex-start; /* Align scores to the left */
}

.scores span { /* Individual score item like "You 0" */
    display: flex; /* To allow gap between label and number if needed, or just inline */
    align-items: center;
}

.scores span span { /* The actual number like player-score */
    font-weight: bold;
    margin-left: 5px; /* Space out number from label */
}

/* Style for the active turn indicator */
.scores .active-turn {
    color: #819f14; 
    font-weight: bold; 
}

/* Style for the bot's active turn indicator */
.scores .active-turn-bot {
    color: #819f14; /* Same color for consistency */
    font-weight: bold; /* Optional: make it bolder */
}

.actions {
    display: flex;
    gap: 24px;
    align-items: center; /* Ensure vertical alignment of buttons */
}

.action-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    cursor: pointer; /* Kept from previous */
    text-align: center; /* Kept from previous */
}

.action-button img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-bottom: 4px;
}

.action-button span {
    font-size: 16px; /* Changed from 11px to 16px */
}

.dragging {
    opacity: 0.4;
    cursor: grabbing;
}