:root {
  color-scheme: light;
}
html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
}
body {
  background: repeating-conic-gradient(
    from 0deg at 50% 30%,
    #1d4fe0 0 10deg,
    #2b62ff 10deg 20deg
  );
  color: #000;
  font:
    15px/1.4 "Comic Sans MS",
    "Comic Sans",
    cursive;
  text-align: center;
}
.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 12px 40px;
}
.winner {
  margin: 0;
  color: #ff0;
  font:
    bold 48px/1 Impact,
    "Arial Black",
    sans-serif;
  letter-spacing: 1px;
  text-shadow:
    3px 3px 0 #e00,
    -2px -2px 0 #000;
  animation: blink 1s steps(1) infinite;
}
.sub {
  margin: 10px 0 16px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 2px 2px 0 #000;
}
.box {
  margin: 0 0 16px;
  padding: 14px;
  border: 5px dashed #f00;
  background: #ff0;
}
.box h2 {
  margin: 0 0 8px;
  color: #e00;
  font-size: 22px;
}
.box ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: bold;
}
.claim {
  display: inline-block;
  margin: 4px 0 14px;
  padding: 12px 26px;
  border: 4px outset #6f6;
  background: linear-gradient(#5f5, #0a0);
  color: #fff;
  font:
    bold 26px/1 Impact,
    "Arial Black",
    sans-serif;
  text-decoration: none;
  text-shadow: 2px 2px 0 #060;
}
.claim:visited {
  color: #fff;
}
.timer {
  margin: 0 0 16px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 2px 2px 0 #000;
}
.timer b {
  color: #ff0;
}
.small-print {
  margin: 0;
  color: #bcd0ff;
  font:
    9px/1.3 Arial,
    sans-serif;
}
.small-print a {
  color: #fff;
}

.popup {
  position: fixed;
  z-index: 10;
  width: 220px;
  border: 1px solid #0831d9;
  border-radius: 6px 6px 0 0;
  background: #ece9d8;
  box-shadow: 3px 3px 10px rgb(0 0 0 / 0.5);
  font:
    12px/1.3 Tahoma,
    Verdana,
    sans-serif;
  text-align: left;
  pointer-events: none;
}
.popup .bar {
  display: flex;
  justify-content: space-between;
  padding: 3px 4px 3px 7px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(#0a5fe6, #0540c2);
  color: #fff;
  font-weight: bold;
}
.popup .x {
  width: 16px;
  height: 16px;
  border: 1px solid #fff;
  border-radius: 3px;
  background: #e0532f;
  line-height: 14px;
  text-align: center;
}
.popup p {
  margin: 12px 12px 8px;
}
.popup .ok {
  display: block;
  width: 70px;
  margin: 0 auto 10px;
  padding: 2px 0;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: #f5f4ee;
  text-align: center;
}
.popup.eerie {
  z-index: 11;
  background: #000;
  color: #ccc;
  text-decoration: none;
  pointer-events: auto;
}
.popup.eerie .bar {
  background: #222;
  color: #888;
}

@keyframes blink {
  50% {
    color: #fff;
  }
}
@media (prefers-reduced-motion: reduce) {
  .winner {
    animation: none;
  }
}