body{

  margin:0;
  font-family:'Press Start 2P';
  color:white;
  background-image:
    radial-gradient(
      circle at 20% 20%,
      rgba(0,255,255,0.08),
      transparent 30%
    ),

    radial-gradient(
      circle at 80% 30%,
      rgba(255,0,120,0.08),
      transparent 30%
    ),

    linear-gradient(
      to bottom,
      #050505,
      #111
    );

  background-attachment:fixed;
  overflow-x:hidden;

  /* ❌ hapus overflow:hidden */
  overflow-y:auto;
}

/* 🔥 kontrol scroll manual */
body.no-scroll{
  overflow:hidden;
}

/* ========================= */
/* 🎮 START SCREEN (NEW CLEAN VERSION) */
/* ========================= */

.start-screen{

  position:relative;

  width:100%;

  min-height:100vh;

  overflow-x:hidden;

  z-index:999;

  background:black;
}

.hero-section{

  position:relative;

  height:690px;

  overflow:hidden;
}

.hero-section::after{

  content:"";

  position:absolute;

  bottom:0;
  left:0;

  width:100%;
  height:120px;

  background:

    linear-gradient(
      to bottom,
      transparent,
      rgba(0,0,0,0.95)
    );

  z-index:3;

  pointer-events:none;
}

.start-ui{

  position:relative;

  z-index:2;
}

/* BACKGROUND IMAGE */
.start-bg{

  position:absolute;

  inset:0;

  overflow:hidden;

  background:

    radial-gradient(
      circle at 20% 20%,
      rgba(0,255,255,0.12),
      transparent 35%
    ),

    radial-gradient(
      circle at 80% 30%,
      rgba(255,0,120,0.12),
      transparent 35%
    ),

    linear-gradient(
      to bottom,
      #050505,
      #0d0d0d
    );

  z-index:0;
}

/* ========================= */
/* 🌌 PIXEL STARS */
/* ========================= */

.stars{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  pointer-events:none;

  z-index:1;
}

.layer1{
background-image:
radial-gradient(2px 2px white, transparent),
radial-gradient(2px 2px #ffe600, transparent);
background-size:120px 120px;
animation:starsMove 120s linear infinite;
opacity:.7;
}

.layer2{
background-image:
radial-gradient(2px 2px #00ffff, transparent),
radial-gradient(2px 2px #ff00ff, transparent);
background-size:200px 200px;
animation:starsMove 200s linear infinite;
opacity:.5;
}

@keyframes starsMove{
from{transform:translateY(0)}
to{transform:translateY(-1000px)}
}

/* ========================= */
/* 🎮 BUTTON POSITION */
/* ========================= */

.start-ui{

  position:absolute;
  top:540px;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  z-index:5;
}

/* ========================= */
/* 🎮 PIXEL BUTTON */
/* ========================= */

.start-btn{
font-family:'Press Start 2P';
font-size:14px;
padding:16px 28px;

background:#111;
color:#00ffff;

border:4px solid #000;

cursor:pointer;

box-shadow:
6px 6px #000,
0 0 0 4px #00ffff inset;

position:relative;

transition:0.1s;
}

.start-btn::before{
content:"";
position:absolute;
top:-4px;
left:-4px;
right:-4px;
bottom:-4px;
border:2px solid #ff00ff;
z-index:-1;
}

.start-btn:hover{
background:#00ffff;
color:black;
box-shadow:
8px 8px #000,
0 0 12px #00ffff;
}

.start-btn:active{
transform:translate(4px,4px);
box-shadow:0 0 #000;
}

/* MOBILE FIX */
@media(max-width:480px){

.start-ui{
bottom:18%;
}

.start-btn{
font-size:12px;
padding:14px 20px;
}

}

/* ========================= */
/* MAIN APP */
/* ========================= */

.app{

  position:relative;
  z-index:5;
  display:flex;
  overflow:visible;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  max-width:420px;
  margin:0 auto;
  padding:20px;
  box-sizing:border-box;
}

#battle-screen{
  display:flex;
  flex-direction:column;
  gap:14px; /* 🔥 ini penting */
}

.game-title{

  text-align:center;
  font-size:18px;
  line-height:1.1;
  white-space:nowrap;
  color:#ffe600;
  text-shadow:
    3px 3px #ff0080,
    6px 6px #000;
  filter:drop-shadow(0 0 8px #ffe600);
  margin-top:-12px;
  margin-bottom:30px;
}

.battle-area-new{
  margin-top:10px;
}

.tie-btn{
  margin-top:10px;
}

/* MENU */

.menu{

  position:relative;

  background:#1b1b1b;

  overflow:visible;

  text-align:center;

  padding:25px 18px;

  border:4px solid #00f7ff;

  box-shadow:
    0 0 25px rgba(0,255,255,0.8);

  margin:80px auto 0;

  max-width:360px;

  width:100%;

  box-sizing:border-box;
}

.menu-title{
text-align:center;
margin-bottom:20px;
}


.menu-btn span{
display:block;
font-size:9px;
}


/* ========================= */
/* ✨ CLEAN FOOTER (NO BOX) */
/* ========================= */

.start-footer{

  position:absolute;
  top:620px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  letter-spacing:2px;
  color:rgba(255,255,255,0.6);
  text-align:center;
  z-index:5;

  animation:fadeInOut 3s ease-in-out infinite;
}

/* MOBILE */
@media(max-width:480px){
.start-footer{
font-size:8px;
bottom:40px;
}
}


@keyframes fadeInOut{
0%,100%{opacity:0.5}
50%{opacity:1}
}

/* ========================= */
/* MODE NEW STYLE (BIG GIF) */
/* ========================= */

.menu-btn{

  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  padding:14px;
  margin:12px 0;
  font-size:14px;
  text-align:center;
  border:3px solid #000;
  cursor:pointer;
  background:rgba(255,255,255,0.05);
}

/* GIF BESAR */
.mode-gif{
width:90px;
height:90px;
object-fit:cover;
border-radius:10px;
border:3px solid #000;
flex-shrink:0;
box-shadow:0 0 10px rgba(0,255,255,0.4);
transition:0.3s;
}

/* TEXT */
.mode-text{
text-align:left;
}

/* TITLE BESAR */
.mode-name{
font-size:18px;
font-weight:bold;
}

/* SUBTITLE */
.mode-sub{
font-size:11px;
margin-top:6px;
opacity:0.85;
}

/* WARNA MODE */
.easy{background:#4CAF50;}
.medium{background:#ffb347;}
.hard{background:#ff5252;}

.legendary{
background:linear-gradient(90deg,#ff00ff,#00ffff);
color:black;
}

/* HOVER */
.menu-btn:hover{
transform:translateY(-3px);
box-shadow:0 6px #000;
}

/* ACTIVE */
.menu-btn:active{
transform:translate(4px,4px);
box-shadow:0 0 #000;
}


/* ========================= */
/* POPUP WARNING */
/* ========================= */

.popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
backdrop-filter:blur(4px);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
}

/* hidden */
.hidden{
display:none !important;
}

/* ========================= */
/* 🏆 RESULT SCREEN V2 */
/* ========================= */

/* HEADER */

.result-header{
  margin-bottom:20px;
}

.result-small-title{

  font-size:12px;
  color:#ffe600;

  margin-bottom:10px;

  text-shadow:
    0 0 6px #ffe600;
}

/* editable title */

.ranking-name{

  width:100%;

  background:transparent;

  border:none;

  color:white;

  font-family:'Press Start 2P';

  font-size:18px;

  outline:none;

  line-height:1.5;

  margin-bottom:10px;
}

/* ========================= */
/* 🥇 TOP 3 */
/* ========================= */

.top3-grid{

  display:grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:8px;

  margin-bottom:20px;
}

.top3-card{

  background:#1f2430;

  border-radius:18px;

  padding:10px;

  text-align:center;

  position:relative;

  overflow:hidden;
}

.top3-card img{

  width:100%;
  aspect-ratio:1/1;

  object-fit:cover;

  border-radius:12px;

  margin-bottom:10px;
}

.top3-rank{

  position:absolute;

  top:8px;
  left:8px;

  width:26px;
  height:26px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:10px;

  font-weight:bold;
}

/* gold */

.rank1{
  border:3px solid #ffd700;

  box-shadow:
    0 0 20px #ffd700;
}

.rank1 .top3-rank{
  background:#ffd700;
  color:black;
}

/* silver */

.rank2{
  border:3px solid #c0c0c0;

  box-shadow:
    0 0 16px #c0c0c0;
}

.rank2 .top3-rank{
  background:#c0c0c0;
  color:black;
}

/* bronze */

.rank3{
  border:3px solid #cd7f32;

  box-shadow:
    0 0 16px #cd7f32;
}

.rank3 .top3-rank{
  background:#cd7f32;
  color:black;
}

/* title */

.top3-title{

  font-size:9px;
  line-height:1.4;
  letter-spacing:0.5px;
}

/* ========================= */
/* 📜 RANK GRID */
/* ========================= */

.ranking-grid{

  display:grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:8px;
}

.rank-card{

  background:#1f2430;

  border-radius:14px;

  padding:8px;

  display:flex;
  gap:10px;

  align-items:center;
}

.rank-card img{

  width:55px;
  height:55px;

  border-radius:10px;

  object-fit:cover;

  flex-shrink:0;
}

.rank-info{
  flex:1;
}

.rank-number{

  color:#ffe600;

  font-size:10px;

  margin-bottom:6px;
}

.rank-song{

  font-size:9px;

  line-height:1.4;
}

/* ========================= */
/* ACTION */
/* ========================= */

.result-actions{

  display:flex;

  justify-content:center;

  gap:14px;

  margin-top:30px;

  margin-bottom:30px;
}

.result-actions button{

  flex:1;

  max-width:160px;
}

/* ========================= */
/* 🎬 REVEAL OVERLAY */
/* ========================= */

#reveal-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:black;
  display:none; /* awalnya hidden */
  justify-content:center;
  align-items:center;
  z-index:99999;
}

#timer{
  font-family:'Press Start 2P';
  font-size:60px;
  color:#00ffff;
  text-shadow:0 0 10px #00ffff;
}


/* 🎬 REVEAL ANIMATION */
@keyframes revealZoom{
  0%{
    transform: scale(1.4);
    opacity: 0;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}

/* ✨ APPLY KE COVER */
.reveal-animate{
  animation: revealZoom 0.8s ease-out;
}

/* 🌟 GLOW */
@keyframes glowPulse{
  0%{ filter: drop-shadow(0 0 5px gold); }
  50%{ filter: drop-shadow(0 0 20px gold); }
  100%{ filter: drop-shadow(0 0 5px gold); }
}


@keyframes popIn{
  0%{ transform: scale(0.8); }
  60%{ transform: scale(1.1); }
  100%{ transform: scale(1); }
}

.pop{
  animation: popIn 0.4s ease;
}

.rank1-glow{
  animation: glowPulse 1.2s infinite;
}

.reveal-title{
  font-family:'Press Start 2P';
  font-size:12px;
  text-align:center;
  text-shadow:0 0 6px #fff;

  margin-top:12px;

  line-height:1.6;

  max-width:260px;

  word-break:break-word;
}

#reveal-screen{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:black;
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:99999;
}

#reveal-content{
  display:flex;
  flex-direction:column;
  align-items:center;   /* 🔥 center horizontal */
  justify-content:center;
}

#reveal-cover{

  width:200px;
  height:200px;

  object-fit:cover;

  border-radius:12px;

  display:block;

  margin:0 auto;

  background:#111;

  padding:8px;

  box-shadow:
    0 0 10px gold,
    0 0 25px rgba(255,215,0,0.5);

  transition:
    transform .4s ease,
    filter .4s ease;
}

#reveal-title{
  text-align:center;
  max-width:220px;
}

#reveal-rank{
  font-family:'Press Start 2P';
  font-size:14px;
  color:gold;
  margin-bottom:10px;
  text-shadow:0 0 8px gold;
}


/* CLICK EFFECT */
.battle-card:active{
  transform:scale(0.96);
}


/* ========================= */
/* 🎮 HYBRID PIXEL BATTLE FIX */
/* ========================= */

.battle-area-new{
  display:flex;
  justify-content:space-between;
  align-items:flex-start; /* 🔥 naik ke atas */
  gap:10px;
}

/* CARD */
.battle-card{
  width:48%;
  min-height:260px; /* 🔥 FIX tinggi */

  background:#2b2f38;
  border-radius:16px;
  padding:12px;

  display:flex;
  flex-direction:column;

  justify-content:flex-start;
}

/* IMAGE BESAR */
.battle-card img{

  width:100%;
  height:180px;
  object-fit:cover;
  object-position:center;
  border-radius:12px;
  display:block;
  background:#111;
}

/* TITLE */
.battle-name{
  margin-top:8px;

  font-size:13px;
  line-height:1.3;

  min-height:48px; /* 🔥 kunci tinggi teks */
}

/* VS */
.vs-text{
  font-size:12px;
  color:#aaa;
  text-shadow:0 0 6px #fff;
  align-self:center; /* 🔥 ini kunci */
}

/* PROGRESS */
.progress-container{
  width:100%;
  height:18px;

  background:#2c3440;
  border-radius:10px;

  overflow:hidden;        /* 🔥 biar ga keluar */
  position:relative;      /* 🔥 penting */
}

#progress-bar{
  height:100%;
  width:0%;

  background:linear-gradient(
    90deg,
    #3b82f6,
    #60a5fa
  );

  box-shadow:0 0 8px rgba(59,130,246,0.6);
  transition:0.3s;
}

#progress-text{
  position:absolute;
  top:50%;
  left:50%;

  transform:translate(-50%, -50%); /* 🔥 CENTER PERFECT */

  font-size:11px;
  font-weight:bold;

  color:white;

  pointer-events:none;
}

/* ========================= */
/* 💎 TRUE CLEAR GLASS */
/* ========================= */

.tie-btn,
.undo-btn{

  background:rgba(255,255,255,0.03); /* 🔥 hampir transparan */

  backdrop-filter:blur(6px);

  border:1px solid rgba(255,255,255,0.2);

  border-radius:14px;

  color:white;

  position:relative;
  overflow:hidden;

  transition:0.2s;
}

.tie-btn::after,
.undo-btn::after{
  content:"";
  position:absolute;

  top:0;
  left:0;
  right:0;
  height:50%;

  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0.05),
    transparent
  );

  border-radius:inherit;

  pointer-events:none;
}

/* 🟢 TIE */
.tie-btn{
  box-shadow:0 0 8px rgba(0,255,128,0.3);
}

/* 🔴 UNDO */
.undo-btn{
  box-shadow:0 0 8px rgba(255,50,50,0.3);
}

.tie-btn:hover,
.undo-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 12px rgba(255,255,255,0.2),
    0 0 16px currentColor;
}

.tie-btn,
.undo-btn{
  font-size:14px;   /* 🔥 BESARIN */
  font-weight:600;
  letter-spacing:0.5px;
}

.tie-btn{
  color:#00ff88;
}

.undo-btn{
  color:#ff4d4d;
}


/* ========================= */
/* 🏆 RESULT SCREEN FIX */
/* ========================= */

.result-screen{

  width:100%;
  max-width:420px;

  margin:0 auto;

  padding:20px 14px 40px;

  box-sizing:border-box;

  min-height:100vh;

  background:black;

  overflow-y:auto;

  overflow-x:hidden;
}


/* ========================= */
/* ACTION BUTTON */
/* ========================= */

.glass-btn{

  flex:1;

  padding:14px 18px;

  border-radius:14px;

  border:1px solid rgba(255,255,255,0.2);

  background:rgba(255,255,255,0.05);

  backdrop-filter:blur(10px);

  color:white;

  font-family:'Press Start 2P';

  font-size:10px;

  cursor:pointer;

  transition:0.2s;

  box-shadow:
    0 0 10px rgba(0,255,255,0.15);
}

.glass-btn:hover{

  transform:translateY(-2px);

  box-shadow:
    0 0 18px rgba(0,255,255,0.35);
}

.result-header{
  width:100%;
}

.ranking-grid{
  width:100%;
}

.top3-grid{
  width:100%;
}

.result-title-row{

  width:100%;

  display:flex;
  align-items:center;

  gap:8px;
}

.ranking-name{

  flex:1;

  background:transparent;

  border:none;

  outline:none;

  color:white;

  font-family:'Press Start 2P';

  font-size:18px;

  line-height:1.6;
}

#edit-title-btn{

  width:36px;
  height:36px;

  border:none;
  border-radius:10px;

  background:#1a1a1a;

  color:white;

  cursor:pointer;

  box-shadow:
    0 0 10px rgba(255,255,255,0.15);
}

/* ========================= */
/* SCREEN SPACING FIX */
/* ========================= */

.menu,
#battle-screen{

  padding-top:80px;
}

/* ========================= */
/* 🔥 RESULT FIX FINAL */
/* ========================= */

#result-screen{

  width:100%;
}

/* ========================= */
/* ✨ SMOOTH REVEAL TRANSITION */
/* ========================= */

#reveal-screen{

  transition:
    background 1s ease;
}



.menu-back-btn{

  position:absolute;
  top:-16px;
  left:-10px;
  z-index:999999;
  padding:10px 16px;
  font-size:10px;
  font-family:'Press Start 2P';
  color:black;
  background:#00d9ff;
  border:3px solid black;
  border-radius:6px;
  cursor:pointer;
  box-shadow:
    4px 4px #000,
    0 0 14px rgba(0,255,255,0.9);
  transition:0.15s;
}

/* hover */
.menu-back-btn:hover{

  transform:translateY(-2px);
  box-shadow:
    6px 6px #000,
    0 0 18px rgba(0,255,255,1);
}

/* click */
.menu-back-btn:active{

  transform:translate(3px,3px);
  box-shadow:
    0 0 #000;
}

.battle-back-btn{

  position:fixed;

  top:12px;
  left:12px;

  z-index:999;

  padding:6px 10px;

  font-size:9px;

  font-family:'Press Start 2P';

  color:white;

  background:rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.2);

  border-radius:8px;

  box-shadow:
    0 0 6px rgba(0,200,255,0.4);

  cursor:pointer;
}


/* ========================= */
/* 🎮 TRISHA LEGENDARY POPUP */
/* ========================= */

.trisha-popup{

  position:relative;

  width:90%;
  max-width:360px;

  margin:auto;

  display:flex;
  flex-direction:column;
  align-items:center;

}

/* ========================= */
/* 🧍 TRISHA */
/* ========================= */

.trisha-img{

  width:145px;

  margin-top:18px;

  z-index:5;

  filter:
    drop-shadow(0 0 12px rgba(255,255,255,0.2));
}

/* ========================= */
/* 💬 DIALOG BOX */
/* ========================= */

.trisha-dialog{

  width:100%;

  background:#111;

  border:4px solid white;

  border-radius:18px;

  padding:24px 20px;

  backdrop-filter:blur(10px);

  box-shadow:
    0 0 25px rgba(255,0,120,0.35);

  position:relative;

  z-index:1;
}

/* ========================= */
/* 💬 PERSONA SPEECH ARROW */
/* ========================= */

.trisha-dialog::before{

  content:"";

  position:absolute;

  bottom:-22px;
  left:50%;

  transform:translateX(-50%);

  width:0;
  height:0;

  border-left:18px solid transparent;
  border-right:18px solid transparent;
  border-top:22px solid white;
}

/* inner black arrow */
.trisha-dialog::after{

  content:"";

  position:absolute;

  bottom:-16px;
  left:50%;

  transform:translateX(-50%);

  width:0;
  height:0;

  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:18px solid #111;
}
/* ========================= */
/* 🏷 NAME */
/* ========================= */

.dialog-name{

  font-size:11px;

  color:#ff77aa;

  margin-bottom:16px;

  text-shadow:
    0 0 8px #ff0080;

  letter-spacing:2px;
}

/* ========================= */
/* 📝 TEXT */
/* ========================= */

.dialog-text{

  font-size:10px;

  line-height:1.8;

  color:white;

  margin-bottom:20px;
}

/* ========================= */
/* 🔘 BUTTONS */
/* ========================= */

.dialog-buttons{

  display:flex;

  gap:10px;

  justify-content:center;

  margin-top:30px;
}

.dialog-btn{

  border:none;

  padding:10px 14px;

  font-family:'Press Start 2P';

  font-size:8px;

  cursor:pointer;

  transition:0.2s;
}

.dialog-btn:hover{

  transform:translateY(-2px);
}

.cancel{

  background:#222;

  border:2px solid #888;

  color:#ddd;
}

.confirm{

  background:
    linear-gradient(
      135deg,
      #ff3366,
      #ff0066
    );

  color:white;

  border:2px solid white;

  box-shadow:
    0 0 12px rgba(255,50,100,0.7);
}

/* ========================= */
/* ✨ FLOATING ICONS */
/* ========================= */

.floating-notes{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  pointer-events:none;

  overflow:hidden;

  z-index:3;
  padding-top:40px;
}

/* BASE */

.floating-notes span{

  position:absolute;

  display:block;

  pointer-events:none;

  will-change:transform;

  z-index:3;

  color:rgba(255,255,255,0.28);

  text-shadow:
    0 0 8px rgba(255,255,255,0.18);
}

.float1{
top:120px;
left:84%;
font-size:42px;
opacity:.42;
filter:blur(.5px);
}

.float2{
top:250px;
left:6%;
font-size:58px;
opacity:.26;
filter:blur(2px);
}

.float3{
top:300px;
left:90%;
font-size:26px;
opacity:.38;
filter:blur(0px);
}

.float4{
top:560px;
left:14%;
font-size:42px;
opacity:.30;
filter:blur(1px);
}

.float5{
top:650px;
left:82%;
font-size:46px;
opacity:.24;
filter:blur(2px);
}

.float6{
top:510px;
left:72%;
font-size:30px;
opacity:.40;
filter:blur(0px);
}

.float7{
top:170px;
left:28%;
font-size:30px;
opacity:.32;
filter:blur(1px);
}

.float8{
top:820px;
left:78%;
font-size:24px;
opacity:.34;
filter:blur(1px);
}

.float9{
top:930px;
left:18%;
font-size:34px;
opacity:.28;
filter:blur(0px);
}

.float10{
top:360px;
left:4%;
font-size:44px;
opacity:.22;
filter:blur(2px);
}

.float11{
top:420px;
left:92%;
font-size:20px;
opacity:.42;
filter:blur(0px);
}

.float12{
top:760px;
left:52%;
font-size:32px;
opacity:.30;
filter:blur(1px);
}

/* CYAN */
.float2,
.float6,
.float10{

  color:rgba(0,255,255,0.22);

  text-shadow:
    0 0 12px rgba(0,255,255,0.25);
}

/* PINK */
.float3,
.float7,
.float11{

  color:rgba(255,0,120,0.22);

  text-shadow:
    0 0 12px rgba(255,0,120,0.25);
}

/* WHITE */
.float1,
.float4,
.float5,
.float8,
.float9,
.float12{

  color:rgba(255,255,255,0.24);
}

/* ========================= */
/* 🎵 REQUEST HOUR LOGO */
/* ========================= */

.rh-logo{

  position:absolute;

  top:180px;

  left:50%;

  transform:translateX(-50%);

  width:360px;

  max-width:92%;

  z-index:5;

  opacity:0.98;

  filter:

    drop-shadow(0 0 24px rgba(255,255,255,0.15))
    drop-shadow(0 0 40px rgba(255,0,120,0.10));

  animation:
    logoFloat 5s ease-in-out infinite;
}

/* floating subtle */
@keyframes logoFloat{

  0%,100%{
    transform:
      translateX(-50%)
      translateY(0px);
  }

  50%{
    transform:
      translateX(-50%)
      translateY(-8px);
  }
}

/* ========================= */
/* 🎀 TOP NAVBAR */
/* ========================= */

.top-nav{

  position:fixed;

  top:26px;
  left:50%;

  transform:translateX(-50%);

  width:86%;

  height:62px;

  padding:0 16px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  border-radius:999px;

  background:
    rgba(0,0,0,0.38);

  backdrop-filter:blur(12px);

  border:
    1px solid rgba(0,255,255,0.18);

  box-shadow:
    0 0 18px rgba(0,255,255,0.15);

  /* outer glow */
  filter:
    drop-shadow(0 0 12px rgba(0,255,255,0.18));

  /* smooth transition */
  transition:
    background .3s ease,
    box-shadow .3s ease,
    transform .3s ease;

  z-index:99999;
}

/* LOGO */

.nav-logo{

  width:64px;

  opacity:1;

  image-rendering:auto;

  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.2));
}

/* BURGER */

.burger-btn{

  position:relative;

  width:48px;
  height:48px;

  border:none;

  border-radius:50%;

  background:
    rgba(0,255,255,0.06);

  border:
    1px solid rgba(0,255,255,0.16);

  cursor:pointer;

  transition:.3s;

  box-shadow:
    0 0 12px rgba(0,255,255,0.15);
}

/* garis */

.burger-btn span{

  position:absolute;

  left:50%;

  width:18px;
  height:2px;

  background:#ccffff;

  border-radius:999px;

  transition:.3s;

  transform:
    translateX(-50%);
}

.burger-btn span:nth-child(1){

  top:16px;
}

.burger-btn span:nth-child(2){

  top:23px;
}

.burger-btn span:nth-child(3){

  top:30px;
}

/* ACTIVE */

.burger-btn.active span:nth-child(1){

  top:23px;

  transform:
    translateX(-50%)
    rotate(45deg);
}

.burger-btn.active span:nth-child(2){

  opacity:0;
}

.burger-btn.active span:nth-child(3){

  top:23px;

  transform:
    translateX(-50%)
    rotate(-45deg);
}

/* hover */

.burger-btn:hover{

  box-shadow:
    0 0 18px rgba(0,255,255,0.3);
}

/* ========================= */
/* 📋 SIDE MENU */
/* ========================= */

.side-menu{

  position:fixed;

  top:96px;
  left:50%;

  transform:
    translateX(-50%)
    translateY(-14px)
    scale(.96);

  width:78%;

  background:
    rgba(0,0,0,0.72);

  backdrop-filter:blur(14px);

  border-radius:26px;

  padding:18px;

  z-index:20;

  display:flex;
  flex-direction:column;

  gap:10px;

  border:
    1px solid rgba(0,255,255,0.18);

  box-shadow:
    0 0 22px rgba(0,255,255,0.12);

  opacity:0;

  pointer-events:none;

  overflow:hidden;

  transition:
    opacity .35s ease,
    transform .35s cubic-bezier(.22,1,.36,1),
    backdrop-filter .35s ease,
    box-shadow .35s ease;
}

.side-menu.show{

  opacity:1;

  pointer-events:auto;

  transform:
    translateX(-50%)
    translateY(0px)
    scale(1);

  backdrop-filter:blur(18px);

  box-shadow:
    0 0 30px rgba(0,255,255,0.22),
    0 0 60px rgba(0,255,255,0.08);
}

/* button */

.side-menu button{

  background:none;

  border:none;

  color:#ffffff;

  text-align:left;

  font-family:'Press Start 2P';

  font-size:11px;

  letter-spacing:1px;

  padding:18px 8px;

  border-bottom:
    1px solid rgba(255,255,255,0.08);

  cursor:pointer;

  transition:0.2s;
}

.side-menu button:hover{

  color:#00ffff;

  padding-left:14px;

  text-shadow:
    0 0 10px rgba(0,255,255,0.8);
}

/* ========================= */
/* 📖 ABOUT SECTION */
/* ========================= */

.about-box{

  margin-top:40px;

  width:88%;

  margin-left:auto;
  margin-right:auto;

  padding:34px 24px;

  border-radius:26px;

  background:
    linear-gradient(
      to bottom,
      rgba(8,8,8,0.96),
      rgba(15,15,15,0.98)
    );

  border:
    1px solid rgba(0,255,255,0.12);

  box-shadow:
    0 0 18px rgba(0,255,255,0.08);

  box-sizing:border-box;

  overflow:hidden;

  text-align:center;

  
}

/* TITLE */

.about-title{

  font-size:20px;

  color:#00ffff;

  margin-bottom:26px;

  text-shadow:
    0 0 10px rgba(0,255,255,0.7);
}

/* TEXT */

.about-text{

  font-size:10px;

  line-height:2.2;

  color:rgba(255,255,255,0.88);

  text-align:center;
}

/* ========================= */
/* 📊 ABOUT STATS */
/* ========================= */

.about-stats-box{

  margin-top:26px;

  width:88%;

  margin-left:auto;
  margin-right:auto;

  padding:30px 22px;

  border-radius:26px;

  background:
    linear-gradient(
      to bottom,
      rgba(8,8,8,0.96),
      rgba(15,15,15,0.98)
    );

  border:
    1px solid rgba(0,255,255,0.12);

  box-shadow:
    0 0 18px rgba(0,255,255,0.08);

  text-align:center;

  box-sizing:border-box;

  overflow:hidden;

  position:relative;
  z-index:3;
}

/* ITEM */

.about-stat{

  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ANGKA */

.about-number{

  font-size:36px;

  line-height:1;

  color:white;

  text-shadow:
    0 0 10px rgba(255,255,255,0.12);
}

/* LABEL */

.about-label{

  margin-top:10px;

  font-size:10px;

  color:#b8ffff;

  letter-spacing:1px;

  opacity:0.8;
}

/* GARIS */

.about-divider{

  width:68%;

  height:1px;

  margin:24px auto;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(0,255,255,0.15),
      transparent
    );
}
/* DESKRIPSI */

.about-desc{

  margin-top:24px;

  font-size:9px;

  line-height:2.1;

  color:rgba(255,255,255,0.82);

  text-align:center;

  padding:0 4px;
}

/* MOBILE */

@media(max-width:480px){

  .about-stats-box{

    padding:28px 20px;
  }

  .about-number{

    font-size:32px;
  }

  .about-desc{

    font-size:9px;

    line-height:2;
  }

}

/* ========================= */
/* ⏳ COUNTDOWN TITLE */
/* ========================= */

.countdown-title{

  position:absolute;

  top:392px;

  left:50%;

  transform:translateX(-50%);

  font-size:8px;

  letter-spacing:2px;

  color:
    rgba(255,255,255,0.72);

  text-shadow:
    0 0 8px rgba(255,255,255,0.12);

  z-index:3;

  white-space:nowrap;
}

/* ========================= */
/* ⏳ COUNTDOWN */
/* ========================= */

.countdown-box{

  position:absolute;

  top:430px;

  left:50%;

  transform:translateX(-50%);

  display:flex;

  gap:10px;

  z-index:3;
}

/* CARD */

.count-item{

  width:64px;

  padding:14px 6px;

  border-radius:16px;

  text-align:center;

  background:
    rgba(255,255,255,0.04);

  backdrop-filter:blur(10px);

  border:
    1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 0 14px rgba(0,255,255,0.08);
}

/* NUMBER */

.count-item span{

  display:block;

  font-size:18px;

  color:white;

  margin-bottom:8px;

  text-shadow:
    0 0 8px rgba(255,255,255,0.3);
}

/* LABEL */

.count-item small{

  font-size:7px;

  color:
    rgba(255,255,255,0.65);

  letter-spacing:1px;
}

/* ========================= */
/* ✨ FLOAT ANIMATIONS */
/* ========================= */

.float1{animation:floatA 5s ease-in-out infinite;}
.float2{animation:floatB 7s ease-in-out infinite;}
.float3{animation:floatC 6s ease-in-out infinite;}
.float4{animation:floatD 8s ease-in-out infinite;}
.float5{animation:floatA 9s ease-in-out infinite;}
.float6{animation:floatB 6s ease-in-out infinite;}
.float7{animation:floatC 10s ease-in-out infinite;}
.float8{animation:floatD 7s ease-in-out infinite;}
.float9{animation:floatA 5s ease-in-out infinite;}
.float10{animation:floatB 11s ease-in-out infinite;}
.float11{animation:floatC 8s ease-in-out infinite;}
.float12{animation:floatD 9s ease-in-out infinite;}

/* ========================= */
/* ✨ FLOAT ANIMATION */
/* ========================= */

@keyframes floatA{

  0%,100%{
    transform:
      translateY(0px)
      translateX(0px)
      rotate(0deg);
  }

  50%{
    transform:
      translateY(-12px)
      translateX(4px)
      rotate(4deg);
  }
}

@keyframes floatB{

  0%,100%{
    transform:
      translateY(0px)
      translateX(0px)
      rotate(0deg);
  }

  50%{
    transform:
      translateY(10px)
      translateX(-6px)
      rotate(-5deg);
  }
}

@keyframes floatC{

  0%,100%{
    transform:
      translateY(0px)
      scale(1);
  }

  50%{
    transform:
      translateY(-8px)
      scale(1.08);
  }
}

@keyframes floatD{

  0%,100%{
    transform:
      translateY(0px)
      rotate(0deg);
  }

  50%{
    transform:
      translateY(14px)
      rotate(8deg);
  }
}


/* ========================= */
/* 🎵 SONG PREVIEW */
/* ========================= */

.preview-section{

  position:relative;

  overflow:visible;

  isolation:isolate;

  margin-top:-1px;

  padding-top:1px;

  padding:90px 0 120px;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0),
      rgba(0,0,0,.15)
    );
}

/* ========================= */
/* 🌌 SOFT TOP BLEND */
/* ========================= */



/* TITLE */

.preview-title{

  text-align:center;

  font-size:30px;

  color:#fff;

  text-shadow:
    0 0 14px #00ffff;

  margin-bottom:16px;
}

.preview-sub{

  text-align:center;

  font-size:10px;

  line-height:1.8;

  opacity:.7;

  width:80%;

  margin:
    0 auto 40px;
}

/* ========================= */
/* 🎵 CAROUSEL */
/* ========================= */

.music-carousel{

  position:relative;

  width:100%;

  height:320px;

  display:flex;

  justify-content:center;
  align-items:center;
}

/* CARD */

.carousel-card{

  position:absolute;

  overflow:hidden;

  transition:.45s cubic-bezier(.22,1,.36,1);
}

/* CENTER */

.carousel-card.active{

  z-index:5;

  transform:
    scale(1);

  width:210px;
}

/* SIDE */

.carousel-card.side{

  width:140px;

  opacity:.45;

  filter:blur(1px);
}

.carousel-card.left{

  transform:
    translateX(-120px)
    scale(.82)
    rotate(-8deg);
}

.carousel-card.right{

  transform:
    translateX(120px)
    scale(.82)
    rotate(8deg);
}

/* COVER */

.carousel-card img{

  width:100%;

  aspect-ratio:1/1;

  object-fit:cover;

  object-position:center;

  border-radius:22px;

  box-shadow:
    0 0 25px rgba(255,255,255,.08);

  display:block;
}

/* META */

.song-meta{

  text-align:center;

  margin-top:16px;
}

.song-meta h3{

  font-size:14px;

  line-height:1.45;

  letter-spacing:1px;

  margin-top:14px;

  margin-bottom:10px;

  padding:0 12px;

  min-height:42px;

  text-align:center;

  overflow:hidden;

  display:-webkit-box;

  -webkit-line-clamp:2;

  -webkit-box-orient:vertical;
}

.song-meta p{

  font-size:10px;

  opacity:.7;
}

/* ========================= */
/* PLAYER */
/* ========================= */

.preview-player{

  display:flex;

  justify-content:center;

  gap:16px;

  margin-top:24px;
}

.preview-player button{

  width:52px;
  height:52px;

  border:none;

  border-radius:50%;

  background:
    rgba(255,255,255,.06);

  color:white;

  font-size:18px;

  cursor:pointer;

  backdrop-filter:blur(10px);

  box-shadow:
    0 0 12px rgba(0,255,255,.15);

  transition:.25s;
}

.preview-player button:hover{

  transform:scale(1.08);

  box-shadow:
    0 0 18px rgba(0,255,255,.3);
}


/* DYNAMIC GLOW */

.preview-bg{

  position:absolute;

  inset:-20%;

  z-index:-2;

  opacity:.22;

  filter:blur(120px);

  transition:1s ease;

  pointer-events:none;

  will-change:transform;

  background:
    radial-gradient(
      circle at center,
      rgba(0,255,255,.12) 0%,
      rgba(255,0,120,.10) 35%,
      rgba(0,0,0,0) 75%
    );
}

@keyframes bgPulse{

  0%{
    transform:scale(1);
    opacity:.35;
  }

  50%{
    transform:scale(1.15);
    opacity:.55;
  }

  100%{
    transform:scale(1);
    opacity:.35;
  }
}

/* ========================= */
/* 💿 PLAYING EFFECT */
/* ========================= */

.carousel-card.active.playing img{

  animation:
    cardFloat 4s ease-in-out infinite;
}

@keyframes cardFloat{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-8px);
  }
}

.music-carousel{

  touch-action:pan-y;
}

/* ========================= */
/* 🎵 MUSIC PROGRESS */
/* ========================= */

.music-progress{

  width:72%;

  margin:
    26px auto 0;
}

/* LINE */

.progress-line{

  width:100%;
  height:6px;

  border-radius:999px;

  background:
    rgba(255,255,255,.08);

  overflow:hidden;

  position:relative;
}

/* BAR */

#music-progress-bar{

  width:0%;

  height:100%;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #00ffff,
      #00aaff
    );

  box-shadow:
    0 0 12px rgba(0,255,255,.45);

  transition:.1s linear;
}

/* TIME */

.music-time{

  margin-top:10px;

  display:flex;

  justify-content:space-between;

  font-size:9px;

  opacity:.7;
}

/* ========================= */
/* 🌈 DYNAMIC COVER BG */
/* ========================= */

.bg-cover{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  opacity:.18;

  filter:
    blur(70px)
    brightness(.9)
    saturate(1.5);

  transform:scale(1.4);

  z-index:-3;

  pointer-events:none;

  transition:
    opacity 1s ease,
    transform 1s ease,
    filter 1s ease;

  transform:
    translateZ(0) 
    scale(1.4);

  backface-visibility:hidden;

}

@keyframes bgZoom{

  0%{
    transform:scale(1.35);
  }

  50%{
    transform:scale(1.5);
  }

  100%{
    transform:scale(1.35);
  }
}


/* ========================= */
/* 🔎 SEARCH SONG */
/* ========================= */

.preview-search{

  width:82%;

  margin:
    0 auto 30px;

  position:relative;
  z-index:100;
}

#song-search{

  width:100%;

  padding:16px 18px;

  border:none;

  border-radius:18px;

  outline:none;

  background:
    rgba(255,255,255,.06);

  backdrop-filter:blur(10px);

  color:white;

  font-family:'Press Start 2P';

  font-size:10px;

  box-sizing:border-box;

  border:
    1px solid rgba(0,255,255,.16);

  box-shadow:
    0 0 16px rgba(0,255,255,.08);
}

#song-search::placeholder{

  color:
    rgba(255,255,255,.45);
}

/* ========================= */
/* 🔊 GLASS VOLUME */
/* ========================= */

.volume-control{

  width:72%;

  margin:
    18px auto 0;

  padding:
    12px 16px;

  display:flex;

  align-items:center;

  gap:14px;

  border-radius:18px;

  background:
    rgba(255,255,255,.04);

  backdrop-filter:blur(12px);

  border:
    1px solid rgba(0,255,255,.12);

  box-shadow:
    0 0 18px rgba(0,255,255,.08);
}

/* ICON */

.volume-control span{

  font-size:15px;

  opacity:.85;

  filter:
    drop-shadow(
      0 0 6px rgba(0,255,255,.45)
    );
}

/* SLIDER */

#volume-slider{

  -webkit-appearance:none;

  appearance:none;

  flex:1;

  height:5px;

  border-radius:999px;

  outline:none;

  cursor:pointer;

  background:
    linear-gradient(
      90deg,
      #00ffff,
      rgba(255,255,255,.12)
    );
}

/* THUMB */

#volume-slider::-webkit-slider-thumb{

  -webkit-appearance:none;

  appearance:none;

  width:18px;
  height:18px;

  border-radius:50%;

  background:#00ffff;

  border:none;

  box-shadow:
    0 0 14px rgba(0,255,255,.9);

  transition:.2s;
}

#volume-slider::-webkit-slider-thumb:hover{

  transform:scale(1.12);
}

/* FIREFOX */

#volume-slider::-moz-range-thumb{

  width:18px;
  height:18px;

  border:none;

  border-radius:50%;

  background:#00ffff;

  box-shadow:
    0 0 14px rgba(0,255,255,.9);
}


/* ========================= */
/* 🔎 SEARCH RESULT */
/* ========================= */

.search-results{

  position:absolute;

  top:62px;

  left:0;

  width:100%;

  display:flex;

  flex-direction:column;

  gap:8px;

  max-height:180px;

  overflow-y:auto;

  z-index:999;
}

/* ITEM */

.search-item{

  padding:10px 12px;

  border-radius:16px;

  background:
    rgba(15,15,15,.92);

  backdrop-filter:blur(16px);

  border:
    1px solid rgba(0,255,255,.10);

  cursor:pointer;

  transition:.22s;

  box-shadow:
    0 6px 24px rgba(0,0,0,.45);

  animation:
    fadeSearch .2s ease;
}

@keyframes fadeSearch{

  from{

    opacity:0;

    transform:
      translateY(-6px)
      scale(.98);
  }

  to{

    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }
}

/* HOVER */

.search-item:hover{

  transform:
    scale(1.02);

  background:
    rgba(0,255,255,.08);

  box-shadow:
    0 0 18px rgba(0,255,255,.14);
}

/* SONG */

.search-song{

  display:flex;

  align-items:center;

  gap:14px;
}

/* COVER */

.search-cover{

  width:44px;
  height:44px;

  border-radius:10px;

  object-fit:cover;

  flex-shrink:0;
}

/* META */

.search-meta h4{

  font-size:9px;

  line-height:1.4;

  margin-bottom:4px;

  color:white;
}

.search-meta p{

  font-size:7px;

  opacity:.5;

  text-transform:uppercase;

  letter-spacing:1px;
}

/* SCROLL */

.search-results::-webkit-scrollbar{

  width:4px;
}

.search-results::-webkit-scrollbar-thumb{

  background:
    rgba(0,255,255,.25);

  border-radius:999px;
}

/* ========================= */
/* 🌊 FIX ABOUT → PREVIEW SEAM */
/* ========================= */

.about-stats-box{
  margin-bottom:-90px;
  position:relative;
  z-index:4;
}

.about-stats-box::after{
  content:"";
  position:absolute;

  left:-10%;
  right:-10%;
  bottom:-120px;

  height:160px;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0),
      rgba(4,14,8,0.88),
      rgba(8,18,10,1)
    );

  z-index:-1;
  pointer-events:none;
}

.preview-section{
  margin-top:0;
  padding-top:170px;

  background:
    linear-gradient(
      to bottom,
      rgba(8,18,10,1) 0%,
      rgba(12,20,9,0.98) 35%,
      rgba(28,23,5,0.96) 70%,
      rgba(0,0,0,1) 100%
    );
}

.preview-fade{
  display:none;
}

/* ========================= */
/* 🎬 CINEMATIC RH REVEAL */
/* ========================= */

/* rank besar */

#reveal-rank{

  font-size:42px;

  letter-spacing:4px;

  opacity:0;

  transform:scale(.8);

  transition:
    opacity .8s ease,
    transform .8s ease;
}

/* cover */

#reveal-cover{

  opacity:0;

  transform:
    scale(.92);

  transition:
    opacity 1s ease,
    transform 1s ease;
}

/* title */

#reveal-title{

  opacity:0;

  transform:
    translateY(10px);

  transition:
    opacity .8s ease,
    transform .8s ease;
}

/* smooth fade */

#reveal-content{

  transition:
    opacity .8s ease;
}

/* ========================= */
/* 🎬 RH CINEMATIC REVEAL */
/* ========================= */

/* RANK IMPACT */

@keyframes rankImpact{

  0%{
    opacity:0;
    transform:
      scale(2.2);
    filter:blur(12px);
  }

  60%{
    opacity:1;
    transform:
      scale(.85);
    filter:blur(0);
  }

  100%{
    opacity:1;
    transform:
      scale(1);
  }
}

.rank-impact{

  animation:
    rankImpact .8s
    cubic-bezier(.22,1,.36,1)
    forwards;
}

/* COVER CINEMATIC */

@keyframes coverReveal{

  0%{
    opacity:0;

    transform:
      scale(1.5);

    filter:
      blur(16px)
      brightness(2);
  }

  60%{

    opacity:1;

    transform:
      scale(.94);

    filter:
      blur(0)
      brightness(1.1);
  }

  100%{

    opacity:1;

    transform:
      scale(1);
  }
}

.cover-reveal{

  animation:
    coverReveal 1.2s
    cubic-bezier(.22,1,.36,1)
    forwards;
}

/* TITLE SLIDE */

@keyframes titleReveal{

  0%{
    opacity:0;

    transform:
      translateY(30px);

    letter-spacing:8px;
  }

  100%{
    opacity:1;

    transform:
      translateY(0);

    letter-spacing:1px;
  }
}

.title-reveal{

  animation:
    titleReveal .9s ease forwards;
}

/* SCREEN SHAKE */

@keyframes revealShake{

  0%{transform:translateX(0)}
  20%{transform:translateX(-4px)}
  40%{transform:translateX(4px)}
  60%{transform:translateX(-2px)}
  80%{transform:translateX(2px)}
  100%{transform:translateX(0)}
}

.reveal-shake{

  animation:
    revealShake .4s ease;
}

/* ========================= */
/* 🎀 DAILY PICKS MAIN CARD FIX */
/* ========================= */

.daily-picks-card{
  width:86%;
  max-width:390px;
  margin:0 auto;
  padding:26px 16px 32px;
  border-radius:32px;

  background:
    linear-gradient(
      145deg,
      rgba(8,14,28,.96),
      rgba(18,8,28,.94)
    );

  border:1px solid rgba(0,255,255,.16);

  box-shadow:
    0 0 32px rgba(0,255,255,.10);

  box-sizing:border-box;
}

.daily-picks-small{
  font-size:15px;
  color:white;
  text-shadow:0 0 12px #00ffff;
  margin-bottom:8px;
}

.daily-picks-title{
  font-size:9px;
  color:#ff77aa;
  letter-spacing:1px;
  margin-bottom:18px;
  text-shadow:none;
}

.daily-speech-row{
  margin-bottom:28px;
}

.daily-coverflow{
  margin-top:10px;
}

/* ========================= */
/* 🎀 TRISHA DAILY PICKS CARD */
/* ========================= */

.daily-picks-section{
  position:relative;
  padding:120px 0 120px;
  overflow:hidden;
  background:linear-gradient(to bottom,#000,#100018,#000);
}

.daily-picks-card{
  position:relative;
  width:86%;
  max-width:390px;
  margin:0 auto;
  padding:26px 16px 32px;
  border-radius:32px;
  background:linear-gradient(145deg,rgba(8,14,28,.96),rgba(18,8,28,.94));
  border:1px solid rgba(0,255,255,.16);
  box-shadow:0 0 32px rgba(0,255,255,.12);
  box-sizing:border-box;
  overflow:hidden;
}

.daily-picks-header{
  text-align:center;
  margin-bottom:24px;
}

.daily-picks-small{
  font-size:15px;
  color:white;
  text-shadow:0 0 12px #00ffff;
  margin-bottom:8px;
}

.daily-picks-title{
  font-size:9px;
  color:#ff77aa;
  letter-spacing:1px;
  margin-bottom:18px;
}

.daily-speech-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}

.daily-picks-trisha{
  width:72px;
  height:auto;
  flex-shrink:0;
  margin:0;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.25));
}

.daily-picks-dialog{
  flex:1;
  padding:13px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  font-size:9px;
  line-height:1.8;
  text-align:left;
  color:white;
}

/* ========================= */
/* 🎧 COVERFLOW */
/* ========================= */

.daily-coverflow{
  position:relative;
  width:100%;
  height:250px;
  margin:10px auto 20px;
  overflow:hidden;
  perspective:900px;
}

.coverflow-track{
  position:relative;
  width:100%;
  height:100%;
}

.coverflow-card{
  position:absolute;
  top:28px;
  left:50%;
  width:160px;
  height:160px;
  border-radius:28px;
  overflow:hidden;
  background:#111;
  box-shadow:0 0 28px rgba(0,255,255,.16);
  transition:transform .65s cubic-bezier(.22,1,.36,1), opacity .65s ease, filter .65s ease;
}

.coverflow-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.coverflow-card.active{
  z-index:5;
  opacity:1;
  filter:blur(0) brightness(1);
  transform:translateX(-50%) scale(1);
}

.coverflow-card.left{
  z-index:3;
  opacity:.55;
  filter:blur(1px) brightness(.75);
  transform:translateX(-135%) translateY(28px) scale(.72) rotateY(26deg) rotateZ(-7deg);
}

.coverflow-card.right{
  z-index:3;
  opacity:.55;
  filter:blur(1px) brightness(.75);
  transform:translateX(35%) translateY(28px) scale(.72) rotateY(-26deg) rotateZ(7deg);
}

.coverflow-card.hidden-card{
  z-index:1;
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) scale(.5);
}

.coverflow-info{
  text-align:center;
}

.coverflow-title{
  font-size:16px;
  line-height:1.5;
  color:white;
  text-shadow:0 0 12px #00ffff;
  margin-bottom:8px;
}

.coverflow-setlist{
  font-size:9px;
  color:#b8ffff;
  margin-bottom:18px;
  letter-spacing:1px;
}

.coverflow-play{
  font-family:'Press Start 2P';
  font-size:9px;
  padding:14px 18px;
  border:none;
  border-radius:999px;
  color:black;
  background:linear-gradient(90deg,#00ffff,#ff77aa);
  cursor:pointer;
  box-shadow:0 0 20px rgba(0,255,255,.25);
}

.coverflow-dots{

  display:flex;

  justify-content:center;

  gap:8px;

  margin-top:-8px;

  margin-bottom:18px;
}

.coverflow-dot{

  width:8px;
  height:8px;

  border-radius:50%;

  background:
    rgba(255,255,255,.25);

  transition:.3s;
}

.coverflow-dot.active{

  background:#00ffff;

  box-shadow:
    0 0 10px #00ffff;

  transform:
    scale(1.2);
}

.daily-trisha-comment{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0 22px;
}

.daily-trisha-comment .daily-picks-trisha{
  width:92px;
}

.daily-trisha-comment .daily-picks-dialog{
  flex:1;
  font-size:9px;
  line-height:1.8;
}

.daily-coverflow{
  overflow:visible;
}

.daily-picks-card{
  overflow:visible;
}

.coverflow-card.active{
  transform:
    translateX(-50%)
    translateY(-8px)
    scale(1.12)
    rotateY(0);

  box-shadow:
    0 0 35px rgba(0,255,255,.28),
    0 20px 40px rgba(0,0,0,.45);
}

.coverflow-card.left{
  opacity:.65;
  transform:
    translateX(-145%)
    translateY(38px)
    scale(.76)
    rotateY(34deg)
    rotateZ(-8deg);
}

.coverflow-card.right{
  opacity:.65;
  transform:
    translateX(45%)
    translateY(38px)
    scale(.76)
    rotateY(-34deg)
    rotateZ(8deg);
}

.coverflow-card{
  width:150px;
  height:190px;
  border-radius:24px;
}

.coverflow-card.active{
  width:170px;
  height:215px;

  transform:
    translateX(-50%)
    translateY(-10px)
    scale(1.05);
}

.coverflow-card.left{
  opacity:.72;

  transform:
    translateX(-145%)
    translateY(30px)
    scale(.82)
    rotateY(30deg)
    rotateZ(-5deg);
}

.coverflow-card.right{
  opacity:.72;

  transform:
    translateX(45%)
    translateY(30px)
    scale(.82)
    rotateY(-30deg)
    rotateZ(5deg);
}

.coverflow-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ========================= */
/* 👑 RANK 1 GRAND REVEAL FIX */
/* ========================= */

#reveal-screen.rank-one-mode{
  background:
    radial-gradient(
      circle at center,
      #fff3a0 0%,
      #b46b00 35%,
      #1a0800 100%
    ) !important;
}

#reveal-screen.rank-one-mode::before{
  content:"👑 YOUR #1 SONG 👑";
  position:absolute;
  top:70px;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  text-align:center;
  font-family:'Press Start 2P';
  font-size:12px;
  color:#fff;
  text-shadow:
    0 0 8px #000,
    0 0 18px gold;
}

#reveal-screen.rank-one-mode #reveal-rank{
  color:white;
  text-shadow:
    4px 4px #000,
    0 0 18px gold,
    0 0 34px #ff9900;
}

#reveal-screen.rank-one-mode #reveal-cover{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;

  border:5px solid #fff;
  box-shadow:
    0 0 0 5px #000,
    0 0 26px gold,
    0 0 60px #ff9900;
}

#reveal-screen.rank-one-mode #reveal-title{
  color:white;
  text-shadow:
    3px 3px #000,
    0 0 14px gold;
}

.battle-card{
  position:relative;
}

.battle-preview-btn{
  position:absolute;
  top:14px;
  right:14px;

  width:34px;
  height:34px;

  border:none;
  border-radius:50%;

  background:rgba(0,0,0,.65);
  color:#00ffff;

  font-family:'Press Start 2P';
  font-size:12px;

  cursor:pointer;

  box-shadow:
    0 0 10px rgba(0,255,255,.45);
}

.battle-preview-btn.playing{
  background:#00ffff;
  color:black;
}

.battle-counter{
  text-align:center;
  margin:10px 0 8px;

  font-size:10px;
  color:#00ffff;

  text-shadow:
    0 0 10px #00ffff;
}

/* ========================= */
/* 🎀 TRISHA CHECKPOINT POPUP */
/* ========================= */

.milestone-popup{
  position:fixed;
  inset:0;
  z-index:999999;

  display:flex;
  justify-content:center;
  align-items:center;

  background:rgba(0,0,0,.65);
  backdrop-filter:blur(8px);
}

.milestone-card{
  width:82%;
  max-width:340px;

  padding:24px 18px 26px;
  border-radius:30px;

  background:
    linear-gradient(
      145deg,
      rgba(10,20,40,.96),
      rgba(25,8,35,.96)
    );

  border:1px solid rgba(0,255,255,.25);

  box-shadow:
    0 0 30px rgba(0,255,255,.22),
    0 0 60px rgba(255,0,120,.12);

  text-align:center;

  animation:milestonePop .45s cubic-bezier(.22,1,.36,1);
}

@keyframes milestonePop{
  from{
    opacity:0;
    transform:scale(.82) translateY(20px);
  }

  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

.milestone-label{
  font-size:9px;
  color:#ff77aa;
  letter-spacing:1px;
  margin-bottom:14px;
}

.milestone-trisha{
  width:110px;
  margin-bottom:14px;

  filter:
    drop-shadow(0 0 16px rgba(255,255,255,.25))
    drop-shadow(0 0 22px rgba(255,0,120,.18));
}

.milestone-title{
  font-size:16px;
  line-height:1.5;
  color:white;

  text-shadow:
    0 0 12px #00ffff;

  margin-bottom:14px;
}

.milestone-text{
  font-size:10px;
  line-height:1.9;
  color:rgba(255,255,255,.88);
}

.milestone-close{
  margin-top:18px;
  padding:12px 18px;

  font-family:'Press Start 2P';
  font-size:9px;

  border:none;
  border-radius:999px;

  color:black;
  background:linear-gradient(90deg,#00ffff,#ff77aa);

  cursor:pointer;

  box-shadow:
    0 0 16px rgba(0,255,255,.35);
}

#skip-countdown-btn,
#skip-song-btn{
  position:fixed;
  left:50%;
  bottom:38px;

  transform:translateX(-50%);

  z-index:100000;

  padding:12px 18px;

  font-family:'Press Start 2P';
  font-size:9px;

  background:#ff5252;
  color:white;

  border:3px solid #000;

  cursor:pointer;

  box-shadow:
    4px 4px #000,
    0 0 14px rgba(255,80,80,.75);
}

#skip-song-btn{
  display:none;
}

#skip-countdown-btn{
  display:block;
}

.result-screen{
  max-width:430px;
  width:100%;
  margin:0 auto;
  padding-left:14px;
  padding-right:14px;
  box-sizing:border-box;
}

.result-header,
.top3-grid,
.ranking-grid,
.result-actions{
  max-width:100%;
  box-sizing:border-box;
}

.result-screen{
  opacity:1;
  transition:opacity .6s ease;
}

.result-screen.result-enter{
  opacity:0;
}

#reveal-overlay{
  flex-direction:column;
  gap:22px;
}

.countdown-label{
  font-family:'Press Start 2P';
  font-size:11px;
  color:#ffe600;
  text-shadow:
    0 0 10px #ffe600,
    0 0 20px #ff0080;

  animation:countdownPulse 1.2s infinite;
}

.countdown-sub{
  font-family:'Press Start 2P';
  font-size:8px;
  color:rgba(255,255,255,.65);
  letter-spacing:1px;
}

@keyframes countdownPulse{
  0%,100%{
    opacity:.55;
    transform:scale(.96);
  }

  50%{
    opacity:1;
    transform:scale(1.04);
  }
}

/* ========================= */
/* 🐑 MAIN FOOTER */
/* ========================= */

.main-footer{
  padding:24px 20px;
  text-align:center;
  background:#050505;
  border-top:1px solid rgba(0,255,255,.12);
}

.footer-title{
  font-size:12px;
  color:#00ffff;
  text-shadow:0 0 10px #00ffff;
  margin-bottom:10px;
}

.footer-text{
  font-size:8px;
  line-height:1.8;
  color:rgba(255,255,255,.65);
  margin-bottom:8px;
}

.footer-credit{
  font-size:8px;
  color:#ff77aa;
}

html,
body,
.start-screen{
  background:#000;
}

.daily-picks-section{
  padding-bottom:40px !important;
}

.battle-preview-btn{
  width:44px;
  height:44px;

  top:8px;
  right:8px;

  z-index:20;

  touch-action:manipulation;
}

.battle-preview-btn::before{
  content:"";
  position:absolute;
  inset:-10px;
}