/* --- ZEN GARDEN --- */
#zenCanvas { background-color: #d2b48c; cursor: crosshair; }

/* --- BREATHING --- */
.breathing-body { background-color: #2c3e50; color: white; }
.breathing-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 300px; width: 300px; position: relative; }
.breathing-circle { background-color: #3498db; border-radius: 50%; height: 150px; width: 150px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 8s ease-in-out; }
.breathing-container.grow .breathing-circle { transform: translate(-50%, -50%) scale(1.5); transition-duration: 4s; }
.breathing-container.shrink .breathing-circle { transform: translate(-50%, -50%) scale(1); transition-duration: 8s; }
#instruction { margin-top: 200px; font-size: 1.5em; color: rgba(255, 255, 255, 0.9); }

/* --- STARS --- */
.stars-body { background-color: #0c1445; color: #e0e0e0; }
.stars-body h1, .stars-body p {
    color: white;
}
#starsCanvas {
    cursor: pointer;
    width: 100%; 
    max-width: 600px; 
    height: auto; 
    box-sizing: border-box; 
}

/* --- MAZE --- */
.maze-game-container { position: relative; display: flex; justify-content: center; align-items: center; }
#mazeCanvas { 
    background-color: #fff; 
    border: 2px solid #ddd;
    width: 100%;
    max-width: 510px;
    height: auto;
    box-sizing: border-box;
}
.win-message { 
    display: none; 
    position: absolute; 
    text-align: center; 
    background-color: rgba(255, 255, 255, 0.9); 
    padding: 30px 50px; 
    border-radius: 10px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.win-message h2 { margin: 0 0 15px 0; color: #4CAF50; }
#new-maze-btn { padding: 12px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 8px; font-size: 1.1em; font-weight: 600; cursor: pointer; transition: background-color 0.3s; }
#new-maze-btn:hover { background-color: #45a049; }
/* --- MAZE GAME CONTROLS --- */
.maze-controls { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.controls-row { display: flex; justify-content: center; gap: 5px; }
.maze-btn { width: 60px; height: 60px; font-size: 2em; font-weight: bold; color: #2c3e50; background-color: #ecf0f1; border: 2px solid #bdc3c7; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; padding: 0; }
.maze-btn:hover { background-color: #bdc3c7; transform: translateY(-2px); }
.maze-btn:active { transform: translateY(1px); }
/* --- MAZE GAME DIFFICULTY SLIDER --- */
.difficulty-slider { margin-bottom: 20px; color: #333; font-weight: 500; }
.difficulty-slider label { display: flex; justify-content: center; align-items: center; gap: 10px; }
#difficulty { cursor: pointer; }

/* --- WORD JUMBLE --- */
.word-game-container { max-width: 500px; }
.jumbled-word-display { font-size: 2.5em; font-weight: 600; letter-spacing: 8px; color: #ffffff; background-color: rgba(0, 0, 0, 0.2); padding: 20px 30px; border-radius: 12px; margin-bottom: 30px; text-transform: uppercase; }
.word-game-controls { display: flex; gap: 10px; margin-bottom: 15px; }
#guess-input { flex-grow: 1; padding: 15px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background-color: rgba(0, 0, 0, 0.2); color: #ffffff; font-size: 1.1em; }
#guess-input:focus { outline: none; border-color: #3498db; }
.word-game-controls .submit-btn { width: auto; }
.feedback-message { min-height: 1.5em; font-size: 1.1em; font-weight: 500; transition: color 0.3s; }
.skip-button { background: none; border: 1px solid rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.8); padding: 10px 20px; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.skip-button:hover { background-color: rgba(255, 255, 255, 0.1); }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
.shake { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }

/* --- MEMORY MATCH --- */
.memory-game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; max-width: 500px; margin: 20px auto; perspective: 1000px; }
.memory-card { background-color: transparent; width: 100px; height: 100px; border-radius: 12px; cursor: pointer; position: relative; transform-style: preserve-3d; transition: transform 0.6s; }
.memory-card.flip { transform: rotateY(180deg); }
.card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 2.5em; }
.card-front:hover { background-color: #e0e0e0; }
.card-back { background-color: #3498db; color: white; transform: rotateY(180deg); }
@media (max-width: 480px) { .memory-card { width: 60px; height: 60px; } }

/* --- DOODLING PAD --- */
#doodle-canvas { background-color: #ffffff; border-radius: 12px; cursor: crosshair; border: 1px solid #ddd; }
.doodle-controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; color: #333; }
.control-group { display: flex; align-items: center; gap: 10px; }
#color-picker { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 40px; height: 40px; background-color: transparent; border: none; cursor: pointer; }
#color-picker::-webkit-color-swatch { border-radius: 50%; border: 2px solid #555; }
#color-picker::-moz-color-swatch { border-radius: 50%; border: 2px solid #555; }

/* --- PATTERN TRACER --- */
#pattern-canvas { background-color: #e9e9e9; border-radius: 12px; cursor: pointer; border: 1px solid #ddd; }
#pattern-message { min-height: 1.5em; font-size: 1.1em; font-weight: 500; color: #5c5c5c; }
#new-pattern-btn { color: #333; border-color: #ccc; }
#new-pattern-btn:hover { background-color: #e9e9e9; }

/* --- SPECIFIC BUTTON FIXES --- */
/* For 'Clear' button on Doodling Pad */
#clear-canvas-btn {
    color: #333;
    border-color: #ccc;
}
#clear-canvas-btn:hover {
    background-color: #e9e9e9;
}

/* For 'New Game' button in Memory Match */
#reset-memory-btn {
    color: #333;
    border-color: #ccc;
    background-color: #f9f9f9; /* FIX: Added missing semicolon */
}
#reset-memory-btn:hover {
    background-color: #e9e9e9;
}

/* For Memory Match card fronts */
.memory-card .card-front {
    border: 2px solid #2b2b2b; 
    background-color: #f9f9f9;
}
.memory-card .card-front:hover {
    background-color: #e9e9e9;
}