body {
  background:#f8fafc;
  font-family:'Rubik',sans-serif;
  margin:0;
}
.floating-navbar {
  position: sticky;
  top: 0;
  width: 100%;
  background: #232433;
  z-index: 99;
  box-shadow: 0 5px 22px #232a3255;
  border-radius: 0 0 20px 20px;
}
.fnav-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 0 5px 0;
  max-width: 420px;
  margin: 0 auto;
}
.fnav-logo { margin-bottom: 10px; }
.fnav-logo img {
  height: 54px; max-width: 172px;
  display: block; object-fit: contain;
  filter: drop-shadow(0 3px 9px #5553);
}
.fnav-menu {
  display: flex; justify-content: center; gap: 16px;
}
.fnav-link {
  background: #fed300;
  color: #232433;
  font-weight: 700;
  font-family: 'Rubik',sans-serif;
  padding: 8px 23px;
  text-decoration: none;
  border-radius: 28px;
  box-shadow: 0 2px 7px #fed30022;
  transition: background 0.17s, color 0.14s, box-shadow 0.17s;
  font-size: 1.08em; position: relative; border:none; outline:none;
}
.fnav-link.fnav-active, .fnav-link:hover {
  background: #232433;
  color: #fed300;
  box-shadow: 0 2px 18px #fed30066;
  outline: 2.5px solid #fed300;
  z-index:1;
}
.main {
  max-width: 650px;
  margin:40px auto 0;
  background:#fff;
  border-radius:16px;
  box-shadow:0 5px 25px #2222;
}
.header {background:#fff; padding:0;text-align:center;}
.logo img{height:60px; margin:0 auto; display:block;}
.countdown{padding:28px 0 32px; background:#fffbe4; border-radius:17px; margin:0 5%; border-bottom:1px solid #eee; text-align:center;}
.countdown h2{margin:0 0 7px 0;font-size: 1.7em;letter-spacing: 0.02em;}
#timer {
  font-size:2.3em;
  font-weight:700;
  color:#db3e00;
  background: #ffe588;
  border-radius: 16px;
  margin:24px auto 11px;
  padding:10px 49px;
  display:inline-block;
  box-shadow:0 2px 10px #fed30011;
}
.live-results{min-height:160px; margin: 0 5%; padding-bottom:22px;}
.live-results h3{margin: 29px 0 10px 2px;}
table{width:100%;border-collapse:collapse;background:#fff; border-radius:14px;}
th,td{padding:8px 0;text-align:center;font-size:1em;}
th{background:#fed30022;color:#223;border-bottom:2px solid #fed300;}
tr.highlight{background:#ffefb3;}
tr:nth-child(even){background:#f8f6e2;}
.play-btn{
  background:#fed300;
  color:#232433;
  font-weight:700;
  border-radius:12px;
  padding:16px 0;
  border:none;
  width: 90%;
  max-width:340px;
  margin:17px auto 32px auto;
  display:block;
  font-size:1.12em;
  cursor:pointer;
  transition: background 0.16s, box-shadow 0.15s;
  box-shadow:0 2px 14px #fed30033;
}
.play-btn:hover{
  background:#232433;color:#fed300;
}
.footer{
  color:#cacaca;
  background:#232433;
  text-align:center;
  padding:20px 10px;
  border-radius:0 0 16px 16px;
  font-size:14px;
  box-shadow:0 -2px 10px #232a3255;
  margin-top:27px;
}
.history-container {
  max-width: 650px;
  margin: 36px auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 5px 25px #2222;
  padding: 38px 16px 28px;
}
.pagination {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: 24px 0 0 0;
  flex-wrap: wrap;
}
.pagination .link, .pagination .active, .pagination .disabled {
  display:inline-block;
  min-width:32px;
  text-align:center;
  padding:7px 0;
  font-weight:600;
  margin: 0 2px;
  border-radius:7px;
  text-decoration:none;
  box-shadow:none;
  font-size:1rem;
  vertical-align:middle;
  transition:background 0.16s,color 0.12s;
  border: 2px solid transparent;
}
.pagination .link {
  background: #fffbe4;
  color: #222;
  border: 2px solid #fed300;
}
.pagination .link:hover {
  background: #fed300;
  color: #222;
}
.pagination .active {
  background: #fed300;
  color: #222;
  border: 2px solid #f3c000;
  pointer-events:none;
}
.pagination .disabled {
  background: #f8fafc;
  color: #aaa;
  border: 2px solid #ececec;
  cursor:not-allowed;
}
@media (max-width:700px) {
  .fnav-container {max-width: 98vw; padding:16px 2vw 2px;}
  .fnav-logo img {height:37px; max-width:120px;}
  .fnav-link {padding:7px 11px; font-size:1em;}
  .floating-navbar {border-radius:0 0 13px 13px;}
  .fnav-menu {gap:8px;}
  .main, .history-container {border-radius: 13px;}
  #timer {padding:8px 20px;}
}
@media (max-width:540px) {
  .main, .history-container {margin:15px 2vw;}
  .countdown {margin:0;}
  .live-results {margin: 0;}
}
.drawbox {
  background: #fffbe4;
  margin: 36px auto 30px auto;
  border-radius: 17px;
  box-shadow: 0 3px 24px #fed30022;
  padding: 35px 10px 23px 10px;
  max-width: 360px;
  text-align: center;
}
.drawbox h2 {
  margin:0 0 15px 0;
  font-size: 1.34em;
  font-weight: 700;
  letter-spacing:0.02em;
  color:#232433;
}
.draw-status {
  display: inline-block;
  background: #232d46;
  color: #fff;
  font-size: 1.02em;
  padding:4px 17px;
  border-radius: 10px;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing:0.04em;
  margin-top:-4px;
}
.draw-period {
  margin: 16px 0 10px 0;
  color: #10a2e7;
  font-size: 1.14em;
  font-weight: 700;
  letter-spacing:0.04em;
}
.draw-timer {
  margin: 21px 0 20px 0;
  font-size: 2.36em;
  font-family: 'Rubik', monospace, sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #232433;
}
.draw-winning {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 17px 0 11px 0;
}
.circle {
  width: 42px; height:42px; background:#ffe588;
  font-size: 1.5em; color:#b7b059;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  font-weight:600;
  border:2px solid #eee18b;
  box-shadow: 0 1px 7px #fed30011;
}
.draw-date {
  color: #333a; 
  font-size: 1em;
  margin-top: 11px;
}
@media (max-width: 540px) {
  .drawbox {max-width:96vw;padding:29px 3vw;}
  .circle {width:32px;height:32px;font-size:1.12em;}
  .draw-timer {font-size:1.45em;}
}