/* ================= GLOBAL ================= */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Cinzel', serif;
}

:root{
--gold-main:#caa85a;
--gold-soft:#e6c97a;
--gold-dark:#8a6a2f;
}

/* 🔥 FIX PANEL AUTO MUNCUL */
.hidden{
display:none !important;
}

/* ================= BODY ================= */
body{
margin:0;
background:#000;
color:white;
overflow:hidden;
}

/* ================= HERO ================= */
.hero{
height:100vh;
width:100%;
background:url('../img/bg-mlbb.jpg') no-repeat center center;
background-size:cover;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;

position:relative;
overflow:hidden;
}

/* OVERLAY */
.overlay{
position:absolute;
inset:0;
background:linear-gradient(to bottom,rgba(0,0,0,0.3),rgba(0,0,0,0.65));
z-index:1;
pointer-events:none;
}

.hero *{
position:relative;
z-index:2;
}

/* ================= LOGO ================= */
.logo{
width:420px;
margin-bottom:10px;
}

/* ================= SUBTITLE ================= */
/* ================= TITLE 3D PRO ================= */
.title-3d{
position:relative;

font-size:22px;
font-weight:bold;
letter-spacing:2px;
text-align:center;
margin-top:10px;     /* jarak dari logo */
margin-bottom:35px;  /* jarak ke tombol */

line-height:1.4;

/* 🔥 GOLD FIX (SESUAI REQUEST) */
color:#E6C97A;

/* 🔥 3D DEPTH */
text-shadow:
0 1px 0 #caa85a,
0 2px 0 #b8964a,
0 3px 0 #a3843f,
0 4px 8px rgba(0,0,0,0.7);

/* 🔥 GLOW */
filter:drop-shadow(0 0 6px rgba(230,201,122,0.6));

transition:0.3s ease;
}

/* ================= SHINE TEXT ================= */
.title-3d::after{
content:"";
position:absolute;
top:50%;
left:50%;

width:60%;
height:40%;

transform:translate(-50%,-50%);

background:radial-gradient(
ellipse at center,
rgba(255,255,255,0.5),
transparent 70%
);

opacity:0.4;

animation:shinePulse 3s ease-in-out infinite;
pointer-events:none;
}

@keyframes shinePulse{
0%{opacity:0.2; transform:translate(-50%,-50%) scale(0.9);}
50%{opacity:0.5; transform:translate(-50%,-50%) scale(1.05);}
100%{opacity:0.2; transform:translate(-50%,-50%) scale(0.9);}
}

/* ================= HOVER EFFECT ================= */
.title-3d:hover{

/* 🔥 ZOOM HALUS */
transform:scale(1.05);

/* 🔥 GLOW NAIK */
text-shadow:
0 1px 0 #caa85a,
0 2px 0 #b8964a,
0 3px 0 #a3843f,
0 0 12px rgba(230,201,122,1),
0 0 25px rgba(230,201,122,0.8);

filter:drop-shadow(0 0 10px rgba(230,201,122,0.9));
}

/* ================= MENU ================= */
.menu{
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
}

/* ================= BUTTON ================= */
.menu button{
display:block;
width:300px; /* 🔥 lebih lebar */
padding:16px 20px;

font-weight:bold;
font-size:15px;
letter-spacing:1px;
color:#fff;

border-radius:16px; /* 🔥 bukan oval lagi */
cursor:pointer;
position:relative;

/* GLASS */
background:rgba(10,20,40,0.35);
backdrop-filter:blur(8px);

/* GOLD BORDER */
border:2px solid var(--gold-main);

/* DEPTH */
box-shadow:
inset 0 2px 6px rgba(255,255,255,0.2),
inset 0 -4px 10px rgba(0,0,0,0.9);

overflow:visible; /* 🔥 PENTING biar diamond ga kepotong */
transition:0.25s;
}

/* 🔥 BUTTON SHINE */
.menu button::before{
content:"";
position:absolute;
inset:0;

background:linear-gradient(
120deg,
transparent 35%,
rgba(255,255,255,0.25) 50%,
transparent 65%
);

transform:translateX(-100%);
animation:btnShine 5s linear infinite;
}

/* 🔥 BORDER SHINE */
.menu button{
display:flex;
justify-content:center;
align-items:center;

width:300px;
min-height:52px; /* 🔥 biar teks ga naik turun */
padding:14px 20px;

font-weight:bold;
font-size:15px;
letter-spacing:1px;
color:#fff;

border-radius:16px;
cursor:pointer;
position:relative;

/* GLASS */
background:rgba(10,20,40,0.35);
backdrop-filter:blur(8px);

/* GOLD BORDER */
border:2px solid var(--gold-main);

/* DEPTH */
box-shadow:
inset 0 2px 6px rgba(255,255,255,0.2),
inset 0 -4px 10px rgba(0,0,0,0.9);

overflow:hidden;
transition:0.25s;
}

/* 🔥 GLASS SHINE */
.menu button::before{
content:"";
position:absolute;
inset:0;
border-radius:16px;

background:linear-gradient(
120deg,
transparent 35%,
rgba(255,255,255,0.25) 50%,
transparent 65%
);

transform:translateX(-100%);
animation:btnShine 5s linear infinite;
}

/* 🔥 BORDER SHINE (FIX NGIKUTIN SHAPE) */
.menu button::after{
content:"";
position:absolute;
top:-3px;
left:-3px;
right:-3px;
bottom:-3px;

border-radius:20px;
pointer-events:none;

/* 🔥 GRADIENT LEBIH TERANG */
background:linear-gradient(
120deg,
transparent 20%,
rgba(255,255,255,1) 45%,
rgba(255,255,255,1) 55%,
transparent 80%
);

background-size:250% 100%;

/* 🔥 MASK BORDER */
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;

padding:3px;

/* 🔥 GLOW TAMBAHAN */
box-shadow:
0 0 8px rgba(255,255,255,0.6),
0 0 12px rgba(202,168,90,0.8);

/* 🔥 SPEED */
animation:borderRun 3s linear infinite;
}

@keyframes borderRun{
0%{ background-position:-200% 0; }
100%{ background-position:200% 0; }
}

/* HOVER */
.menu button:hover{
transform:scale(1.05);
box-shadow:
0 0 12px rgba(202,168,90,0.6),
0 0 20px rgba(6,182,212,0.3);
}

/* ANIMASI */
@keyframes btnShine{
0%{transform:translateX(-120%);}
100%{transform:translateX(120%);}
}

@keyframes borderShine{
0%{ background-position:-200% 0; }
100%{ background-position:200% 0; }
}

/* ================= PANEL ================= */
.box{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);

width:90%;
max-width:360px;
padding:30px 20px;

border-radius:20px;

background:rgba(10,20,40,0.3);
backdrop-filter:blur(8px);

border:2px solid var(--gold-main);

box-shadow:
0 10px 40px rgba(0,0,0,0.8),
0 0 12px rgba(202,168,90,0.3);

overflow:hidden;
z-index:9999;
text-align:center;
}

/* SHINE PANEL */
.box::before{
content:"";
position:absolute;
inset:0;

background:linear-gradient(
120deg,
transparent 35%,
rgba(255,255,255,0.2) 50%,
transparent 65%
);

transform:translateX(-100%);
animation:shine 4.5s linear infinite;
}

@keyframes shine{
0%{transform:translateX(-120%);}
100%{transform:translateX(120%);}
}

@keyframes btnShine{
0%{transform:translateX(-120%);}
100%{transform:translateX(120%);}
}

@keyframes borderShine{
0%{ background-position:-200% 0; }
100%{ background-position:200% 0; }
}

/* ================= POPUP UNIVERSAL ================= */
.popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

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

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

z-index:9999;
}

/* ================= BOX ================= */
.popup-box{
width:90%;
max-width:420px;
max-height:85vh;

padding:25px 20px;

border-radius:22px;

background:rgba(10,20,40,0.4);
backdrop-filter:blur(12px);

border:2px solid #E6C97A;

box-shadow:
0 20px 60px rgba(0,0,0,0.9),
0 0 20px rgba(230,201,122,0.4);

display:flex;
flex-direction:column;
gap:15px;

overflow-y:auto;
text-align:center;
}

/* ================= TITLE ================= */
.panel-title{
font-size:20px;
color:#E6C97A;
}

/* ================= INPUT ================= */
.popup-box input{
width:100%;
padding:12px;

border-radius:10px;
border:none;

background:#020617;
color:white;
font-size:14px;
}

/* ================= BUTTON GOLD ================= */
.btn-main{
width:100%;
padding:14px;

border-radius:40px;

background:linear-gradient(
180deg,
#E6C97A,
#caa85a,
#8a6a2f
);

color:#000;
font-weight:bold;

border:none;

cursor:pointer;
transition:0.25s;
}

.btn-main:hover{
transform:scale(1.05);
filter:brightness(1.1);
}

/* ================= SMALL BUTTON (CEK) ================= */
.btn-cek{
margin-top:10px;
padding:10px 20px;

border-radius:30px;

background:linear-gradient(
180deg,
#E6C97A,
#caa85a,
#8a6a2f
);

border:none;
color:black;
font-weight:bold;

cursor:pointer;
}

/* ================= HADIAH IMG ================= */
.hadiah-img{
width:120px;
margin:10px auto;
}

.hadiah-text{
margin-top:10px;
font-size:18px;
font-weight:bold;
color:#E6C97A;

text-shadow:
0 1px 0 #caa85a,
0 2px 0 #b8964a,
0 0 10px rgba(230,201,122,0.7);

animation:fadeUp 0.5s ease;
}

@keyframes fadeUp{
0%{opacity:0; transform:translateY(10px);}
100%{opacity:1; transform:translateY(0);}
}

/* ================= CLOSE ================= */
.close-btn{
position:absolute;
top:10px;
right:15px;
font-size:20px;
cursor:pointer;
color:white;
}

/* ================= NOTE ================= */
.note{
font-size:12px;
color:#E6C97A;
animation:blinkWarn 1.2s infinite;
}

@keyframes blinkWarn{
0%{opacity:1;}
50%{opacity:0.4;}
100%{opacity:1;}
}

/* ================= CHEST WRAPPER ================= */
.chest-wrapper{
position:relative;
width:140px;
margin:20px auto;
cursor:pointer;
}

/* ================= CHEST ================= */
.chest-img{
width:100%;
animation:floatChest 3s ease-in-out infinite;
transition:0.3s;
}

/* FLOAT */
@keyframes floatChest{
0%{transform:translateY(0);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0);}
}

/* ================= GLOW ================= */
.chest-glow{
position:absolute;
top:50%;
left:50%;
width:120px;
height:120px;

transform:translate(-50%,-50%);
background:radial-gradient(circle,rgba(0,200,255,0.6),transparent 70%);
filter:blur(25px);

animation:pulseGlow 2s infinite;
z-index:-1;
}

@keyframes pulseGlow{
0%{opacity:0.4; transform:translate(-50%,-50%) scale(0.9);}
50%{opacity:0.8; transform:translate(-50%,-50%) scale(1.1);}
100%{opacity:0.4; transform:translate(-50%,-50%) scale(0.9);}
}

/* ================= LIGHT BURST ================= */
.light-burst{
position:absolute;
top:50%;
left:50%;

width:0;
height:0;

background:radial-gradient(circle,white,transparent);
border-radius:50%;

transform:translate(-50%,-50%);
opacity:0;
}

/* ACTIVE STATE */
.chest-open .light-burst{
animation:burst 0.6s ease-out;
}

@keyframes burst{
0%{
width:0;
height:0;
opacity:1;
}
100%{
width:250px;
height:250px;
opacity:0;
}
}

/* ================= HADIAH REVEAL ================= */
.reward-show{
animation:rewardPop 0.6s ease;
}

@keyframes rewardPop{
0%{transform:scale(0.3); opacity:0;}
100%{transform:scale(1); opacity:1;}
}

/* ===== CHEST INFO ===== */
.chest-info{
margin-top:10px;
font-size:13px;
color:#E6C97A;
text-align:center;

animation:blinkChest 1.2s infinite;
text-shadow:0 0 8px rgba(230,201,122,0.6);
}

@keyframes blinkChest{
0%{opacity:1;}
50%{opacity:0.4;}
100%{opacity:1;}
}

/* ===== TITLE MENANG 3D ===== */
.win-title{
font-size:22px;
color:#E6C97A;
letter-spacing:2px;

text-shadow:
0 1px 0 #caa85a,
0 2px 0 #b8964a,
0 3px 0 #a3843f,
0 4px 10px rgba(0,0,0,0.8);

animation:winPop 0.5s ease;
}

@keyframes winPop{
0%{transform:scale(0.7); opacity:0;}
100%{transform:scale(1); opacity:1;}
}

/* ===== TEXT HADIAH ===== */
.hadiah-text{
margin-top:10px;
font-size:18px;
font-weight:bold;
color:#E6C97A;

text-shadow:
0 1px 0 #caa85a,
0 2px 0 #b8964a,
0 3px 0 #a3843f,
0 0 10px rgba(230,201,122,0.8);

animation:fadeUp 0.5s ease;
}

@keyframes fadeUp{
0%{opacity:0; transform:translateY(10px);}
100%{opacity:1; transform:translateY(0);}
}

/* ===== NOTE LANJUT ===== */
.note-win{
margin-top:10px;
font-size:12px;
color:#E6C97A;
animation:blinkWarn 1.2s infinite;
}

/* ================= MOBILE ================= */
@media(max-width:768px){

.logo{
width:260px;
}

.menu button{
width:85%;
}

}