.App{text-align:center;min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);font-family:Arial,sans-serif;position:relative;overflow:hidden}.app-header{padding:20px;background-color:#4a69bd;color:#fff;box-shadow:0 2px 10px #0000001a;z-index:10}.background-image-container{display:flex;justify-content:center;align-items:center;padding:20px;position:relative;width:100%}.background-image{width:500px;height:400px;border-radius:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px #0003;background-image:url(/images/room.jpg);background-size:contain;background-repeat:no-repeat;background-position:center;position:relative}.sound-icon-corner{font-size:2rem;cursor:pointer;color:#fff;text-shadow:0 0 10px rgba(0,0,0,.8);transition:all .2s ease;animation:pulse 2s infinite;z-index:10;background:#00000080;border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;position:absolute;bottom:20px;left:20px}.sound-icon-corner:hover{transform:scale(1.1);text-shadow:0 0 20px rgba(255,255,255,.8)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.game-container{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;gap:20px;z-index:10;position:relative}.color-buttons-container{display:flex;flex-direction:column;gap:20px;width:100%;max-width:500px;margin-top:-10px}.color-buttons-wrapper{display:flex;justify-content:center;gap:10px;width:100%}.color-button{flex:1;min-width:0;width:60px;height:60px;border:none;cursor:pointer;font-size:2rem;box-shadow:0 4px 10px #0003;transition:all .3s ease;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:15px}.blob-shape{border-radius:40% 60% 70% 30%/30% 30% 70% 70%;animation:morph 8s ease-in-out infinite;transform-origin:center;width:100%;height:100%;display:flex;align-items:center;justify-content:center}@keyframes morph{0%{border-radius:40% 60% 70% 30%/30% 30% 70% 70%}25%{border-radius:70% 30% 50% 50%/30% 60% 40% 70%}50%{border-radius:50% 50% 30% 70%/70% 30% 60% 40%}75%{border-radius:30% 70% 60% 40%/60% 40% 30% 70%}to{border-radius:40% 60% 70% 30%/30% 30% 70% 70%}}.color-button:hover{transform:scale(1.1)}.color-button:focus{outline:3px solid #4a69bd}.color-button.disabled{opacity:.6;cursor:not-allowed}.color-red{background:radial-gradient(circle,#ff6b6b,red);color:red}.color-yellow{background:radial-gradient(circle,#fff350,gold);color:gold}.color-pink{background:radial-gradient(circle,#ffafcc,#ff6b9c);color:#ff6b9c}.color-green{background:radial-gradient(circle,#a8e6cf,#4caf50);color:#4caf50}.color-orange{background:radial-gradient(circle,#ffd3b6,#ff9800);color:#ff9800}.color-purple{background:radial-gradient(circle,#d9a7ff,#9c27b0);color:#9c27b0}.color-blue{background:radial-gradient(circle,#a3d9ff,#2196f3);color:#2196f3}.color-rainbow{background:linear-gradient(45deg,red,#f90,#ff0,#0f0,#0ff,#00f,#90f,#f0f);color:#fff}.correct{animation:correctPulse .5s ease;box-shadow:0 0 20px 5px #4caf50}.incorrect{animation:incorrectShake .5s ease;box-shadow:0 0 20px 5px #f44336}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes incorrectShake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.completion-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:30px;border-radius:20px;max-width:90%;animation:fadeIn 1s ease;position:relative;width:100%;height:100%}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.completion-screen h2{font-size:3rem;color:#4a69bd;margin:0;z-index:20}.fireworks-background{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:5}.fireworks-background:before{content:"";position:absolute;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,#ff0000 2px,transparent 2px),radial-gradient(circle at 80% 70%,#00ff00 2px,transparent 2px),radial-gradient(circle at 40% 10%,#0000ff 2px,transparent 2px),radial-gradient(circle at 60% 90%,#ffff00 2px,transparent 2px),radial-gradient(circle at 30% 60%,#ff00ff 2px,transparent 2px),radial-gradient(circle at 70% 40%,#00ffff 2px,transparent 2px),radial-gradient(circle at 10% 20%,#ff9900 2px,transparent 2px),radial-gradient(circle at 90% 80%,#9900ff 2px,transparent 2px);animation:fireworks 3s infinite}@keyframes fireworks{0%{transform:scale(.5);opacity:0}50%{opacity:1}to{transform:scale(2);opacity:0}}.completion-content{position:relative;z-index:20;background:#ffffffe6;padding:30px;border-radius:20px;box-shadow:0 10px 30px #0000001a}.play-again-button{background:linear-gradient(to right,#4a69bd,#1e3a8a);color:#fff;border:none;border-radius:50px;padding:15px 40px;font-size:1.2rem;font-weight:700;cursor:pointer;box-shadow:0 6px 15px #0003;transition:all .3s ease;z-index:20;position:relative}.play-again-button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #0000004d}.start-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;width:100%;background:linear-gradient(135deg,#6a11cb,#2575fc);color:#fff;padding:20px}.game-title{font-size:3rem;margin-bottom:50px;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.3);animation:titleEntrance 1s ease-out}@keyframes titleEntrance{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}.play-button{background:linear-gradient(to right,#ff8a00,#da1b60);color:#fff;border:none;border-radius:50px;padding:20px 60px;font-size:2rem;font-weight:700;cursor:pointer;box-shadow:0 8px 25px #0000004d;transition:all .3s ease;text-transform:uppercase;letter-spacing:2px}.play-button:hover{transform:translateY(-5px);box-shadow:0 12px 30px #0006}.play-button:active{transform:translateY(0)}.intro-screen{display:flex;justify-content:center;align-items:center;height:100vh;width:100%}.game-two-text{font-size:4rem;color:#4a69bd;animation:fadeInOut 3s ease-in-out forwards;text-shadow:0 0 10px rgba(0,0,0,.2)}@keyframes fadeInOut{0%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.2)}to{opacity:0;transform:scale(.8)}}@media (max-width: 768px){.app-header{padding:15px}.game-title{font-size:2rem;margin-bottom:30px}.play-button{padding:15px 40px;font-size:1.5rem}.background-image{width:90%;height:300px}.sound-icon-corner{font-size:1.5rem;width:50px;height:50px}.color-buttons-wrapper{gap:15px}.color-button{width:50px;height:50px;font-size:1.5rem}.completion-screen h2{font-size:2rem}}@media (max-width: 480px){.app-header{padding:15px}.game-title{font-size:1.5rem;margin-bottom:20px}.play-button{padding:12px 30px;font-size:1.2rem}.game-container{gap:15px;padding:15px}.background-image{width:95%;height:250px}.sound-icon-corner{font-size:1.2rem;width:40px;height:40px}.color-buttons-wrapper{gap:10px}.color-button{width:40px;height:40px;font-size:1.2rem}.completion-screen{padding:20px}.completion-screen h2{font-size:1.8rem}.play-again-button{padding:12px 30px;font-size:1rem}}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#root{min-height:100vh}button{cursor:pointer;font-family:inherit}button:disabled{cursor:not-allowed}::-webkit-scrollbar{display:none}body{-ms-overflow-style:none;scrollbar-width:none}