.hidden{ display:none !important; }

.player-card:hover{ transform:none; box-shadow:0 8px 32px 0 rgba(31,38,135,.37), inset 0 1px 0 rgba(255,255,255,.5); }
.player-bar{ display:flex; gap:10px; margin-bottom:12px; }
.player-bar button{
    padding:8px 16px; border-radius:20px; border:2px solid var(--accent-blue);
    background:white; color:var(--accent-blue); font-weight:600; cursor:pointer;
}
.player-bar button:hover{ background:var(--sky-blue); }

#player-frame{ width:100%; overflow:hidden; }
#player-stage{
    position:relative; width:999px; height:580px; overflow:hidden;
    transform-origin:0 0; background:#14120f;
    font-family:'Helvetica Bold', Helvetica, Arial, sans-serif; line-height:normal;
}
/* YouTube player*/
#yt-holder{ position:fixed; left:-300px; top:0; width:200px; height:200px; pointer-events:none; }

#playlist-menu{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#playlist-menu-list{ display:flex; flex-direction:column; gap:12px; }
.playlist-menu-btn{
    padding:14px 28px; font-size:16px; background:#2a2820; color:#FFE48B;
    border:1px solid #555; border-radius:4px; cursor:pointer;
}
.playlist-menu-btn:hover{ background:#3a3830; }

.start-screen, .panel{ position:relative; width:999px; height:580px; }
.panel{ overflow:hidden; }
.start-bg, .panel-bg{ width:100%; height:100%; display:block; }
.panel-bg.inverted{ filter:invert(1); }
.start-button{ position:absolute; background:transparent; border:none; cursor:pointer; }

.transparent-btn{ position:absolute; background:transparent; border:none; cursor:pointer; }
.transparent-btn.pressed{ animation:btn-flash 150ms ease-out; }
@keyframes btn-flash{ 0%{ background:rgba(255,255,255,.35); } 100%{ background:rgba(255,255,255,0); } }
.locked{ pointer-events:none; }

.title-wrap{ position:absolute; overflow:hidden; white-space:nowrap; color:#161616; }
.title-track{ display:inline-flex; gap:60px; width:100%; justify-content:center; font-size:20px; }
.title-track.scrolling{ justify-content:flex-start; animation:marquee 9s linear infinite; }
#title-b{ display:none; }
.title-track.scrolling #title-b{ display:inline; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(calc(-1 * var(--shift, 0px))); } }

.gif-frame{ position:absolute; overflow:hidden; }
.cover-gif{ width:100%; height:100%; object-fit:cover; display:block; }
.seek-bar{ position:absolute; cursor:pointer; }
.volume-wrap{ position:absolute; }
.volume-bar{
    position:absolute; width:260px; height:35px; left:50%; top:50%;
    transform-origin:center; transform:translate(-50%,-50%) rotate(-90deg);
}
#player-stage input[type="range"]{ -webkit-appearance:none; appearance:none; background:transparent; }
#player-stage input[type="range"]::-webkit-slider-runnable-track{ background:white; }
#player-stage input[type="range"]::-moz-range-track{ background:white; }
#player-stage input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
    background:#2A222F; box-shadow:0 0 4px rgba(0,0,0,.6); cursor:pointer;
}
#player-stage input[type="range"]::-moz-range-thumb{
    width:16px; height:16px; border-radius:50%; border:none;
    background:#2A222F; box-shadow:0 0 4px rgba(0,0,0,.6); cursor:pointer;
}

.tracklist-panel{
    position:absolute; top:0; right:0; width:300px; height:100%; background:#FFE48B; color:#14120f;
    transform:translateX(100%); transition:transform .3s ease; z-index:20;
    overflow-y:auto; padding:16px; box-sizing:border-box;
}
.tracklist-panel.open{ transform:translateX(0); }
.tracklist-header{ font-weight:bold; letter-spacing:1px; margin-bottom:10px; }
.tracklist{ list-style:none; padding:0; margin:0; }
.tracklist li{ padding:8px 6px; cursor:pointer; border-radius:4px; }
.tracklist li:hover{ background:rgba(255,255,255,.3); }
.tracklist li.active{ background:rgba(255,255,255,.5); font-weight:bold; }

.secrets-panel{
    position:absolute; top:0; left:0; width:100%; background:rgba(10,10,8,.95);
    transform:translateY(-100%); transition:transform .3s ease; z-index:25;
    padding:16px; box-sizing:border-box; color:#FFE48B;
}
.secrets-panel.open{ transform:translateY(0); }
.secrets-header{ font-weight:bold; letter-spacing:1px; margin-bottom:10px; }
.secrets-list{ list-style:none; padding:0; margin:0; display:flex; gap:16px; flex-wrap:wrap; }
.secret-btn{ width:80px; height:80px; background-size:cover; background-position:center; border:none; cursor:pointer; border-radius:6px; }
.secret-btn.pressed{ animation:btn-flash 150ms ease-out; }
.secrets-close{
    position:absolute; top:10px; right:14px; background:transparent; border:none;
    color:#FFE48B; font-weight:bold; font-size:16px; cursor:pointer;
}

.beetle{ position:absolute; left:-60px; width:50px; height:auto; z-index:40; animation:crawl linear infinite; }
@keyframes crawl{ from{ left:-60px; } to{ left:100%; } }

/* overlay now sits inside the stage, so it scales with the player */
.overlay{ position:absolute; inset:0; background:rgba(0,0,0,.75); display:flex; align-items:center; justify-content:center; z-index:100; }
.overlay-panel{ background:#2A222F; color:#FFE48B; padding:30px; border-radius:10px; max-width:440px; text-align:center; }
.overlay-message{ white-space:pre-wrap; margin-bottom:20px; line-height:1.5; }
.overlay-close{ padding:10px 20px; cursor:pointer; background:#FFE48B; border:none; border-radius:4px; font-weight:bold; }