body {
  margin: 0;
  padding: 0;
  color: #00ff00;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  background-color: #000080;
  background-image: url("/static/butterbean.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: auto 80vh;
  cursor: crosshair;
  overflow-x: clip;
}

html { overflow-x: clip; }

a { color: #ffff00; font-weight: bold; }
a:visited { color: #ff00ff; }
a:hover { color: #ff0000; background: #00ffff; }

.ticker {
  background: #ff0000;
  color: #ffff00;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 22px;
  border-top: 4px ridge #c0c0c0;
  border-bottom: 4px ridge #c0c0c0;
}

.wordart {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(48px, 11vw, 110px);
  line-height: 0.9;
  margin: 20px 0 10px;
  background: linear-gradient(180deg, #fff200 0%, #ff8c00 45%, #ff0000 70%, #8b0000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: perspective(300px) rotateX(18deg) skewX(-8deg);
  filter: drop-shadow(4px 4px 0 #0000ff) drop-shadow(-2px -2px 0 #00ff00);
  animation: wobble 2.5s ease-in-out infinite;
}

@keyframes wobble {
  0%, 100% { transform: perspective(300px) rotateX(18deg) skewX(-8deg) rotate(-2deg); }
  50% { transform: perspective(300px) rotateX(18deg) skewX(8deg) rotate(2deg); }
}

.subtitle {
  font-family: "Courier New", monospace;
  font-weight: bold;
  color: #00ffff;
  background: #000;
  display: table;
  padding: 2px 10px;
  margin: 0 auto 16px;
}

.join {
  margin: 0 16px 20px;
  max-width: calc(100% - 32px);
  font-size: 15px;
}

.construction {
  display: table;
  margin: 0 auto;
  padding: 6px 16px;
  font-family: "Arial Black", Impact, sans-serif;
  color: #000;
  background: repeating-linear-gradient(45deg, #ffcc00 0 18px, #000 18px 36px);
  border: 3px outset #fff;
  text-shadow: 0 0 4px #ffcc00, 0 0 4px #ffcc00, 0 0 4px #ffcc00;
}

.blink { animation: blink 0.8s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

.bevel {
  background: #c0c0c0;
  border-color: #ffffff #404040 #404040 #ffffff;
  border-style: outset;
  color: #000;
}

.hotrod { position: relative; }
.hotrod > :not(.flame) { position: relative; z-index: 1; }

.title-rod {
  display: table;
  margin: 0 auto;
}

.quote-rod {
  width: min(640px, calc(100% - 32px));
  margin: 30px auto;
}

.quote-box {
  width: 100%;
  background: rgba(192, 192, 192, 0.55);
}

/* The flames' base tucks 20px behind the box so they look like they come out of
   it, and they shrink to the space beside the box so the page never gets wider
   than the window. */
.flame {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: min(300px, calc(50vw - 50% + 12px));
  animation: flicker 0.25s ease-in-out infinite alternate;
}
.flame-right { left: calc(100% - 20px); }
.flame-left { right: calc(100% - 20px); transform: scaleX(-1); }

@keyframes flicker {
  to { scale: 1.07 0.95; }
}

.quote-box th {
  font-family: Impact, sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
}

.rainbow {
  background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, magenta, red);
  background-size: 200% 100%;
  animation: rainbow 2s linear infinite;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
}
@keyframes rainbow { to { background-position: 200% 0; } }

.winner-nick {
  font-family: Impact, sans-serif;
  font-size: clamp(40px, 9vw, 80px);
  margin: 10px 0;
  color: #fff200;
  animation: flames 0.3s ease-in-out infinite alternate;
  word-break: break-all;
}

@keyframes flames {
  from {
    text-shadow: 0 0 4px #fff, 0 -4px 6px #ff0, 2px -10px 12px #f80, -2px -18px 20px #f00, 0 -26px 30px #800;
  }
  to {
    text-shadow: 0 0 4px #fff, 1px -6px 8px #ff0, -3px -14px 14px #f80, 3px -22px 22px #f00, 0 -32px 34px #800;
  }
}

.winner-stats {
  font-family: "Times New Roman", serif;
  font-style: italic;
  font-size: 20px;
  color: #ff00ff;
  background: #00ff00;
  display: inline-block;
  padding: 2px 8px;
}

.quotes {
  list-style: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14'><text y='12' font-size='12'>🔥</text></svg>");
  text-align: left;
  font-family: "Courier New", monospace;
  color: #000080;
  background: #ffffcc;
  border: 2px inset #808080;
  padding: 10px 10px 10px 34px;
  margin: 16px 0 0;
  overflow-wrap: anywhere;
}

.quotes li { margin: 6px 0; }

.loading, .error {
  font-family: "Courier New", monospace;
  color: #ff0000;
  font-weight: bold;
}

.rainbow-hr {
  height: 8px;
  border: 0;
  width: 80%;
  background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, magenta);
}

.papyrus {
  font-family: Papyrus, fantasy;
  font-size: 20px;
  color: #ffffff;
  text-shadow: 2px 2px 0 #ff00ff;
}

.counter {
  display: inline-block;
  width: 22px;
  margin: 0 1px;
  background: #000;
  color: #ff0000;
  font-family: "Courier New", monospace;
  font-weight: bold;
  border: 2px inset #808080;
}

.webring { margin: 20px 16px; font-size: 14px; }
.webring td { padding: 4px 10px; }
.webring a { color: #0000ee; }

.small {
  font-size: 11px;
  color: #c0c0c0;
  font-family: "Times New Roman", serif;
}

.flame-floor {
  height: 220px;
  margin-top: -60px;
  background: url("/static/flames-up.svg") repeat-x bottom / 150px 100%;
  transform-origin: bottom;
  animation: roar 0.35s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes roar {
  to { scale: 1 1.08; }
}

.spark {
  position: fixed;
  pointer-events: none;
  font-size: 18px;
  z-index: 20;
  animation: spark 0.9s ease-out forwards;
}

@keyframes spark {
  to { transform: translateY(-50px) scale(0.3) rotate(90deg); opacity: 0; }
}