.stroop-container {
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #fff;
    border-radius: 20px;
    padding: 15px;
    width: 95%; /* Responsive width */
    max-width: 500px;
    margin: 10px auto;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.1);
    position: relative;
}

#stroop-canvas {
    border-radius: 12px;
    margin-bottom: 15px;
    background: #f8f9fa;
    width: 100%; /* Make canvas responsive */
    height: auto;
}

#word-display {
    font-size: clamp(40px, 10vw, 64px); /* Fluid typography for mobile */
    font-weight: 900;
    margin: 30px 0;
    min-height: 80px;
    letter-spacing: 2px;
}

.options {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 wide buttons per row */
    gap: 12px;
    margin-top: 20px;
}

.color-btn {
    width: 100%; /* Fill the grid cell */
    padding: 18px 5px; /* Large tap area */
    border: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 12px;
    color: white !important; /* White text for solid colors */
    font-weight: 800;
    text-transform: uppercase;
    transition: transform 0.1s, filter 0.2s;
    box-shadow: 0 4px 0 rgba(0,0,0,0.2);
}

/* Specific Solid Colors */
.btn-red    { background-color: #e11d48 !important; }
.btn-blue   { background-color: #2563eb !important; }
.btn-green  { background-color: #16a34a !important; }
.btn-yellow { background-color: #eab308 !important; color: #000 !important; } /* Dark text for yellow visibility */
.btn-purple { background-color: #9333ea !important; }
.btn-orange { background-color: #ea580c !important; }
.btn-pink   { background-color: #db2777 !important; }

.color-btn:active {
    transform: translateY(3px);
    box-shadow: none;
    filter: brightness(0.9);
}

#start-btn {
    width: 100%;
    padding: 15px;
    font-size: 22px;
    font-weight: bold;
    border-radius: 12px;
    border: none;
    background: #008080; /* Grow Math Teal */
    color: white;
    cursor: pointer;
    box-shadow: 0 5px 0 #005a5a;
}

/* Level/Score HUD */
.game-stats {
    display: flex;
    justify-content: space-around;
    background: #f1f5f9;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #475569;
}
/* Remove the redundant timer if it's appearing twice */
#timer { display: none !important; }