body {
    font-family: sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 1rem 0;
    box-sizing: border-box;
}

.hidden {
    display: none !important;
}

#selection-screen {
    text-align: center;
}

.game-choices {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
}

.choice-btn {
    display: inline-block;
    padding: 2rem 3rem;
    font-size: 1.5rem;
    cursor: pointer;
    border: none;
    border-radius: 15px;
    color: white;
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s ease;
}

.choice-btn:hover {
    transform: scale(1.05);
}

#boba-choice-btn {
    background-color: #8E44AD; /* Purple */
}

#pizza-choice-btn {
    background-color: #E74C3C; /* Red */
}

#game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    padding: 2rem;
    padding-top: calc(2rem + env(safe-area-inset-top)); /* Add padding for notch */
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    width: 95%;
    max-width: 1200px;
}

.game-content {
    display: flex;
    flex-direction: column; /* Stacks canvas and controls on mobile */
    align-items: center;
    gap: 2rem;
    width: 100%;
}

h1 {
    color: #333;
    margin-bottom: 1rem;
}

canvas {
    background: #eee;
    border-radius: 10px;
    margin-bottom: 1rem;
}

#controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
}

.control-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.control-group .buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.control-group h4 {
    margin-bottom: 0.5rem;
    color: #555;
    font-weight: bold;
}

#controls button {
    color: white;
    border: none;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
    transition: opacity 0.3s ease;
    width: 120px;
}

#controls button:hover {
    opacity: 0.85;
}

/* --- Button Colors --- */
#black-tea-btn { background-color: #6F4E37; } /* Brown */
#green-tea-btn { background-color: #88B04B; } /* Green */
#milk-btn { background-color: #4A90E2; }      /* Blue */
#black-boba-btn { background-color: #333; }    /* Black */
#popping-boba-btn { background-color: #E5446D; } /* Pink */
#taro-btn { background-color: #9b59b6; }      /* Purple */
#mango-btn { background-color: #f39c12; }     /* Orange */
#green-boba-btn { background-color: #2ecc71; }   /* Green */
#gold-boba-btn { background-color: #f1c40f; }      /* Gold */

/* --- Pizza Button Colors --- */
#tomato-sauce-btn { background-color: #E74C3C; } /* Red */
#bbq-sauce-btn { background-color: #8B4513; }    /* Brown */
#white-sauce-btn { background-color: #F5F5DC; color: #333; } /* Beige */
#cheese-btn { background-color: #F1C40F; }     /* Yellow */
#pepperoni-btn { background-color: #C0392B; }  /* Dark Red */
#mushrooms-btn { background-color: #8d6e63; }  /* Brown */
#olives-btn { background-color: #333; }         /* Black */
#jelly-beans-btn { background-color: #9b59b6; } /* Purple */
#pineapple-btn { background-color: #f1c40f; }   /* Yellow */
#snakes-btn { background-color: #e91e63; }      /* Pink */
#fish-btn { background-color: #3498db; }        /* Blue */
#pringles-btn { background-color: #c5a572; }   /* Light Brown */
#bananas-btn { background-color: #f7de00; }      /* Yellow */

#back-btn {
    margin-top: 1rem;
    background-color: #7f8c8d;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#back-btn:hover {
    background-color: #95a5a6;
}

/* --- Responsive Layout --- */

/* Desktop Layout */
@media (min-width: 800px) {
    #game-container {
        max-width: 1000px;
    }
    .game-content {
        flex-direction: row;
        align-items: flex-start;
    }
    #controls {
        flex: 1;
    }
}

/* Boba Game Mobile Canvas Height */
@media (max-width: 480px) {
    #game-container[data-game="boba"] canvas {
        height: 500px;
    }
}