body{
  margin:0;
  padding:0;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(135deg,#1e1e2f,#12121a);
  color:#fff;
  text-align:center;
}

.container{
  padding-top:60px;
}

h1{
  font-size:42px;
  margin-bottom:20px;
  color:#d4af37;
  letter-spacing:1px;
}

#statusBox{
  font-size:20px;
  margin-bottom:40px;
  color:#ddd;
}

#resultBox{
  font-size:120px;
  font-weight:900;
  color:#d4af37;
  text-shadow: 0 0 10px rgba(212,175,55,0.8),
               0 0 20px rgba(212,175,55,0.6),
               0 0 40px rgba(212,175,55,0.4);
  margin-bottom:30px;
}

.countdownWrap{
  font-size:20px;
  margin-top:10px;
}

#countdownBox{
  background:#000;
  color:#00ff88;
  padding:10px 20px;
  border-radius:10px;
  font-size:22px;
  font-weight:bold;
  display:inline-block;
  margin-left:8px;
  box-shadow:0 0 10px rgba(0,255,136,0.7);
}

.holdNote{
  margin-top:20px;
  font-size:22px;
  font-weight:800;
  color:#ff4444;
}

.historyWrap{
  margin-top:50px;
}

.historyWrap h3{
  margin-bottom:15px;
  color:#d4af37;
}

#historyBox{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

.historyItem{
  background:#111;
  padding:10px 14px;
  border-radius:8px;
  font-weight:700;
  min-width:60px;
  box-shadow:0 0 8px rgba(0,0,0,0.6);
}

.historyItem span{
  display:block;
  font-size:12px;
  color:#aaa;
}

.historyCancelled{
  background:#330000;
  color:#ff4444;
}

/* Animations */
.pulse{
  animation: pulseAnim 0.8s infinite;
}
@keyframes pulseAnim{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}

.flash{
  animation: flashAnim 0.5s;
}
@keyframes flashAnim{
  0%{ filter: brightness(1); }
  50%{ filter: brightness(2); }
  100%{ filter: brightness(1); }
}

/* Mobile */
@media(max-width:600px){
  h1{ font-size:28px; }
  #resultBox{ font-size:80px; }
  #statusBox{ font-size:16px; }
}