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

body{
background:radial-gradient(circle at 30% 10%, #301026 0%, #160713 50%, #0c040a 100%);
color:white;
min-height: 100vh;
overflow-x: hidden;
}

/* NAVBAR */
nav{
height:72px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 40px;
background:rgba(22, 8, 18, 0.95);
border-bottom:1px solid rgba(255,255,255,.06);
}

.left{
display:flex;
align-items:center;
gap:30px;
}

.logo img {
width: 36px;
height: 36px;
object-fit: contain;
}

.menu{
display:flex;
gap:25px;
color:#d9c5cf;
font-weight:500;
align-items: center;
}

.menu a{
text-decoration:none;
color:#d4c6cf;
display: flex;
align-items: center;
gap: 6px;
font-size: 15px;
}

.wallet{
padding:10px 22px;
border:none;
border-radius:8px;
background:linear-gradient(135deg, #ffe187 0%, #dfa037 100%);
font-weight:700;
color: #1a1005;
cursor:pointer;
box-shadow: 0 4px 15px rgba(223, 160, 55, 0.3);
}

/* HERO */
.hero{
max-width:1440px;
margin:auto;
padding:50px 40px;
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:40px;
}

.hero-left{
display:flex;
gap:30px;
align-items:center;
padding-top: 20px;
}

.cube{
width:210px;
height:210px;
display:flex;
justify-content:center;
align-items:center;
flex-shrink: 0;
}

.cube img{
width:100%;
height:100%;
object-fit:contain;
filter: drop-shadow(0 0 25px rgba(255, 45, 140, 0.6));
}

.text h1{
font-size:64px;
font-weight: 800;
background:linear-gradient(180deg, #ffea9f 0%, #e09f36 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:5px;
letter-spacing: -1px;
}

.text p{
font-size:22px;
margin-bottom:6px;
font-weight: 500;
color: #ffffff;
}

.text small{
font-size:16px;
color:#bfa8b5;
display: flex;
align-items: center;
gap: 6px;
}

.coin-badge {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
vertical-align: middle;
}
.coin-badge.blue { background: #2775ca; }
.coin-badge.yellow { background: #f3ba2f; }

.play{
margin-top:20px;
padding:14px 28px;
background:linear-gradient(135deg, #ffe187 0%, #dfa037 100%);
border:none;
border-radius:8px;
font-size:16px;
font-weight:700;
color: #1a1005;
cursor:pointer;
box-shadow: 0 4px 15px rgba(223, 160, 55, 0.3);
}

/* LIVE TABLE */
.live{
width:580px;
background:rgba(28, 11, 23, 0.75);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius:14px;
padding:20px 22px;
backdrop-filter:blur(20px);
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.live h2{
color:#f3ba2f;
font-size: 18px;
margin-bottom:12px;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
}

table{
width:100%;
border-collapse:collapse;
font-size:13px;
}

th{
color:#8f7e88;
padding:8px 6px;
text-align:left;
font-weight:500;
border-bottom: 1px solid rgba(255,255,255,.06);
}

td{
padding:9px 6px;
border-top:1px solid rgba(255,255,255,.04);
color: #e6d8df;
white-space: nowrap;
}

.ext-link {
color: #8f7e88;
text-decoration: none;
font-size: 11px;
margin-left: 4px;
}

.copy-icon {
font-size: 11px;
color: #8f7e88;
cursor: pointer;
margin-left: 4px;
}

.game-icon, .token-icon, .avatar {
display: inline-block;
vertical-align: middle;
margin-right: 4px;
}

.token-icon {
width: 12px;
height: 12px;
border-radius: 50%;
}
.token-icon.blue { background: #2775ca; }
.token-icon.yellow { background: #f3ba2f; }

.avatar {
width: 14px;
height: 14px;
border-radius: 50%;
}
.avatar.multi { background: conic-gradient(from 0deg, #ff2d8c, #2775ca, #f3ba2f); }
.avatar.red { background: #ff4757; }
.avatar.blue { background: #2775ca; }
.avatar.pink { background: #ff2d8c; }
.avatar.yellow { background: #f3ba2f; }
.avatar.green { background: #2ed573; }
.avatar.orange { background: #ff7f50; }

/* STATS */
.stats{
max-width:1440px;
margin:20px auto;
display:flex;
justify-content:space-between;
padding:0 40px;
gap: 30px;
}

.card{
flex: 1;
background:rgba(28, 11, 23, 0.6);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius:14px;
padding:28px;
text-align:center;
backdrop-filter: blur(10px);
}

.card h2{
font-size:42px;
font-weight: 800;
background:linear-gradient(180deg, #ffea9f 0%, #dfa037 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.card p{
margin-top:6px;
font-size:18px;
color:#9e8c96;
font-weight: 500;
}

/* FEATURES */
.features{
margin-top:60px;
background:#0a0308;
border-top: 1px solid rgba(255, 255, 255, 0.04);
display:flex;
justify-content:space-around;
padding:40px;
}

.feature{
display:flex;
align-items:center;
gap:20px;
}

.icon{
width:56px;
height:56px;
border-radius:50%;
border:2px solid #e09f36;
display:flex;
justify-content:center;
align-items:center;
background: rgba(224, 159, 54, 0.05);
}

.feature h3{
font-size:24px;
color:#f3ba2f;
font-weight: 700;
}

/* MOBILE RESPONSIVE FIX (FOR SCREENS 768px AND BELOW) */
@media (max-width: 768px) {
  nav {
    padding: 12px 15px;
    height: auto;
    flex-direction: column;
    gap: 12px;
  }
  
  .left {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }

  .menu {
    gap: 12px;
    font-size: 13px;
  }

  .wallet {
    width: 100%;
    padding: 10px;
    font-size: 14px;
  }

  .hero {
    flex-direction: column !important;
    padding: 20px 15px !important;
    gap: 20px !important;
  }

  .hero-left {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 15px !important;
    width: 100% !important;
  }

  .cube {
    width: 110px !important;
    height: 110px !important;
  }

  .text h1 {
    font-size: 32px !important;
    line-height: 1.1;
  }

  .text p {
    font-size: 15px !important;
  }

  .text small {
    justify-content: center !important;
    font-size: 12px !important;
    flex-wrap: wrap !important;
    gap: 4px;
  }

  .play {
    width: 100% !important;
    padding: 12px !important;
  }

  .live {
    width: 100% !important;
    overflow-x: auto !important;
    padding: 12px !important;
  }

  table {
    font-size: 11px;
  }

  .stats {
    flex-direction: column !important;
    padding: 0 15px !important;
    gap: 12px !important;
  }

  .card {
    width: 100% !important;
    padding: 18px !important;
  }

  .card h2 {
    font-size: 26px !important;
  }

  .card p {
    font-size: 14px !important;
  }

  .features {
    flex-direction: column !important;
    padding: 25px 15px !important;
    gap: 20px !important;
  }

  .feature {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 15px !important;
  }

  .feature h3 {
    font-size: 18px !important;
  }
}