:root{

--accent:#459b24;
--bg:#050505;
--card:#0a0a0a;
--border:#1a1a1a;
--text:#ffffff;
--text-dim:#a0a0a0;

--common:#8f8f8f;
--rare:#2b7cff;
--epic:#b24dff;
--legendary:#ffb300;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{

background:var(--bg);
color:white;
overflow-x:hidden;

}

.background-glow{

position:fixed;
border-radius:50%;
filter:blur(160px);
pointer-events:none;

}

.glow-1{

width:400px;
height:400px;

background:#459b2444;

left:-150px;
top:-120px;

}

.glow-2{

width:450px;
height:450px;

background:#459b241f;

right:-180px;
bottom:-180px;

}

.page{

width:100%;
max-width:1300px;
margin:auto;
padding:40px 20px;

}

header{

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

margin-bottom:50px;

}

.logo{

display:flex;
align-items:center;
gap:18px;

}

.logo-icon{

width:60px;
height:60px;

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

font-size:28px;

background:linear-gradient(
145deg,
#459b24,
#2c6816
);

border-radius:18px;

box-shadow:

0 0 30px rgba(69,155,36,.4);

}

.logo h2{

font-size:28px;
font-weight:700;

}

.logo span{

color:var(--text-dim);

}

.hero{

text-align:center;
margin-bottom:50px;

}

.hero h1{

font-size:58px;
font-weight:800;

margin-bottom:15px;

}

.hero p{

font-size:19px;

color:var(--text-dim);

}

.wheel-card{

background:var(--card);

border:1px solid var(--border);

border-radius:28px;

padding:40px;

display:flex;

flex-direction:column;

align-items:center;

box-shadow:

0 0 35px rgba(0,0,0,.4);

}

.wheel-box{

position:relative;

width:600px;
height:600px;

display:flex;

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

}

#wheel{

width:100%;
height:100%;

border-radius:50%;

transition:
transform 7s cubic-bezier(.18,.88,.16,1);

filter:

drop-shadow(0 0 40px rgba(69,155,36,.2));

}

.pointer{

position:absolute;

top:-18px;

left:50%;

transform:translateX(-50%);

width:0;
height:0;

border-left:18px solid transparent;
border-right:18px solid transparent;
border-top:48px solid var(--accent);

z-index:5;

filter:

drop-shadow(0 0 12px var(--accent));

}

.wheel-center{

position:absolute;

width:130px;
height:130px;

border-radius:50%;

background:#101010;

display:flex;

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

border:5px solid var(--accent);

box-shadow:

0 0 25px rgba(69,155,36,.45);

}

.center-ring{

font-size:26px;

font-weight:800;

letter-spacing:2px;

}


/* ===========================
   CONTROLS
=========================== */

.controls{

display:flex;
flex-direction:column;
align-items:center;
gap:18px;

margin-top:35px;

width:100%;

}

#spinButton{

padding:18px 60px;

border:none;
border-radius:14px;

background:linear-gradient(
135deg,
#459b24,
#5dbd37
);

color:white;

font-size:18px;
font-weight:700;

cursor:pointer;

transition:.25s;

box-shadow:
0 10px 30px rgba(69,155,36,.35);

}

#spinButton:hover{

transform:translateY(-3px);

box-shadow:
0 15px 35px rgba(69,155,36,.45);

}

#spinButton:active{

transform:scale(.97);

}

#spinButton:disabled{

opacity:.45;

cursor:not-allowed;

transform:none;

box-shadow:none;

}

#cooldownText{

font-size:15px;

color:var(--text-dim);

}


/* ===========================
   REWARD CARD
=========================== */

.reward-card{

margin-top:35px;

background:var(--card);

border:1px solid var(--border);

border-radius:24px;

padding:30px;

display:flex;

flex-direction:column;

align-items:center;

gap:18px;

}

.reward-title{

font-size:15px;

letter-spacing:2px;

text-transform:uppercase;

color:var(--text-dim);

}

.reward-name{

font-size:34px;

font-weight:800;

text-align:center;

}

.reward-code-box{

display:flex;

gap:12px;

width:100%;

max-width:520px;

margin-top:10px;

}

.reward-code-box input{

flex:1;

height:52px;

background:#111;

border:1px solid var(--border);

border-radius:12px;

color:white;

padding:0 16px;

font-size:15px;

outline:none;

}

.reward-code-box button{

width:140px;

border:none;

border-radius:12px;

background:var(--accent);

color:white;

font-weight:700;

cursor:pointer;

transition:.2s;

}

.reward-code-box button:hover{

transform:translateY(-2px);

}


/* ===========================
   RARITIES
=========================== */

.rarity{

padding:8px 18px;

border-radius:999px;

font-size:13px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

}

.common{

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

color:#d3d3d3;

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

}

.rare{

background:rgba(43,124,255,.15);

color:#66a6ff;

border:1px solid rgba(43,124,255,.4);

}

.epic{

background:rgba(178,77,255,.15);

color:#cf8cff;

border:1px solid rgba(178,77,255,.45);

}

.legendary{

background:rgba(255,179,0,.15);

color:#ffcc45;

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

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

}


/* ===========================
   DROP CHANCES
=========================== */

.probability-card{

margin-top:35px;

background:var(--card);

border:1px solid var(--border);

border-radius:24px;

padding:30px;

}

.probability-card h3{

font-size:24px;

margin-bottom:25px;

}

.chance{

display:flex;

justify-content:space-between;

align-items:center;

padding:16px 0;

border-bottom:1px solid var(--border);

}

.chance:last-child{

border-bottom:none;

}

.chance div{

display:flex;

align-items:center;

gap:10px;

}

.tag{

padding:4px 10px;

border-radius:999px;

font-size:11px;

font-weight:700;

text-transform:uppercase;

}

.tag.common{

background:#222;

color:#cfcfcf;

}

.tag.rare{

background:#225fff33;

color:#61a0ff;

}

.tag.epic{

background:#a43fff33;

color:#d18cff;

}

.tag.legendary{

background:#ffb30033;

color:#ffd15c;

}

.chance strong{

font-size:18px;

}

/* ===========================
   INFO CARD
=========================== */

.info-card{

margin-top:35px;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

}

.info-item{

background:var(--card);

border:1px solid var(--border);

border-radius:20px;

padding:22px;

transition:.25s;

}

.info-item:hover{

transform:translateY(-5px);

border-color:var(--accent);

box-shadow:
0 10px 25px rgba(69,155,36,.15);

}

.info-item h4{

margin-bottom:10px;

font-size:18px;

}

.info-item p{

color:var(--text-dim);

line-height:1.6;

font-size:15px;

}


/* ===========================
   MODAL
=========================== */

.modal{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

background:rgba(0,0,0,.75);

backdrop-filter:blur(8px);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:1000;

}

.modal.show{

opacity:1;

visibility:visible;

}

.modal-card{

width:95%;

max-width:480px;

background:var(--card);

border:1px solid var(--border);

border-radius:24px;

padding:35px;

text-align:center;

animation:popup .35s ease;

}

.modal-icon{

font-size:70px;

margin-bottom:18px;

}

.modal-card h2{

font-size:32px;

margin-bottom:15px;

}

.modal-card h3{

margin-bottom:15px;

font-size:28px;

}

.modal-card input{

width:100%;

height:52px;

margin-top:20px;

margin-bottom:18px;

border:none;

border-radius:12px;

background:#111;

color:white;

padding:0 15px;

font-size:15px;

outline:none;

}

.modal-card button{

width:100%;

height:52px;

border:none;

border-radius:12px;

font-weight:700;

font-size:16px;

cursor:pointer;

margin-top:10px;

transition:.2s;

}

.modal-card button:hover{

transform:translateY(-2px);

}

#modalCopy{

background:var(--accent);

color:white;

}

.secondary{

background:#181818;

color:white;

}


/* ===========================
   TOAST
=========================== */

#toast{

position:fixed;

bottom:35px;

left:50%;

transform:translateX(-50%);

background:#111;

border:1px solid var(--accent);

padding:14px 24px;

border-radius:12px;

color:white;

opacity:0;

pointer-events:none;

transition:.3s;

z-index:2000;

}

#toast.show{

opacity:1;

bottom:45px;

}


/* ===========================
   CONFETTI
=========================== */

#confetti{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

pointer-events:none;

overflow:hidden;

z-index:999;

}

.confetti{

position:absolute;

width:10px;

height:18px;

animation:fall linear forwards;

}


/* ===========================
   FOOTER
=========================== */

footer{

margin-top:60px;

padding:20px;

text-align:center;

color:var(--text-dim);

font-size:14px;

}


/* ===========================
   ANIMATIONS
=========================== */

@keyframes popup{

0%{

transform:scale(.7);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

@keyframes glow{

0%{

box-shadow:
0 0 10px rgba(69,155,36,.2);

}

50%{

box-shadow:
0 0 35px rgba(69,155,36,.55);

}

100%{

box-shadow:
0 0 10px rgba(69,155,36,.2);

}

}

@keyframes fall{

0%{

transform:translateY(-100px) rotate(0deg);

opacity:1;

}

100%{

transform:translateY(120vh) rotate(720deg);

opacity:0;

}

}

@keyframes fade{

from{

opacity:0;

}

to{

opacity:1;

}

}


/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:900px){

.wheel-box{

width:450px;

height:450px;

}

.hero h1{

font-size:42px;

}

.reward-name{

font-size:28px;

}

}

@media(max-width:600px){

.page{

padding:20px;

}

.logo h2{

font-size:22px;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.wheel-box{

width:320px;

height:320px;

}

.wheel-center{

width:90px;

height:90px;

}

.center-ring{

font-size:18px;

}

.reward-code-box{

flex-direction:column;

}

.reward-code-box button{

width:100%;

}

.modal-card{

padding:25px;

}

}