:root {
    --bg-color: #FFFBF0;
    --card-bg: #FFFFFF;
    --text-color: #5D5D5D;

    --p1-color: #A7C7E7;
    --p1-dark: #769ECB;
    --p2-color: #B4F8C8;
    --p2-dark: #88D8A0;

    --tile-bg: #FFF8E7;
    /* Creamy Tile */
    --tile-border: #EEDDCC;
    --tile-text: #5D4D44;

    /* Premium Squares */
    --tw-color: #FFB7B2;
    /* Triple Word - Red/Pink */
    --dw-color: #FFDAC1;
    /* Double Word - Peach */
    --tl-color: #C3B1E1;
    /* Triple Letter - Purple */
    --dl-color: #B5EAD7;
    /* Double Letter - Green */

    --shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    --tile-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
    --radius: 20px;
}

body {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    user-select: none;
}

/* Screens */
.screen {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(255, 251, 240, 0.95);
    z-index: 50;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.screen.active {
    display: flex;
}

/* Refined Game Layout - Minimalistic */

.game-layer {
    display: none;
    flex-direction: column;
    /* Vertical Stack */
    width: 100%;
    height: 100%;
    max-width: 700px;
    /* Narrower constraint */
    padding: 10px;
    box-sizing: border-box;
    gap: 15px;
    gap: 15px;
    align-items: center;
    justify-content: center;
    /* Center Vertically */
    overflow-y: auto;
}

.game-title {
    font-size: 2rem;
    margin: 0;
    margin-bottom: -10px;
    /* Slight tuck */
    text-shadow: 2px 2px 0 var(--tile-border);
}

.game-layer.active {
    display: flex;
}

/* Lobby */
.card {
    background: var(--card-bg);
    padding: 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
    width: 90%;
    max-width: 400px;
}

h1 {
    margin: 0;
    color: var(--dw-color);
    font-size: 2.5rem;
    text-shadow: 2px 2px 0 var(--tw-color);
}

.subtitle {
    color: var(--p1-dark);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

input {
    width: 100%;
    padding: 15px;
    border: 3px solid #EEE;
    border-radius: 12px;
    font-size: 1.2rem;
    box-sizing: border-box;
    font-family: inherit;
    font-weight: bold;
    color: #555;
    outline: none;
    text-align: center;
    margin-bottom: 10px;
}

button {
    border: none;
    padding: 12px 20px;
    border-radius: 50px;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
    margin: 5px 0;
    transition: transform 0.1s;
}

button:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--p2-color);
    color: #555;
}

.btn-secondary {
    background: #EEE;
    color: #666;
}

/* Game Board */
.board-container {
    background: #FFF;
    padding: 10px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    /* Make board responsive-ish */
    max-width: 100%;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.board {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: repeat(15, 1fr);
    gap: 1px;
    width: 100%;
    /* Fit container */
    height: 100%;
    background: #EEE;
    /* Grid lines color */
    border: 2px solid #EEE;
    width: 600px;
    /* Default size */
    height: 600px;
}

.sq {
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 800;
    color: #AAA;
    text-transform: uppercase;
    position: relative;
    user-select: none;
}

/* Premium Squares */
.sq.tw {
    background: var(--tw-color);
    color: #FFF;
}

.sq.dw {
    background: var(--dw-color);
    color: #FFF;
}

.sq.tl {
    background: var(--tl-color);
    color: #FFF;
}

.sq.dl {
    background: var(--dl-color);
    color: #FFF;
}

.sq.center {
    background: var(--dw-color);
    color: #FFF;
    font-size: 1.5rem;
}

/* Fix "Half-Tile" - Absolute Position Tile over text */
.tile {
    width: 95%;
    height: 95%;
    background: var(--tile-bg);
    border-radius: 4px;
    /* Softer, slightly smaller radius for small tiles */
    box-shadow: var(--tile-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    color: var(--tile-text);
    cursor: grab;

    position: absolute;
    /* Cover the text */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 10;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.tile.locked {
    background: #EEE8DD;
    color: #887766;
    box-shadow: none;
    cursor: default;
}

.tile.selected {
    border: 2px solid var(--p1-dark);
    z-index: 20;
}

.tile.dragging {
    opacity: 0.8;
    transform: scale(1.1);
    z-index: 100;
    pointer-events: none;
    /* Let events pass to dropzone */
}

.tile span.score {
    position: absolute;
    bottom: 2px;
    right: 3px;
    font-size: 0.5rem;
    color: #999;
}

/* Header Area (Scores & Bag) */
.game-header-area {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.score-pill {
    background: #FFF;
    padding: 8px 20px;
    border-radius: 50px;
    box-shadow: var(--shadow);
    display: flex;
    gap: 10px;
    font-weight: 800;
    color: #AAA;
    align-items: center;
    opacity: 0.7;
    transition: 0.3s;
    border: 2px solid transparent;
    /* Reserve space for active border */
}

.score-pill.active {
    opacity: 1;
    transform: scale(1.05);
    background: #FFF;
    /* Or highlight color? */
    border: 2px solid var(--p1-color);
}

.score-pill span {
    color: var(--text-color);
    font-size: 1.2rem;
}

.bag-pill {
    background: rgba(255, 255, 255, 0.5);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #999;
}


/* Rack Area (Under Board) */
.rack-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.rack {
    display: flex;
    justify-content: center;
    gap: 5px;
    background: #FFF;
    padding: 10px 20px;
    border-radius: 15px;
    box-shadow: var(--shadow);
    min-height: 50px;
    min-width: 300px;
}

/* Rack Tiles - slightly bigger relative to board if needed, but styling is same .tile class */
/* We need to ensure rack tiles are relative? No, they use .tile class. 
   If .tile is absolute, rack needs to be careful.
   Rack tiles should be relative flow.
   We can override .tile position for rack. */
.rack .tile {
    position: relative;
    /* Restore flow */
    transform: none;
    top: auto;
    left: auto;
    width: 45px;
    height: 45px;
}

.rack .tile.dragging {
    position: fixed;
    /* Dragging overrides */
    width: 50px;
    height: 50px;
}

.controls-row {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
    max-width: 500px;
}

.controls-row button {
    flex: 1;
    font-size: 0.9rem;
    padding: 10px 0;
}

#playBtn {
    flex: 2;
    /* Bigger play button */
    background: var(--p2-color);
    color: #445;
}

/* Hide Sidebar elements */
.sidebar {
    display: none;
}

/* Removing sidebar concept */

@media (max-width: 650px) {
    .board {
        width: 100vw;
        height: 100vw;
    }

    .tile {
        font-size: 0.7rem;
    }

    .rack .tile {
        width: 38px;
        height: 38px;
    }
}

/* Notifications */
#notification-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: white;
    padding: 12px 24px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideDown 0.3s ease-out forwards;
    pointer-events: auto;
    border-left: 5px solid var(--p1-color);
}

.toast.error {
    border-left-color: #e74c3c;
    color: #c0392b;
}

.toast.success {
    border-left-color: #2ecc71;
    color: #27ae60;
}

.toast.leaving {
    animation: fadeOut 0.3s ease-in forwards;
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    to {
        transform: translateY(-20px);
        opacity: 0;
    }
}

/* Blank Tile Modal Grid */
#letterGrid button {
    font-size: 1.2rem;
    font-weight: bold;
    padding: 10px;
    background: #FFF;
    border: 2px solid #EEE;
    color: #555;
    cursor: pointer;
    border-radius: 8px;
    height: 50px;
    width: auto !important;
    /* Override inline */
    transition: 0.2s;
}

#letterGrid button:hover {
    background: var(--p1-color);
    color: #FFF;
    border-color: var(--p1-color);
    transform: scale(1.1);
}

/* Lobby Controls Layout (Matches Schmatzee) */
.lobby-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.join-section {
    display: flex;
    gap: 10px;
}

.join-section input {
    margin-bottom: 0;
    flex: 1;
}

/* Compact Blank Tile Modal Overrides */
#letterGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 5px !important;
    margin: 15px 0 !important;
    max-width: 320px;
    margin-left: auto !important;
    margin-right: auto !important;
}

#letterGrid button {
    font-size: 0.9rem !important;
    padding: 0 !important;
    height: 35px !important;
    width: 35px !important;
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Further Compact Adjustments */
#blankTileModal .card {
    padding: 20px !important;
    max-width: 300px !important; /* Override inline 500px */
    width: auto !important;
}

#cancelBlankBtn {
    width: 50% !important;
    margin: 10px auto 0 !important;
    display: block !important;
    font-size: 0.9rem !important;
    padding: 8px !important;
}

/* Join Section Row Layout */
#joinSection {
    display: flex;
    gap: 10px;
    align-items: center; /* Ensure vertical alignment */
}

#joinSection input {
    margin-bottom: 0 !important; /* Remove bottom margin to align with button */
    flex: 2; /* Take up more space */
}

#joinSection button {
    flex: 1;
    margin: 0 !important; /* Remove default button margins */
}

/* Lobby Button Colors (Schmatzee Style) */
#createBtn {
    background-color: var(--p2-color) !important; /* Mint */
    color: #445 !important;
    font-weight: 800;
}

#singleBtn {
    background-color: #9b59b6 !important; /* Purple */
    color: white !important;
}

#localBtn {
    background-color: #3498db !important; /* Blue */
    color: white !important;
}

#joinBtn {
    background-color: #EEE !important;
    color: #555 !important;
}