/* ===================================
   TNT JACKPOT - CLEAN ORGANIZED VERSION
   保持原有效果，只整理结构与修复重复代码
=================================== */

/* ======================
RESET
====================== */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial,Helvetica,sans-serif;
background:
linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.82)),
url("https://images.unsplash.com/photo-1596838132731-3301c3fd4317?auto=format&fit=crop&w=1800&q=80");
background-size:cover;
background-position:center;
background-attachment:fixed;
color:#fff;
text-align:center;
min-height:100vh;
}

.container{
max-width:1280px;
margin:auto;
padding:25px 15px 70px;
}

/* ======================
TOP NAVIGATION
====================== */
.top-nav{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 40px;
background:rgba(0,0,0,.75);
border-bottom:2px solid #ffd700;
position:sticky;
top:0;
z-index:999;
}

.nav-logo{
color:#ffd700;
font-size:28px;
font-weight:900;
letter-spacing:2px;
text-shadow:0 0 12px #ffd700;
}

.nav-menu{
display:flex;
gap:15px;
align-items:center;
}

.nav-menu a{
color:#fff;
text-decoration:none;
padding:10px 18px;
border-radius:8px;
font-weight:700;
font-size:15px;
transition:.3s;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}

.nav-menu a:hover{
background:#ffd700;
color:#000;
transform:translateY(-2px);
box-shadow:0 0 15px #ffd700;
}

.nav-menu .active{
background:#ffd700;
color:#000;
}

.claim-btn{
background:#ff2a2a !important;
color:#fff !important;
animation:pulseBtn 1s infinite;
}

@keyframes pulseBtn{
0%{transform:scale(1);}
50%{transform:scale(1.06);}
100%{transform:scale(1);}
}

/* ======================
TOP BANNER
====================== */
.top-banner{
width:100%;
max-width:1280px;
margin:0 auto 25px;
border-radius:18px;
overflow:hidden;
border:1px solid rgba(255,211,77,.15);
box-shadow:
0 10px 25px rgba(0,0,0,.5),
0 0 18px rgba(255,211,77,.08);
}

.top-banner img{
width:100%;
display:block;
}

/* ======================
TITLE
====================== */
h1{
font-size:60px;
font-weight:900;
color:#ffd633;
letter-spacing:2px;
line-height:1.1;
margin-bottom:25px;
text-shadow:
0 0 10px rgba(255,211,77,.9),
0 0 24px rgba(255,211,77,.45),
0 0 45px rgba(255,211,77,.2);
}

/* ======================
COUNTDOWN
====================== */
.countdown{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:15px;
margin-bottom:28px;
}

.countdown div{
width:115px;
padding:14px 10px;
border-radius:16px;
background:rgba(0,0,0,.48);
border:1px solid rgba(255,211,77,.15);
backdrop-filter:blur(5px);
box-shadow:0 8px 20px rgba(0,0,0,.45);
}

.countdown span{
display:block;
font-size:52px;
font-weight:900;
color:#ffd633;
line-height:1;
}

.countdown small{
font-size:18px;
}

/* ======================
GRID
====================== */
.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
row-gap:26px;
max-width:1080px;
margin:auto;
}

/* ======================
CARD
====================== */
.box{
position:relative;
overflow:hidden;
border-radius:18px;
background:linear-gradient(180deg,#000,#080808,#000);
border:1px solid rgba(255,211,77,.18);
box-shadow:
0 12px 28px rgba(0,0,0,.55),
0 0 12px rgba(255,211,77,.05);
transition:.25s;
}

.box:hover{
transform:translateY(-4px);
}

.box h2{
min-height:72px;
display:flex;
justify-content:center;
align-items:center;
padding:15px 8px 8px;
font-size:28px;
font-weight:900;
line-height:1.05;
color:#ffd633;
}

.box p{
font-size:18px;
padding:0 10px 14px;
color:#fff;
line-height:1.35;
}

/* ======================
AMOUNT
====================== */
.amount{
position:relative;
padding:20px 15px;
font-size:54px;
font-weight:900;
line-height:1;
color:#000;
background:linear-gradient(180deg,#fff0a2,#efc946,#c8940d);
text-shadow:0 1px 0 rgba(255,255,255,.3);
}

.amount::before{
content:"MYR";
position:absolute;
left:15px;
top:50%;
transform:translateY(-50%);
font-size:14px;
font-weight:800;
}

.silver .amount{
background:linear-gradient(180deg,#ffffff,#e8e8e8,#cccccc);
color:#111;
}

/* ======================
SUPREME EFFECT
====================== */
.grid .box:nth-child(1){
animation:borderGlow 1.2s linear infinite;
}

.grid .box:nth-child(1) .amount{
animation:numberGlow 1s infinite;
}

@keyframes borderGlow{
0%{box-shadow:0 0 10px #ffd633;}
50%{box-shadow:0 0 30px #ffd633;}
100%{box-shadow:0 0 10px #ffd633;}
}

@keyframes numberGlow{
0%{text-shadow:0 0 5px #fff;}
50%{text-shadow:0 0 18px #fff;}
100%{text-shadow:0 0 5px #fff;}
}

/* ======================
RIBBON TAGS
====================== */
.grid .box:nth-child(1)::after{
content:"GROWING";
position:absolute;
top:16px;
right:-26px;
width:95px;
padding:6px 0;
background:#ffd633;
color:#111;
font-size:9px;
font-weight:900;
transform:rotate(45deg);
}

.hot::after{
content:"HOT";
position:absolute;
top:16px;
right:-26px;
width:95px;
padding:6px 0;
background:#ff1f1f;
color:#fff;
font-size:9px;
font-weight:900;
transform:rotate(45deg);
}

/* ======================
INFO SECTION
====================== */
.info-section{
max-width:1100px;
margin:55px auto 20px;
padding:28px 20px;
border-radius:18px;
background:rgba(0,0,0,.45);
border:1px solid rgba(255,211,77,.1);
}

.info-section h3{
font-size:30px;
color:#ffd633;
margin:18px 0;
}

.rules{
list-style:none;
margin-bottom:25px;
}

.rules li{
font-size:18px;
line-height:1.7;
margin:10px 0;
color:#eee;
}

/* ======================
LOGO GRID
====================== */
.logo-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:18px;
max-width:1000px;
margin:auto;
padding:20px;
}

.logo-grid a{
background:rgba(255,255,255,.05);
border-radius:18px;
padding:12px;
display:flex;
justify-content:center;
align-items:center;
height:170px;
overflow:hidden;
transition:.3s;
border:1px solid rgba(255,211,77,.15);
box-shadow:0 8px 18px rgba(0,0,0,.4);
}

.logo-grid a:hover{
transform:translateY(-5px);
box-shadow:0 0 18px rgba(255,215,0,.35);
}

.logo-grid img{
max-width:90%;
max-height:90%;
width:auto;
height:auto;
object-fit:contain;
display:block;
}

/* ======================
ANGPOW BUTTON
====================== */
.angpow{
position:fixed;
right:20px;
bottom:20px;
width:75px;
height:75px;
border-radius:50%;
background:#ff0000;
color:#fff;
font-size:38px;
display:flex;
justify-content:center;
align-items:center;
text-decoration:none;
z-index:9999;
box-shadow:0 0 20px red;
animation:shake 1s infinite;
}

@keyframes shake{
0%{transform:rotate(0);}
25%{transform:rotate(10deg);}
50%{transform:rotate(-10deg);}
75%{transform:rotate(10deg);}
100%{transform:rotate(0);}
}

/* ======================
TABLET
====================== */
@media(max-width:1000px){

.grid{
grid-template-columns:1fr 1fr;
}

.logo-grid{
grid-template-columns:1fr 1fr;
}

}

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

.container{
padding:18px 10px 60px;
}

.top-nav{
flex-direction:column;
gap:12px;
padding:15px;
}

.nav-logo{
font-size:22px;
}

.nav-menu{
flex-wrap:wrap;
justify-content:center;
}

.nav-menu a{
font-size:13px;
padding:8px 14px;
}

h1{
font-size:34px;
line-height:1.2;
margin-bottom:18px;
}

.top-banner{
border-radius:12px;
margin-bottom:16px;
}

.countdown{
gap:10px;
margin-bottom:20px;
}

.countdown div{
width:72px;
padding:10px 5px;
border-radius:12px;
}

.countdown span{
font-size:32px;
}

.countdown small{
font-size:13px;
}

.grid{
grid-template-columns:1fr 1fr;
gap:12px;
row-gap:12px;
}

.box{
min-height:170px;
border-radius:14px;
}

.box h2{
font-size:20px;
padding:14px 6px 6px;
min-height:auto;
}

.box p{
font-size:14px;
padding:0 8px 10px;
}

.amount{
font-size:38px !important;
padding:16px 12px;
}

.amount::before{
font-size:12px !important;
left:10px;
}

.grid .box:nth-child(1)::after,
.hot::after{
top:10px;
right:-24px;
width:82px;
font-size:8px;
padding:5px 0;
}

.info-section{
padding:20px 14px;
margin-top:35px;
}

.info-section h3{
font-size:22px;
}

.rules li{
font-size:15px;
line-height:1.6;
}

.logo-grid{
grid-template-columns:1fr 1fr;
gap:12px;
padding:10px;
}

.logo-grid a{
height:120px;
padding:8px;
border-radius:14px;
}

.logo-grid img{
max-width:85%;
max-height:85%;
}

.angpow{
width:65px;
height:65px;
font-size:32px;
right:15px;
bottom:15px;
}

}

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

.grid{
grid-template-columns:1fr;
}

.amount{
font-size:34px !important;
}

}