* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; }
body { background: #000; color: #fff; overflow: hidden; height: 100dvh; width: 100vw; }

#video-container { position: fixed; inset: 0; z-index: 1; display: flex; justify-content: center; align-items: center; }
#main-player { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s; }
body.video-on #main-player { opacity: 1; }

.hidden { display: none !important; }

/* MEGA CLOUD UI */
#storm-ui { 
    position: absolute; top: 8%; left: 50%; transform: translateX(-50%); 
    z-index: 10; width: 250px; pointer-events: none;
}

#emoji-cloud-active { 
    font-size: 180px; position: relative; z-index: 12; 
    pointer-events: auto; cursor: pointer; user-select: none;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.1));
}

/* RAIN CONTAINMENT: Narrower path than the cloud */
#rain-container {
    position: absolute; top: 100px; left: 25%; width: 50%; height: 280px;
    z-index: 11; overflow: hidden; pointer-events: none;
}

.droplet { 
    position: absolute; font-size: 24px; 
    animation: fall 0.6s linear forwards; 
}

/* DYNAMIC LIGHTNING: Stretches to match rain depth */
.lightning-bolt { 
    position: absolute; top: 90px; left: 50%; transform: translateX(-50%); 
    font-size: 80px; z-index: 13; 
    text-shadow: 0 0 20px #fff200, 0 0 40px #fff; 
    pointer-events: none; 
    animation: strike-stretch 0.4s ease-out forwards; 
}

@keyframes fall { 
    0% { transform: translateY(0) scale(0.4); opacity: 0; } 
    30% { opacity: 1; } 
    100% { transform: translateY(260px) scale(1); opacity: 0; } 
}

@keyframes strike-stretch { 
    0% { opacity: 0; transform: translateX(-50%) scaleY(0.1); transform-origin: top; } 
    20% { opacity: 1; transform: translateX(-50%) scaleY(1.5); } /* Stretches down */
    40% { opacity: 0.6; } 
    60% { opacity: 1; } 
    100% { opacity: 0; transform: translateX(-50%) scaleY(1.2) translateY(50px); } 
}

/* UI OVERLAY & TABS */
#ui-overlay { 
    position: fixed; bottom: 0; left: 0; width: 100vw; z-index: 500; 
    background: linear-gradient(to top, rgba(0,0,0,1) 85%, transparent); 
    padding: 20px; padding-bottom: calc(15px + env(safe-area-inset-bottom)); 
    display: flex; flex-direction: column; gap: 12px;
}

#skip-btn { flex-grow: 1; background: #fff; color: #000; border-radius: 50px; font-weight: 900; padding: 14px; border: none; font-size: 1rem; }
.tab-bar { display: flex; justify-content: space-around; border-top: 1px solid #222; padding-top: 10px; }
.tab-item { background: none; border: none; color: #555; display: flex; flex-direction: column; align-items: center; }
.tab-item.active { color: #fff; }

#login-screen, #commence-screen { position: fixed; inset: 0; background: #000; z-index: 1000; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#start-cloud { font-size: 180px; cursor: pointer; }