:root{--font-family:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--glass-bg:#1e10168c;--glass-border:#ffffff38;--glass-shadow:0 20px 45px #0000008c;--glass-blur:blur(24px) saturate(190%);--active-row-bg:#ffffff2e;--active-row-border:#ffffff4d;--text-primary:#fff;--text-secondary:#ffffffb8;--text-muted:#ffffff7a;--accent-white:#fff;--player-height:80px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;margin:0;padding:0}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}html,body{width:100vw;height:100dvh;font-family:var(--font-family);color:var(--text-primary);background-color:#0b0609;position:fixed;top:0;left:0;overflow:hidden}.viewport-bg{z-index:1;width:100vw;height:100dvh;position:absolute;top:0;left:0;overflow:hidden}.bg-picture,.bg-image{object-fit:cover;object-position:center;width:100%;height:100%;display:block}.bg-overlay{pointer-events:none;z-index:3;background:radial-gradient(circle,#00000026 0%,#00000073 100%),linear-gradient(#0000 60%,#0000008c 100%);width:100%;height:100%;position:absolute;top:0;left:0}.control-emoji{font-size:1.15rem;line-height:1;transition:transform .2s cubic-bezier(.175,.885,.32,1.275);display:inline-block}.cheers-btn:hover .control-emoji{transform:scale(1.25)rotate(-10deg)}.cheers-btn:active .control-emoji{transform:scale(1.4)rotate(15deg)}@keyframes cheersClinkAnim{0%{transform:scale(1)rotate(0)}25%{transform:scale(1.35)rotate(-22deg)}50%{filter:drop-shadow(0 0 14px #ffd166e6);transform:scale(1.5)rotate(18deg)}75%{transform:scale(1.1)rotate(-5deg)}to{transform:scale(1)rotate(0)}}.cheers-btn.clinking .control-emoji{animation:.45s cubic-bezier(.175,.885,.32,1.275) cheersClinkAnim}@keyframes glassThumbClink{0%{transform:translate(-50%,-50%)scale(1)rotate(0)}40%{filter:drop-shadow(0 0 16px #ffc864e6);transform:translate(-50%,-50%)scale(1.6)rotate(20deg)}to{transform:translate(-50%,-50%)scale(1)rotate(0)}}.glass-thumb.thumb-clink{animation:.45s cubic-bezier(.175,.885,.32,1.275) glassThumbClink}.cheers-particle{pointer-events:none;z-index:9999;font-size:1.15rem;animation:1s cubic-bezier(.1,.8,.3,1) forwards cheersParticleExplode;position:fixed;transform:translate(-50%,-50%)}@keyframes cheersParticleExplode{0%{opacity:1;transform:translate(-50%,-50%)scale(.4)rotate(0)}50%{opacity:.9}to{opacity:0;transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.3) rotate(360deg)}}.cheers-toast-quote{pointer-events:none;z-index:9999;color:#ffd166;-webkit-backdrop-filter:blur(12px);white-space:nowrap;letter-spacing:.4px;background:#1e1016eb;border:1px solid #ffd16680;border-radius:20px;padding:6px 14px;font-size:.82rem;font-weight:800;animation:1.2s cubic-bezier(.2,.8,.2,1) forwards cheersToastFloat;position:fixed;transform:translate(-50%,-100%);box-shadow:0 8px 24px #00000080,0 0 14px #ffd16666}@keyframes cheersToastFloat{0%{opacity:0;transform:translate(-50%,-40%)scale(.6)}20%{opacity:1;transform:translate(-50%,-100%)scale(1.08)}80%{opacity:1;transform:translate(-50%,-130%)scale(1)}to{opacity:0;transform:translate(-50%,-160%)scale(.9)}}.mood-btn.active{box-shadow:0 0 16px #ffd16673;color:#ffd166!important;background:#ffd16647!important}.ambient-btn.active{box-shadow:0 0 16px #4cc9f066;color:#4cc9f0!important;background:#4cc9f040!important}@keyframes cloudSway{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-3px)rotate(-6deg)}}.ambient-btn.active .control-emoji{animation:2s ease-in-out infinite cloudSway}.rain-canvas{pointer-events:none;z-index:4;opacity:0;width:100%;height:100%;transition:opacity .8s;position:absolute;top:0;left:0}body.rain-active .rain-canvas{opacity:.75}.cassette-btn.active{box-shadow:0 0 14px #ffb40066;color:#ffb400!important;background:#ffb40040!important}.app-container{z-index:10;pointer-events:none;flex-direction:column;justify-content:flex-end;align-items:center;width:100vw;height:100dvh;padding:24px;display:flex;position:relative}.youtube-player-wrap{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;top:-9999px;left:-9999px}.player-bar{pointer-events:auto;width:100%;max-width:780px;height:var(--player-height);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);z-index:30;border-radius:9999px;align-items:center;gap:16px;padding:0 14px 0 12px;transition:all .3s cubic-bezier(.25,1,.5,1);display:flex;position:relative}.player-bar:hover{border-color:#ffffff52;box-shadow:0 24px 55px #000000a6}.player-header{flex-shrink:0;align-items:center;gap:12px;min-width:0;max-width:260px;display:flex}.album-art-container{flex-shrink:0}.album-art-wrap{border:2px solid #ffffff4d;border-radius:50%;width:58px;height:58px;position:relative;overflow:hidden;box-shadow:0 4px 15px #0006}.album-art{object-fit:cover;border-radius:50%;width:100%;height:100%;display:block}.album-art.spinning{animation:12s linear infinite spinVinyl}.album-art.paused{animation-play-state:paused}@keyframes spinVinyl{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.vinyl-hole{pointer-events:none;background:#121012;border:2px solid #ffffffb3;border-radius:50%;width:11px;height:11px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 4px #000c}.player-middle{flex-direction:column;flex:1;justify-content:center;gap:4px;min-width:0;display:flex}.track-meta{align-items:baseline;gap:10px;min-width:0;display:flex}.track-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:700;line-height:1.2;overflow:hidden}.track-artist{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;flex-shrink:0;font-size:.8rem;font-weight:500;line-height:1.2;overflow:hidden}.progress-row{align-items:center;gap:14px;width:100%;display:flex}.progress-container{cursor:pointer;flex:1;align-items:center;height:12px;display:flex;position:relative}.progress-bar{appearance:none;z-index:2;cursor:pointer;background:#fff3;border-radius:4px;outline:none;width:100%;height:4px;position:relative}.progress-bar::-webkit-slider-thumb{appearance:none;width:28px;height:28px;box-shadow:none;cursor:pointer;opacity:0;background:0 0;border-radius:0}.progress-bar::-moz-range-thumb{cursor:pointer;opacity:0;background:0 0;border:none;width:28px;height:28px}.progress-fill{pointer-events:none;z-index:1;background:#fff;border-radius:4px;width:0%;height:4px;position:absolute;top:4px;left:0;box-shadow:0 0 10px #ffffff80}.glass-thumb{pointer-events:none;z-index:3;filter:drop-shadow(0 2px 5px #000000b3);width:auto;max-width:36px;height:28px;transition:transform .15s cubic-bezier(.175,.885,.32,1.275),filter .15s;position:absolute;top:50%;left:0%;transform:translate(-50%,-50%)}.progress-container:hover .glass-thumb{filter:drop-shadow(0 4px 12px #ffc878cc);transform:translate(-50%,-50%)scale(1.2)}body.light-mode-candle .player-bar{opacity:.28;-webkit-backdrop-filter:blur(4px);border-color:#ffd16666}body.light-mode-candle .player-bar:hover{opacity:.95;-webkit-backdrop-filter:var(--glass-blur)}@keyframes candleFlicker{0%,to{opacity:.35;filter:drop-shadow(0 0 12px #ffd16680)}50%{opacity:.22;filter:drop-shadow(0 0 20px #ffb432cc)}}body.light-mode-candle .bg-overlay{background:radial-gradient(circle,#ffc86429 0%,#140a05a6 100%),linear-gradient(#0000 60%,#0000008c 100%);animation:3s ease-in-out infinite candleFlicker}body.light-mode-midnight .player-bar{opacity:.35;-webkit-backdrop-filter:blur(8px);border-color:#82c8ff73;box-shadow:0 20px 45px #000000a6,0 0 25px #64b4ff59}body.light-mode-midnight .player-bar:hover{opacity:.96;-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 20px 45px #000000a6,0 0 35px #82c8ff80}@keyframes moonlightPulse{0%,to{opacity:.45;filter:drop-shadow(0 0 20px #82beff66)}50%{opacity:.28;filter:drop-shadow(0 0 35px #64aaffb3)}}body.light-mode-midnight .bg-overlay{background:radial-gradient(circle at 50% 30%,#8cc8ff3d 0%,#1e2d5a80 45%,#060c1cd9 100%),linear-gradient(#0000 50%,#0f193cbf 100%);animation:4s ease-in-out infinite moonlightPulse}body.light-mode-fireplace .player-bar{opacity:.28;-webkit-backdrop-filter:blur(4px);border-color:#ff572273}body.light-mode-fireplace .player-bar:hover{opacity:.95;-webkit-backdrop-filter:var(--glass-blur)}@keyframes fireGlow{0%,to{opacity:.38;filter:drop-shadow(0 0 15px #ff572299)}50%{opacity:.24;filter:drop-shadow(0 0 25px #ff2800d9)}}body.light-mode-fireplace .bg-overlay{background:radial-gradient(circle,#ff572242 0%,#230505b3 100%),linear-gradient(#0000 60%,#190505a6 100%);animation:2.5s ease-in-out infinite fireGlow}.time-container{flex-shrink:0;align-items:center;display:flex}.time-display{color:var(--text-muted);letter-spacing:.2px;font-size:.72rem;font-weight:600}.player-controls{flex-shrink:0;align-items:center;gap:8px;display:flex}.control-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex;position:relative}.control-btn:hover{color:#fff;background:#ffffff1f}.control-btn:active{transform:scale(.92)}.control-btn.active{color:#fff;background:#ffffff38;box-shadow:0 0 12px #fff3}.control-btn.active:after{content:"";background:#fff;border-radius:50%;width:4px;height:4px;position:absolute;bottom:3px}.play-pause-btn{color:#0d080c;cursor:pointer;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;display:flex;box-shadow:0 6px 20px #ffffff59}.play-pause-btn:hover{transform:scale(1.08);box-shadow:0 8px 25px #ffffff80}.play-pause-btn:active{transform:scale(.95)}.control-icon.hidden{display:none}.playlist-modal{pointer-events:auto;bottom:calc(var(--player-height) + 36px);width:calc(100% - 48px);max-width:780px;max-height:460px;-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);z-index:25;opacity:0;visibility:hidden;background:#230f16b8;border-radius:28px;flex-direction:column;padding:20px;transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1),visibility .35s;display:flex;position:absolute;overflow:hidden;transform:translateY(20px)scale(.97)}.playlist-modal.open{opacity:1;visibility:visible;transform:translateY(0)scale(1)}.playlist-header{border-bottom:1px solid #ffffff1f;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:14px;display:flex}.playlist-title-wrap{align-items:center;gap:12px;display:flex}.playlist-icon{font-size:1.4rem}.playlist-title{color:var(--text-primary);font-size:1.1rem;font-weight:700;line-height:1.2}.playlist-subtitle{color:var(--text-secondary);font-size:.78rem;font-weight:500}.close-btn{color:var(--text-secondary);cursor:pointer;background:#ffffff1a;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.close-btn:hover{color:#fff;background:#fff3}.playlist-tabs{background:#00000040;border:1px solid #ffffff1f;border-radius:14px;flex-shrink:0;gap:8px;margin-bottom:14px;padding:4px;display:flex}.playlist-tab{color:var(--text-secondary);font-family:var(--font-family);cursor:pointer;text-align:center;background:0 0;border:none;border-radius:10px;flex:1;padding:8px 12px;font-size:.82rem;font-weight:700;transition:all .2s cubic-bezier(.2,.8,.2,1)}.playlist-tab:hover{color:#fff;background:#ffffff1a}.playlist-tab.active{color:#fff;background:#ffffff38;border:1px solid #ffffff47;box-shadow:0 4px 12px #0000004d}.playlist-tracks{flex-direction:column;flex:1;gap:4px;padding-right:6px;display:flex;overflow-y:auto}.playlist-tracks::-webkit-scrollbar{width:6px}.playlist-tracks::-webkit-scrollbar-track{background:#ffffff0d;border-radius:10px}.playlist-tracks::-webkit-scrollbar-thumb{background:#ffffff40;border-radius:10px}.playlist-tracks::-webkit-scrollbar-thumb:hover{background:#fff6}.track-item{cursor:pointer;border-radius:14px;align-items:center;gap:14px;padding:10px 14px;transition:background .2s,transform .15s;display:flex}.track-item:hover{background:#ffffff1a}.track-item.active{background:var(--active-row-bg);border:1px solid var(--active-row-border);box-shadow:0 4px 15px #0003}.track-index{color:var(--text-muted);text-align:center;flex-shrink:0;width:24px;font-size:.85rem;font-weight:700}.track-item.active .track-index{color:#fff}.track-info{flex:1;justify-content:space-between;align-items:center;gap:16px;min-width:0;display:flex}.track-item-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.92rem;font-weight:700;overflow:hidden}.track-item-artist{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;text-align:right;flex-shrink:0;max-width:40%;font-size:.82rem;font-weight:600;overflow:hidden}.track-item.active .track-item-title{color:#fff}@media (width<=640px){.app-container{padding:10px}.player-bar{border-radius:26px;flex-direction:column;align-items:stretch;gap:10px;width:calc(100% - 8px);max-width:100%;height:auto;padding:12px 14px}.player-header{gap:12px;width:100%;max-width:100%}.album-art-wrap{width:46px;height:46px}.vinyl-hole{width:8px;height:8px}.track-title{font-size:.9rem;font-weight:700}.track-artist{margin-top:1px;font-size:.78rem}.player-middle{gap:3px;width:100%}.progress-container{height:14px}.time-container{margin-top:1px}.time-display{font-size:.72rem}.player-controls{border-top:1px solid #ffffff1f;justify-content:space-between;gap:2px;width:100%;padding-top:6px}.control-btn{width:36px;height:36px}.play-pause-btn{width:44px;height:44px}.shayari-ticker{justify-content:center;width:calc(100% - 16px);max-width:360px;padding:6px 14px;bottom:202px}.ticker-text{white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;overflow:hidden}.playlist-modal{border-radius:22px;width:calc(100% - 16px);max-height:50vh;padding:14px;bottom:202px}.track-info{flex-direction:row;justify-content:space-between;align-items:center}.track-item-artist{text-align:right;max-width:45%;font-size:.78rem}}.drunk-clock{pointer-events:auto;z-index:40;-webkit-backdrop-filter:var(--glass-blur);cursor:pointer;-webkit-user-select:none;user-select:none;background:#190c128c;border:1px solid #ffffff40;border-radius:9999px;justify-content:center;align-items:center;padding:8px 18px;transition:transform .3s,border-color .3s;animation:6s ease-in-out infinite drunkWobble;display:flex;position:absolute;top:24px;right:28px;box-shadow:0 10px 30px #00000073}.drunk-clock:hover{background:#231018bf;border-color:#ffd16699;transform:scale(1.08)rotate(-2deg)}.clock-text{color:#fff8e7;letter-spacing:.5px;z-index:2;text-shadow:0 0 10px #ffdc9699;font-size:1.1rem;font-weight:800;animation:4s ease-in-out infinite drunkTextBlur;position:relative}.clock-ghost{color:#ffb464a6;letter-spacing:.5px;z-index:1;pointer-events:none;white-space:nowrap;filter:blur(1.5px);font-size:1.1rem;font-weight:800;animation:3.5s ease-in-out infinite ghostWobble;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes drunkWobble{0%,to{filter:blur();transform:rotate(0)scale(1)}25%{filter:blur(.6px);transform:rotate(-2.5deg)scale(1.03)}50%{filter:blur(1.4px);transform:rotate(2deg)scale(.97)}75%{filter:blur(.5px);transform:rotate(-1.5deg)scale(1.02)}}@keyframes ghostWobble{0%,to{opacity:.45;transform:translate(-42%,-56%)rotate(3deg)}50%{opacity:.85;filter:blur(2.5px);transform:translate(-58%,-44%)rotate(-4deg)}}@keyframes drunkTextBlur{0%,to{filter:blur();text-shadow:0 0 10px #ffdc9699}50%{filter:blur(1.8px);text-shadow:-3px 2px 8px #ff6496cc,4px -2px 10px #64c8ffb3}}@keyframes drunkSurgeAnim{0%{filter:blur();transform:scale(1)rotate(0)}20%{filter:blur(3px);transform:scale(1.25)rotate(-9deg)}40%{filter:blur(4px);transform:scale(1.18)rotate(7deg)}60%{filter:blur(2.5px);transform:scale(1.2)rotate(-5deg)}80%{filter:blur(1px);transform:scale(1.06)rotate(3deg)}to{filter:blur();transform:scale(1)rotate(0)}}.drunk-clock.drunk-surge{border-color:#ffd166d9;animation:3.5s cubic-bezier(.2,.8,.3,1) drunkSurgeAnim;box-shadow:0 0 25px #ffd16699}.high-counter-badge{pointer-events:auto;z-index:40;-webkit-backdrop-filter:var(--glass-blur);letter-spacing:.2px;-webkit-user-select:none;user-select:none;background:#120a14a6;border:1px solid #ffffff38;border-radius:9999px;align-items:center;padding:8px 18px;font-size:.9rem;transition:transform .3s,border-color .3s;animation:5.5s ease-in-out infinite highBadgeBlurWobble;display:flex;position:absolute;top:24px;left:28px;box-shadow:0 10px 30px #00000073}.high-counter-badge:hover{filter:blur();border-color:#2ec4b699;transform:translateY(-2px)scale(1.05)rotate(1deg)}.live-dot{background:#2ec4b6;border-radius:50%;width:9px;height:9px;margin-right:10px;animation:2s ease-in-out infinite pulseGreen;display:inline-block;box-shadow:0 0 10px #2ec4b6}@keyframes pulseGreen{0%,to{transform:scale(1);box-shadow:0 0 8px #2ec4b6,0 0 16px #2ec4b680}50%{transform:scale(1.25);box-shadow:0 0 14px #2ec4b6,0 0 24px #2ec4b6cc}}.high-count-num,.high-count-label{animation:4.2s ease-in-out infinite highTextBlur}.high-count-num{color:#fff;margin-right:6px;font-weight:800;transition:transform .2s,color .2s;display:inline-block}.high-count-num.pop-num{color:#ffd166;transform:scale(1.3)}.high-count-label{color:#ffffffc7;font-size:.88rem;font-weight:600}@keyframes highBadgeBlurWobble{0%,to{filter:blur();transform:rotate(0)scale(1)}25%{filter:blur(.7px);transform:rotate(2deg)scale(1.03)}50%{filter:blur(1.5px);transform:rotate(-1.8deg)scale(.97)}75%{filter:blur(.5px);transform:rotate(1.2deg)scale(1.02)}}@keyframes highTextBlur{0%,to{filter:blur();text-shadow:0 0 8px #2ec4b680}50%{filter:blur(1.6px);text-shadow:-2.5px 1.5px 7px #2ec4b6d9,3px -1.5px 9px #ffd166bf}}@keyframes highSurgeAnim{0%{filter:blur();transform:scale(1)rotate(0)}20%{filter:blur(3px);transform:scale(1.22)rotate(8deg)}40%{filter:blur(3.5px);transform:scale(1.15)rotate(-6deg)}60%{filter:blur(2px);transform:scale(1.18)rotate(4deg)}80%{filter:blur(1px);transform:scale(1.05)rotate(-2deg)}to{filter:blur();transform:scale(1)rotate(0)}}.high-counter-badge.high-surge{border-color:#2ec4b6d9;animation:3.5s cubic-bezier(.2,.8,.3,1) highSurgeAnim;box-shadow:0 0 25px #2ec4b699}
