/* --- Table Wrapper --- */
.results-table-wrapper {
  overflow-x: auto;
  margin: 20px 0;
}

/* --- Results Table --- */
.results-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.results-table th,
.results-table td {
  border: 1px solid #333;
  padding: 6px 4px;
  font-size: 16px;
}

.results-table thead th {
  background: #222;
  color: #fff;
  font-weight: bold;
}

.results-table td div {
  padding: 6px 4px;
  font-weight: bold;
  line-height: 1.3;
}

.results-table .mid-number {
  font-size: 20px;
  font-weight: 900;
  color: yellow;
  text-shadow: 1px 1px 2px #000;
}

/* Hover effect */
.results-table-wrapper .results-table tr:hover {
  box-shadow: 0 0 12px rgba(0,0,0,0.15);
  transform: scale(1.01);
  transition: 0.2s ease;
}

/* --- Latest Result Box --- */
.latest-result-box {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 40px auto;
  padding: 4vw 6vw; /* responsive padding */
  font-size: 6vw;   /* responsive font-size */
  font-weight: 900;
  color: #000;
  background: linear-gradient(135deg, #FFD700, #FFA500); /* Golden gradient */
  border-radius: 16px;
  box-shadow: 0 0 25px rgba(255,215,0,0.9), 0 0 50px rgba(255,165,0,0.7);
  width: fit-content;
  animation: pulseGlow 2s infinite;
  max-width: 90%; /* avoid overflow */
  word-wrap: break-word;
}

@keyframes pulseGlow {
  0%   { box-shadow: 0 0 20px rgba(255,215,0,0.8), 0 0 40px rgba(255,165,0,0.6); }
  50%  { box-shadow: 0 0 35px rgba(255,215,0,1), 0 0 70px rgba(255,215,100,0.9); }
  100% { box-shadow: 0 0 20px rgba(255,215,0,0.8), 0 0 40px rgba(255,165,0,0.6); }
}

/* --- Responsive Tweaks --- */
@media (min-width:768px) {
  .latest-result-box {
    font-size: 3vw;
    padding: 2vw 4vw;
  }
}
@media (min-width:1200px) {
  .latest-result-box {
    font-size: 2vw;
    padding: 20px 40px;
  }
}