* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
    background: #1a0a2e;
    font-family: 'Boogaloo', cursive;
    color: #fff;
    user-select: none;
    -webkit-user-select: none;
}

#scene-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

#scene-container canvas {
    display: block;
}

/* Loading Screen */
#loading-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1000;
    background: radial-gradient(ellipse at center, #3a1078 0%, #1a0a2e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s;
}
#loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}
#loading-content {
    text-align: center;
}
#loading-logo {
    font-size: 80px;
    animation: bounce 0.6s ease-in-out infinite alternate;
}
#loading-content h1 {
    font-family: 'Luckiest Guy', cursive;
    font-size: 48px;
    color: #ffd700;
    text-shadow: 3px 3px 0 #c0392b, 6px 6px 0 rgba(0,0,0,0.3);
    margin: 10px 0;
}
#loading-content p {
    font-size: 20px;
    color: #e0b0ff;
}
#loading-bar {
    width: 240px;
    height: 12px;
    background: rgba(255,255,255,0.15);
    border-radius: 6px;
    margin: 20px auto;
    overflow: hidden;
}
#loading-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff6b6b, #ffd700, #4ecdc4, #a855f7);
    border-radius: 6px;
    transition: width 0.3s;
}

@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-15px); }
}

/* HUD */
#hud {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10;
    pointer-events: none;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#hud-top-left, #hud-top-right {
    pointer-events: auto;
}

#logo-title {
    font-family: 'Luckiest Guy', cursive;
    font-size: 28px;
    color: #ffd700;
    text-shadow: 2px 2px 0 #c0392b, 4px 4px 0 rgba(0,0,0,0.4);
    letter-spacing: 1px;
}

#welcome-text {
    font-size: 13px;
    color: #e0b0ff;
    margin-top: 2px;
}

#ticket-counter {
    background: linear-gradient(135deg, #2d1b69, #4a2c8a);
    border: 2px solid #ffd700;
    border-radius: 12px;
    padding: 8px 18px;
    font-family: 'Luckiest Guy', cursive;
    font-size: 24px;
    color: #ffd700;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    box-shadow: 0 0 15px rgba(255,215,0,0.3);
}

/* Navigation Bar */
#nav-bar {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
}

.nav-btn {
    background: linear-gradient(180deg, #6c3ce0, #4a1fa0);
    border: 2px solid #a855f7;
    border-radius: 10px;
    padding: 8px 16px;
    color: #fff;
    font-family: 'Boogaloo', cursive;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}
.nav-btn:hover, .nav-btn:active {
    background: linear-gradient(180deg, #8b5cf6, #6c3ce0);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(168,85,247,0.5);
}

/* Interaction Prompt */
#interact-prompt {
    position: fixed;
    bottom: 140px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.7);
    border: 2px solid #4ecdc4;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 16px;
    color: #4ecdc4;
    animation: pulse-glow 1.5s ease-in-out infinite;
}
#interact-prompt.hidden { display: none; }

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(78,205,196,0.3); }
    50% { box-shadow: 0 0 20px rgba(78,205,196,0.6); }
}

/* Song Controls */
#song-controls {
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    background: rgba(26,10,46,0.92);
    border: 2px solid #a855f7;
    border-radius: 14px;
    padding: 12px 20px;
    text-align: center;
    backdrop-filter: blur(8px);
    max-width: 95vw;
}
#song-controls.hidden { display: none; }

#now-playing {
    font-family: 'Luckiest Guy', cursive;
    font-size: 18px;
    color: #ffd700;
    margin-bottom: 8px;
    animation: marquee-glow 2s ease-in-out infinite alternate;
}
@keyframes marquee-glow {
    from { text-shadow: 0 0 5px #ffd700; }
    to { text-shadow: 0 0 20px #ffd700, 0 0 40px #ff6b6b; }
}

#song-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 8px;
}
.song-btn {
    background: linear-gradient(180deg, #c0392b, #922b21);
    border: 1px solid #e74c3c;
    border-radius: 8px;
    padding: 5px 12px;
    color: #fff;
    font-family: 'Boogaloo', cursive;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.song-btn:hover { background: linear-gradient(180deg, #e74c3c, #c0392b); transform: scale(1.05); }
.song-btn.active { background: linear-gradient(180deg, #27ae60, #1e8449); border-color: #2ecc71; }

#playback-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
}
#playback-controls button {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    padding: 4px 14px;
    color: #fff;
    font-family: 'Boogaloo', cursive;
    font-size: 14px;
    cursor: pointer;
}
#playback-controls button:hover { background: rgba(255,255,255,0.2); }

/* Game Overlay */
#game-overlay {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background: rgba(10,5,30,0.96);
    border: 3px solid #a855f7;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 0 40px rgba(168,85,247,0.5), inset 0 0 30px rgba(168,85,247,0.1);
}
#game-overlay.hidden { display: none; }

#game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
#game-title {
    font-family: 'Luckiest Guy', cursive;
    font-size: 24px;
    color: #ffd700;
}
#game-close {
    background: #c0392b;
    border: none;
    border-radius: 50%;
    width: 32px; height: 32px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
#game-close:hover { background: #e74c3c; }

#game-canvas {
    display: block;
    background: #0a0520;
    border-radius: 8px;
    border: 2px solid #2d1b69;
}

#game-score {
    text-align: center;
    font-family: 'Luckiest Guy', cursive;
    font-size: 20px;
    color: #4ecdc4;
    margin-top: 8px;
}

/* Ticket Win */
#ticket-win {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 200;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}
#ticket-win.hidden { display: none; }

#ticket-win-inner {
    text-align: center;
    animation: win-pop 0.5s ease-out;
}
#win-text {
    font-family: 'Luckiest Guy', cursive;
    font-size: 36px;
    color: #fff;
}
#win-tickets {
    font-family: 'Luckiest Guy', cursive;
    font-size: 80px;
    color: #ffd700;
    text-shadow: 3px 3px 0 #c0392b;
    animation: win-count 0.8s ease-out;
}
#win-label {
    font-family: 'Luckiest Guy', cursive;
    font-size: 36px;
    color: #ff6b6b;
}

@keyframes win-pop {
    from { transform: scale(0.3); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Prize Overlay */
#prize-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 150;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}
#prize-overlay.hidden { display: none; }

#prize-panel {
    background: linear-gradient(135deg, #2d1b69, #1a0a2e);
    border: 3px solid #ffd700;
    border-radius: 16px;
    padding: 25px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}
#prize-panel h2 {
    font-family: 'Luckiest Guy', cursive;
    font-size: 32px;
    color: #ffd700;
    text-align: center;
    margin-bottom: 15px;
}
#prize-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}
.prize-item {
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,215,0,0.3);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.prize-item:hover { border-color: #ffd700; background: rgba(255,215,0,0.1); transform: scale(1.05); }
.prize-item.owned { border-color: #2ecc71; background: rgba(46,204,113,0.15); }
.prize-item.cant-afford { opacity: 0.5; cursor: not-allowed; }
.prize-icon { font-size: 36px; display: block; margin-bottom: 4px; }
.prize-name { font-size: 13px; color: #e0b0ff; }
.prize-cost { font-size: 12px; color: #ffd700; margin-top: 2px; }

#prize-close {
    display: block;
    margin: 0 auto;
    background: linear-gradient(180deg, #c0392b, #922b21);
    border: 2px solid #e74c3c;
    border-radius: 10px;
    padding: 10px 24px;
    color: #fff;
    font-family: 'Luckiest Guy', cursive;
    font-size: 18px;
    cursor: pointer;
}
#prize-close:hover { background: linear-gradient(180deg, #e74c3c, #c0392b); }

/* Party Button */
#party-btn {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 10;
    background: linear-gradient(135deg, #ff6b6b, #ffd700);
    border: 2px solid #fff;
    border-radius: 12px;
    padding: 8px 16px;
    font-family: 'Luckiest Guy', cursive;
    font-size: 16px;
    color: #1a0a2e;
    cursor: pointer;
    animation: party-pulse 2s ease-in-out infinite;
}
@keyframes party-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255,107,107,0.5); }
    50% { box-shadow: 0 0 25px rgba(255,215,0,0.8); }
}

/* Confetti Canvas */
#confetti-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 300;
    pointer-events: none;
}

/* Mobile Controls */
#mobile-controls {
    display: none;
    position: fixed;
    bottom: 130px;
    left: 20px;
    z-index: 12;
}
#joystick-base {
    width: 100px;
    height: 100px;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    position: relative;
}
#joystick-thumb {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
    #mobile-controls { display: block; }
    #logo-title { font-size: 20px; }
    #ticket-counter { font-size: 18px; padding: 6px 12px; }
    .nav-btn { font-size: 12px; padding: 6px 10px; }
    #nav-bar { bottom: 70px; }
    #party-btn { top: 60px; right: 10px; font-size: 13px; padding: 6px 12px; }
    .song-btn { font-size: 11px; padding: 4px 8px; }
}

/* Footer */
#footer {
    position: fixed;
    bottom: 4px;
    right: 10px;
    z-index: 10;
}
#footer a {
    color: rgba(255,255,255,0.25);
    text-decoration: none;
    font-size: 11px;
    font-family: 'Boogaloo', cursive;
}
#footer a:hover { color: rgba(255,255,255,0.5); }

.hidden { display: none !important; }