/* Reset & basic */
* { box-sizing: border-box; margin:0; padding:0; }
body, html { height:100%; overflow:auto; font-family: Arial, sans-serif; background:#000; color:#fff; }

/* Pre-Hug Fullscreen */
#preHugSection { width:100%; height:100vh; display:flex; justify-content:center; align-items:center; background:#000; }
#preHugCountdownContainer { text-align:center; }
.countdown-label { font-size:14px; opacity:0.7; }
#preHugCountdown { font-size:60px; font-weight:bold; margin:10px 0; }
.countdown-sub { font-size:16px; margin-top:5px; }
.countdown-tagline { font-size:12px; opacity:0.8; margin-top:5px; font-style:italic; }

/* Hug Hour Top Countdown */
#hugHourTopCountdown { width:100%; position:fixed; top:0; left:0; text-align:center; z-index:1000; padding:10px; background:rgba(0,0,0,0.8); font-size:1.2rem; font-weight:bold; }
.hidden { display:none; }

/* Song Feed */
.song-feed { height:100vh; scroll-snap-type: y mandatory; overflow-y:auto; }
.song-card { position:relative; width:100%; height:100vh; scroll-snap-align:start; display:flex; justify-content:center; align-items:center; }
.song-card img.song-img { width:100%; height:100%; object-fit:cover; }
.play-overlay { position:absolute; font-size:4rem; color:rgba(255,255,255,0.8); cursor:pointer; }
.sendBtn { position:absolute; bottom:60px; left:50%; transform:translateX(-50%); padding:12px 24px; background:#ff0050; color:#fff; border:none; border-radius:25px; cursor:pointer; font-size:1rem; z-index:500; opacity:0.9; transition:0.2s; }
.sendBtn:hover { opacity:1; }

/* Popups */
.popup { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.95); padding:20px; border-radius:15px; max-width:90%; max-height:90%; text-align:center; z-index:10000; color:#fff; animation:fadeIn 0.5s ease; overflow-y:auto; }
@keyframes fadeIn { from{opacity:0; transform:translate(-50%,-60%);} to{opacity:1; transform:translate(-50%,-50%);} }

/* Hug Emoji Buttons */
.hug-emoji { font-size:3rem; margin:5px; cursor:pointer; background:none; border:none; }
.hug-emoji:hover { transform:scale(1.2); transition:0.2s; }
.hugmoji-container { margin:10px 0; }