:root {
    --primary-red: #e53935;
    --primary-blue: #1e88e5;
    --dark-bg: #0f2027;
    --mid-bg: #203a43;
    --light-text: #f0f0f0;
    --dark-text: #ffffff;
    --glow-red: 0 0 15px rgba(229, 57, 53, 0.8);
    --glow-blue: 0 0 15px rgba(30, 136, 229, 0.8);
    --gold: #fdd835;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Roboto', sans-serif; }

body {
    background: linear-gradient(135deg, var(--dark-bg), var(--mid-bg));
    height: 100vh; width: 100vw; display: flex;
    justify-content: center; align-items: center; overflow: hidden;
    touch-action: none;
}

#game-container {
    width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25);
    color: var(--light-text); backdrop-filter: blur(10px);
    display: flex; flex-direction: column;
}

#game-board {
    flex-grow: 1; position: relative; display: flex; overflow: hidden;
    background: radial-gradient(circle, #2c3e50 0%, #000000 100%);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.7); min-height: 0;
}

#game-canvas { display: block; width: 100%; height: 100%; object-fit: contain; }

#ui-bar {
    padding: clamp(5px, 1.5vh, 10px); background: rgba(0, 0, 0, 0.4);
    display: flex; justify-content: space-around; align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0;
    flex-wrap: wrap; gap: clamp(5px, 2vw, 15px);
}
.ui-stat {
    background: rgba(0, 0, 0, 0.3); padding: 5px clamp(10px, 3vw, 15px);
    border-radius: 15px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.1);
}
.ui-title { font-size: clamp(10px, 2.5vw, 12px); text-transform: uppercase; color: var(--primary-red); }
.ui-value { font-size: clamp(16px, 4vw, 24px); font-weight: bold; color: var(--light-text); }
#controls { display: flex; gap: 10px; }

button {
    background: var(--primary-red); color: var(--dark-text); border: none; padding: 10px 15px;
    border-radius: 8px; cursor: pointer; font-weight: bold; font-size: clamp(12px, 3vw, 14px);
    transition: all 0.2s ease-in-out; border-bottom: 3px solid #a32724;
}
button:disabled { background: #555; border-bottom-color: #333; cursor: not-allowed; }
button:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; }
button#pause-button, button.blue { background: var(--primary-blue); border-bottom-color: #1565c0; }

.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 20, 30, 0.95);
    display: none; flex-direction: column; justify-content: center; align-items: center;
    padding: clamp(20px, 5vw, 40px); text-align: center; z-index: 100;
    backdrop-filter: blur(10px); border: 1px solid var(--primary-blue);
}
.overlay.active { display: flex; }

.overlay-content {
    background: rgba(0,0,0,0.3); padding: 20px; border-radius: 15px;
    width: 90%; max-width: 450px;
}
.overlay h2 { color: var(--primary-red); font-size: clamp(24px, 6vw, 32px); margin-bottom: 20px; }

.stars-container { display: flex; justify-content: center; gap: 10px; margin: 15px 0; }
.star { font-size: 32px; color: #555; transition: color 0.5s, transform 0.5s; }
.star.earned { color: var(--gold); transform: scale(1.2); }

#combo-display {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: clamp(30px, 10vw, 56px); font-weight: bold; color: var(--gold);
    text-shadow: 0 0 15px rgba(253, 216, 53, 0.8); opacity: 0; pointer-events: none;
    display: none; animation: comboPop 1.2s forwards;
}
@keyframes comboPop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); display: none; }
}

#level-select-header { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 20px; }
#world-selector { padding: 8px; border-radius: 8px; background: rgba(0,0,0,0.5); color: white; border: 1px solid var(--primary-blue); }
#player-stats { text-align: right; }
#levels-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px; max-height: 60vh; overflow-y: auto; padding: 10px;
}
.level-button {
    aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: rgba(0,0,0,0.4); border: 1px solid var(--primary-blue); border-radius: 8px;
    cursor: pointer; transition: background 0.2s;
}
.level-button:hover { background: rgba(30, 136, 229, 0.3); }
.level-button.locked { background: #333; cursor: not-allowed; color: #777; border-color: #555;}
.level-button .level-stars { display: flex; }
.level-button .level-stars .star { font-size: 10px; }