html, body { 
    margin: 0; padding: 0; background: #000; 
    font-family: 'Segoe UI', sans-serif; overflow: hidden; touch-action: none; 
}
canvas { display: block; }
#start { 
    position: fixed; inset: 0; background: radial-gradient(circle, #051520, #000); 
    color: #0cf; display: flex; flex-direction: column; align-items: center; 
    justify-content: flex-start; z-index: 100; padding: 40px 20px; overflow-y: scroll;
}
.level-grid { display: flex; flex-direction: column; gap: 15px; width: 100%; max-width: 450px; margin-top: 30px; padding-bottom: 100px; }
.level { 
    padding: 25px 20px; font-size: 20px; background: rgba(0, 204, 255, 0.1); 
    border: 3px solid #0cf; color: #0cf; cursor: pointer; border-radius: 15px; 
    display: flex; justify-content: space-between; align-items: center; font-weight: bold;
}
.locked { opacity: 0.15; pointer-events: none; filter: grayscale(1); border-color: #444; }
#hunger-ui { 
    position: absolute; top: 90px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.8); padding: 12px 25px; border-radius: 40px; 
    border: 3px solid #0cf; display: flex; align-items: center; gap: 15px; z-index: 50; 
}
#hunger-bar-container { width: 250px; height: 25px; background: #222; border-radius: 15px; overflow: hidden; border: 2px solid #000; }
#hunger-bar { width: 100%; height: 100%; background: linear-gradient(90deg, #0f0, #ff0, #f00); transition: width 0.3s; }
#ui { position: absolute; top: 0; width: 100%; background: rgba(0,0,0,0.6); padding: 20px 0; text-align: center; color: #fff; z-index: 5; }
#task { font-size: 28px; font-weight: 900; text-shadow: 0 0 10px #0cf; text-transform: uppercase; }
#finish { position: fixed; inset: 0; background: rgba(0,0,0,0.95); color: white; display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 200; text-align: center; }
#finalEmoji { font-size: 150px; cursor: pointer; filter: drop-shadow(0 0 30px #0cf); margin: 20px 0; }
#dalton-box { background: rgba(0, 20, 40, 0.95); padding: 30px; border-radius: 25px; border: 4px solid #0cf; display: none; max-width: 80%; }
.confetti { position: absolute; width: 10px; height: 10px; z-index: 250; pointer-events: none; }
.shake { animation: shake 0.3s; }
@keyframes shake { 0%,100% {transform:translate(0,0)} 25% {transform:translate(8px,8px)} 50% {transform:translate(-8px,0)} 75% {transform:translate(8px,-8px)} }
.action-btn { margin-top: 20px; padding: 12px 35px; background: #0cf; color: #000; border: none; border-radius: 10px; font-weight: bold; cursor: pointer; }