body{margin:0;background:#0b0c0f;color:#fff;font-family:Segoe UI,Roboto,Arial,sans-serif;
  background-image: url('images/hk.jpg'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;


}
.container{max-width:1200px;margin:auto;padding:20px}
.topbar{display:flex;justify-content:space-between;align-items:center;background:#101216;border-bottom:1px solid #1f232b;padding:10px 20px}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-name{font-weight:700;font-size:15px}
.nav{display:flex;gap:.6rem}
.nav-link{padding:6px 14px;border-radius:999px;background:#181c24;color:#fff;text-decoration:none;border:1px solid #2a2f38}
.nav-link.active{background:#332600;color:#ffca28;border-color:#5a4200;box-shadow:0 0 8px #ffca28}

.bubble{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#222;font-weight:700;
background:radial-gradient(circle at 30% 25%,#fff9c0 0%,#ffd54a 35%,#ffb300 70%,#ff9800 100%);
box-shadow:0 0 10px rgba(255,200,60,.6),0 0 20px rgba(255,190,40,.3)}
.bubble-row{display:flex;justify-content:center;gap:.3rem;flex-wrap:nowrap}

.card{background:rgba(0,0,0,.7);border:1px solid #1e2129;border-radius:16px;padding:16px;margin:10px;box-shadow:0 6px 14px rgba(0,0,0,.3)}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.subcard{border:1px dashed #2a2e37;border-radius:14px;padding:10px;margin-top:12px;text-align:center}
.subhead{font-weight:700;margin-bottom:6px}
.grid-2x2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:768px){.grid-2x2{grid-template-columns:1fr}}

.nextdraw{text-align:center;padding:16px;margin-bottom:20px;border-radius:14px;background:rgba(0,0,0,.7);border:1px solid #1e2229}
.countdown{font-size:36px;font-weight:800;margin-top:8px}
.dot{width:10px;height:10px;border-radius:50%;background:#1cff9c;display:inline-block;margin-right:8px}

.filter{display:flex;gap:.6rem;align-items:center;margin-bottom:20px}
.filter input,.filter select{padding:6px 10px;border-radius:8px;border:1px solid #2a2e37;background:#181c24;color:#fff}
.filter button{padding:6px 14px;border-radius:8px;background:#ffca28;color:#111;font-weight:700;border:none}
.filter .reset{color:#fff;text-decoration:none;padding:6px 12px;border:1px solid #555;border-radius:8px}

.history-list .hist-card{background:#11141a;border:1px solid #1e2129;border-radius:12px;padding:12px;margin:10px 0}
.hist-head{font-size:14px;margin-bottom:6px}
.hist-body>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hist-body strong{min-width:60px}

/* Mobile card version */
@media(max-width:720px){
  .hist-card{padding:14px 10px;text-align:center}
  .hist-body strong{display:block;margin-bottom:4px}
  .bubble-row{justify-content:center;flex-wrap:nowrap}
}
.bubble {
  box-shadow: 0 0 8px rgba(255,215,0,.6);
}
.bubble-row {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FFD700, #CFAF00);
  box-shadow: 0 0 10px gold;
  color: #111;
  font-weight: bold;
  font-size: 18px;
  margin: 2px;
}

.section-title {
  margin-bottom: 6px;
  font-weight: 600;
  text-align: center;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  border: 3px solid #111;
  border-top: 3px solid gold;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 0.6s linear infinite;
}

.bubble.reveal {
  background: gold !important;
  box-shadow: 0 0 15px #FFD700;
  transform: scale(1.1);
  transition: 0.3s;
}

.brand-mark {
  width: 100px;  /* adjust size as needed */
  height: 100px; /* adjust size as needed */
  object-fit: contain;
}