:root{--bg-color:#050505;--neon-purple:#8b00ff;--neon-cyan:#0ff;--neon-pink:#ff1493;--text-color:#e0e0e0;--glass-bg:#ffffff0d;--glass-border:#ffffff1a}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);width:100vw;height:100vh;font-family:Rajdhani,sans-serif;overflow:hidden}#canvas-container{z-index:1;width:100%;height:100%;position:fixed;top:0;left:0}#preloader{z-index:100;background:#000;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity 1.5s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;left:0}.loader-content{text-align:center;width:80%;max-width:400px}.glitch{letter-spacing:12px;color:#fff;opacity:.8;margin-bottom:3rem;font-family:Orbitron,sans-serif;font-size:1.5rem;font-weight:300;position:relative}.progress-bar-container{background:#ffffff0d;width:100%;height:1px;margin-bottom:2rem;position:relative}#progress-bar{background:#fff;width:0%;height:100%;transition:width .4s;box-shadow:0 0 20px #fff}#load-status{letter-spacing:4px;opacity:.4;text-transform:uppercase;font-size:.7rem}#enter-btn{color:#fff;letter-spacing:5px;cursor:pointer;background:0 0;border:1px solid #fff3;margin-top:3rem;padding:1.2rem 4rem;font-family:Orbitron,sans-serif;font-size:.8rem;transition:all .6s cubic-bezier(.16,1,.3,1)}#enter-btn:hover{color:#000;letter-spacing:8px;background:#fff;border-color:#fff}#hud{z-index:10;pointer-events:none;opacity:0;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:3rem;transition:opacity 2s;display:flex;position:fixed;top:0;left:0}#hud.visible{opacity:1}.top-bar{justify-content:space-between;width:100%;display:flex}.logo{letter-spacing:4px;color:#ffffff80;font-family:Orbitron,sans-serif;font-size:.9rem;font-weight:700}#status-mode{color:var(--neon-cyan);font-weight:700}.instruction-guide{letter-spacing:3px;opacity:.4;text-transform:uppercase;align-self:center;font-size:.7rem}.hud-bottom-actions{pointer-events:auto;position:absolute;bottom:3rem;left:3rem}#next-island-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;letter-spacing:2px;cursor:pointer;background:#ffffff0d;border:1px solid #fff3;border-radius:4px;padding:.8rem 1.5rem;font-family:Orbitron,sans-serif;font-size:.8rem;transition:all .3s}#next-island-btn:hover{background:#fff3;box-shadow:0 0 15px #ffffff4d}@media (width<=768px){.loader-content{width:90%}.glitch{font-size:1.5rem}#hud{padding:1.5rem}.top-bar{flex-direction:column;align-items:center;gap:.8rem}.logo{font-size:.8rem}.system-status{font-size:.65rem}.instruction-guide{letter-spacing:2px;text-align:center;padding-bottom:5rem;font-size:.55rem}.hud-bottom-actions{justify-content:center;display:flex;bottom:calc(220px + 1.5rem);left:1rem;right:1rem}#next-island-btn{letter-spacing:1.5px;width:auto;padding:.7rem 1.2rem;font-size:.7rem}}#playlist-panel{-webkit-backdrop-filter:blur(28px);z-index:20;pointer-events:auto;opacity:0;background:#0009;border:1px solid #ffffff12;border-radius:6px;width:310px;transition:opacity .4s,transform .4s cubic-bezier(.16,1,.3,1);position:fixed;bottom:3rem;right:3rem;overflow:hidden;transform:translateY(24px)}#playlist-panel.open{opacity:1;transform:translateY(0)}.pl-header{border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding:1.1rem 1.4rem;display:flex}.pl-island-label{letter-spacing:3px;color:#fff;align-items:center;gap:.6rem;font-family:Orbitron,sans-serif;font-size:.8rem;display:flex}.pl-dot{background:var(--pl-color,#fff);width:8px;height:8px;box-shadow:0 0 10px var(--pl-color,#fff);border-radius:50%;flex-shrink:0}#pl-close-btn{color:#ffffff59;cursor:pointer;background:0 0;border:none;padding:.3rem .5rem;font-size:.9rem;line-height:1;transition:color .2s}#pl-close-btn:hover{color:#fff}#pl-track-list{scrollbar-width:thin;scrollbar-color:#ffffff14 transparent;max-height:148px;padding:.4rem 0;overflow-y:auto}.pl-track-item{cursor:pointer;color:#ffffff73;letter-spacing:1.5px;text-transform:uppercase;align-items:center;gap:.75rem;padding:.6rem 1.4rem;font-size:.72rem;transition:background .18s;display:flex}.pl-track-item:hover{color:#ffffffd9;background:#ffffff0a}.pl-track-item.active{color:var(--pl-color,#fff);background:#ffffff08}.pl-track-num{opacity:.35;text-align:center;flex-shrink:0;width:16px;font-size:.6rem}.pl-track-item.active .pl-track-num{opacity:1}.pl-player{border-top:1px solid #ffffff0d;padding:1rem 1.4rem 1.3rem}.pl-now-playing{letter-spacing:2px;color:var(--pl-color,#ffffff80);white-space:nowrap;text-overflow:ellipsis;text-transform:uppercase;margin-bottom:.85rem;font-size:.66rem;overflow:hidden}.pl-seek-row{align-items:center;gap:.55rem;margin-bottom:1rem;display:flex}.pl-time{letter-spacing:.5px;color:#ffffff4d;flex-shrink:0;min-width:28px;font-size:.58rem}.pl-seekbar{cursor:pointer;background:#ffffff1a;border-radius:2px;flex:1;height:3px;position:relative}.pl-seekbar:hover .pl-seekbar-thumb{transform:translate(-50%,-50%)scale(1.4)}.pl-seekbar-fill{background:var(--pl-color,#fff);pointer-events:none;border-radius:2px;width:0%;height:100%}.pl-seekbar-thumb{background:var(--pl-color,#fff);width:10px;height:10px;box-shadow:0 0 8px var(--pl-color,#fff);pointer-events:none;border-radius:50%;transition:transform .15s;position:absolute;top:50%;left:0%;transform:translate(-50%,-50%)}.pl-controls{justify-content:center;align-items:center;gap:.9rem;display:flex}.pl-ctrl-btn{color:#ffffff8c;cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:.65rem;transition:all .2s;display:flex}.pl-ctrl-btn:hover{color:#fff;border-color:#ffffff4d}.pl-play-btn{border-color:var(--pl-color,#ffffff4d);width:46px;height:46px;color:var(--pl-color,#fff);box-shadow:0 0 12px color-mix(in srgb, var(--pl-color,#fff) 25%, transparent);font-size:1rem}.pl-play-btn:hover{background:var(--pl-color,#ffffff1a);color:#000}@media (width<=768px){#playlist-panel{width:calc(100vw - 2rem);bottom:1rem;right:1rem}}