:root {
    /* ---------- PALETTE 1: CANDY-PASTEL NEON (VIRAL) ---------- */
    --pastel-bg: #F7F7FC;
    --pastel-board-bg: #FFFFFF;
    --pastel-board-border: #E4E6F1;
    
    /* Low tiles (1–3) */
    --pastel-tile-1: #BEE3F8; /* sky blue */
    --pastel-tile-2: #B4F1CC; /* mint */
    --pastel-tile-3: #9BE7E0; /* teal */

    /* Mid tiles (4–7) */
    --pastel-tile-4: #FBC4AB; /* peach */
    --pastel-tile-5: #FFDF8F; /* warm yellow */
    --pastel-tile-6: #FF9E8F; /* coral */
    --pastel-tile-7: #F7A1D4; /* soft pink */

    /* High tiles (8+) */
    --pastel-tile-8: #FF4F8B; /* neon pink */
    --pastel-tile-9: #A06BFF; /* neon purple */
    --pastel-tile-10: #FFD43B; /* neon gold */


    /* ---------- PALETTE 2: CLEAN MINIMALIST PREMIUM (APPLE-LIKE) ---------- */
    --clean-bg: #FAFAFA;
    --clean-board-bg: #FFFFFF;
    --clean-board-border: #F3F4F7;

    --clean-tile-1: #DCE6F2;
    --clean-tile-2: #BFD7EA;
    --clean-tile-3: #99C1DE;
    --clean-tile-4: #F6E3C5;
    --clean-tile-5: #F5C396;
    --clean-tile-6: #F29E85;
    --clean-tile-7: #FF8080;
    --clean-tile-8: #FF5757;
    --clean-tile-9: #FF3B3B;
    --clean-tile-10: #E00000;
}


body {
    background-color: var(--pastel-bg); /* ← Default theme */
    margin: 0;
    user-select: none;
    overflow: hidden;
    font-family: sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-borders {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.header{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}
.high-score-container{
    display: flex;
    flex-flow: row nowrap;
    font-size: 40px;
    color: #6E6E73;
}
.crown-icon{
    width: 50px;
}
.settings-icon{
    width: 60px;
}


.canvas {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.game-canvas {
    background-color: var(--pastel-board-border); 
    border: 1px solid var(--pastel-board-border);
    border-radius: 5px;
    padding-bottom: 1px;
}
.tile-canvas {
    background-color: var(--pastel-bg); 
    border: 1px solid var(--pastel-bg);
    border-radius: 5px;
    margin-top: 2vh;
}