body { margin: 0; overflow: hidden; background-color: #1a1a1a; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

#ui-container {
    position: absolute;
    bottom: 20px; left: 20px;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none; user-select: none;
}

.status-box {
    background: rgba(20, 20, 25, 0.85);
    border: 2px solid #444; border-radius: 12px;
    padding: 10px 18px; color: #ddd;
    font-weight: bold; font-size: 14px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
    display: flex; align-items: center; min-width: 240px;
    backdrop-filter: blur(8px);
}

.bar-bg {
    flex-grow: 1; height: 16px; background: #111;
    border-radius: 8px; margin-left: 12px; overflow: hidden;
    border: 1px solid #333;
}

#energy-fill { height: 100%; background: linear-gradient(to right, #4caf50, #8bc34a); width: 50%; transition: width 0.3s ease-out; }
#jump-fill { height: 100%; background: linear-gradient(to right, #00bcd4, #4dd0e1); width: 0%; transition: width 0.1s linear; }

#action-msg {
    position: absolute; bottom: 180px; left: 50%; transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8); color: #ffeb3b;
    padding: 12px 24px; border-radius: 40px;
    font-size: 18px; font-weight: bold;
    opacity: 0; transition: opacity 0.3s;
    border: 2px solid #ffeb3b; pointer-events: none;
    text-shadow: 2px 2px 4px black;
}

#controls-hint {
    position: absolute; top: 15px; right: 15px;
    color: rgba(255,255,255,0.7); font-size: 13px; text-align: right; pointer-events: none;
    background: rgba(0,0,0,0.4); padding: 8px; border-radius: 8px;
}

#minigame-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 2000;
}
.minigame-container {
    position: relative; width: 80%; height: 80%; background: #fff; border: 5px solid #f39c12; border-radius: 15px;
}
.minigame-container iframe { width: 100%; height: 100%; border-radius: 10px; }
.close-btn {
    position: absolute; top: -20px; right: -20px; background: #e74c3c; color: white; 
    border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-weight: bold;
}

/* Piilotetaan kursori vain pelialueelta, kun tämä luokka on aktiivinen */
html.game-active, 
html.game-active body, 
html.game-active canvas {
    cursor: none !important;
}