html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
  color: #ffff00;
  background: #000 url("assets/tile-bg.svg") repeat;
  cursor: crosshair;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 1px, transparent 1px, transparent 4px);
  z-index: 1;
}

.page-frame {
  position: relative;
  z-index: 2;
  width: 96%;
  margin: 16px auto;
  border: 8px ridge #ff00ff;
  background: rgba(0, 0, 80, 0.88);
  box-shadow: 0 0 30px #00ffff, inset 0 0 24px #ff00ff;
}

.topbar, .bottombar {
  background: linear-gradient(90deg, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000);
  color: #000;
  font-weight: bold;
  font-size: 24px;
  padding: 8px;
  text-shadow: 1px 1px #fff;
}

.sidebar {
  width: 190px;
  vertical-align: top;
  padding: 12px;
  background: rgba(50, 0, 80, 0.92);
  border-left: 4px groove #00ffff;
  border-right: 4px groove #00ffff;
}

.content {
  vertical-align: top;
  padding: 18px;
  text-align: center;
}

.titlebox {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  border: 6px double #00ff00;
  background: radial-gradient(circle, #330066, #000033);
  padding: 12px;
}

h1 {
  font-size: 74px;
  margin: 0;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 3px 3px #ff0000, 6px 6px #0000ff, 0 0 18px #00ffff;
  animation: wobble 1.2s infinite alternate;
}

h2, h3 { color: #00ffff; text-shadow: 2px 2px #ff00ff; }

.subtitle {
  font-size: 28px;
  color: #ff66ff;
  text-shadow: 0 0 12px #fff;
}

.rainbow {
  animation: rainbow 1s infinite linear;
}

.blink {
  animation: blink 0.55s steps(1, end) infinite;
}

.glow {
  color: #fff;
  animation: glow 1.1s infinite alternate;
}

.navbox, .counterbox, .pollbox, .downloadbox, .adbox {
  margin: 12px 0;
  padding: 10px;
  border: 4px outset #ffff00;
  background: #000080;
  text-align: center;
}

.navbox a {
  display: block;
  color: #00ff00;
  background: #330000;
  margin: 6px 0;
  padding: 5px;
  border: 2px outset #ff00ff;
  text-decoration: none;
  font-weight: bold;
}

.navbox a:hover {
  color: #000;
  background: #ffff00;
  transform: rotate(-2deg) scale(1.05);
}

.gif { max-width: 150px; display: block; margin: 10px auto; image-rendering: pixelated; }
.gif.wide { max-width: 170px; width: 170px; height: 32px; }
.tiny { width: 48px; height: 48px; image-rendering: pixelated; }

.counter {
  display: inline-block;
  color: #00ff00;
  background: #000;
  font-family: "Courier New", monospace;
  font-size: 24px;
  border: 3px inset #888;
  padding: 4px;
}

.badge-row { margin: 18px 0; }
.badge {
  display: inline-block;
  padding: 8px 12px;
  margin: 6px;
  color: #000;
  border: 4px outset #fff;
  font-weight: bold;
  transform: rotate(-3deg);
}
.badge.hot { background: #ff0000; color: #fff; }
.badge.wow { background: #00ff00; }
.badge.cool { background: #00ffff; }
.smallnote { font-size: 12px; color: #ccc; }

.panel {
  margin: 18px auto;
  padding: 14px;
  max-width: 760px;
  border: 5px ridge #00ffff;
  background: rgba(0, 0, 0, 0.66);
  text-align: left;
  box-shadow: 0 0 12px #ff00ff;
}

.panel h2 { text-align: center; }
.checklist li { margin: 8px 0; }
.checklist li::marker { content: "★ "; color: #ff00ff; }

.chaos { background: repeating-linear-gradient(45deg, #000033, #000033 10px, #330066 10px, #330066 20px); }

.award-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 10px;
}
.award {
  background: #ffff00;
  color: #000;
  border: 4px outset #ff00ff;
  padding: 10px;
  font-weight: bold;
  text-align: center;
}

.laser {
  border: 0;
  height: 12px;
  background: linear-gradient(90deg, transparent, #ff00ff, #00ffff, #ffff00, transparent);
  box-shadow: 0 0 20px #fff;
}

.email { color: #00ff00; text-decoration: underline; }
button {
  font-family: inherit;
  font-weight: bold;
  background: #ff00ff;
  color: #ffff00;
  border: 4px outset #00ffff;
  padding: 8px 14px;
}
button:active { border-style: inset; }
.footer { color: #ddd; font-size: 13px; text-align: center; }
.adbox { font-size: 20px; color: #ff0000; background: #ffff00; }

.sparkle {
  position: fixed;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  box-shadow: 0 0 8px #00ffff;
  animation: fadeOut 0.8s forwards;
}

@keyframes blink { 50% { opacity: 0; } }
@keyframes rainbow {
  0% { color: #ff0000; }
  20% { color: #ffff00; }
  40% { color: #00ff00; }
  60% { color: #00ffff; }
  80% { color: #ff00ff; }
  100% { color: #ff0000; }
}
@keyframes glow {
  from { text-shadow: 0 0 4px #fff, 0 0 8px #00ffff; }
  to { text-shadow: 0 0 12px #fff, 0 0 28px #ff00ff; }
}
@keyframes wobble {
  from { transform: skewX(-3deg) rotate(-1deg); }
  to { transform: skewX(3deg) rotate(1deg); }
}
@keyframes fadeOut {
  to { transform: translateY(-20px) scale(0); opacity: 0; }
}

@media (max-width: 850px) {
  .sidebar { display: block; width: auto; }
  .page-frame, .page-frame tbody, .page-frame tr, .page-frame td { display: block; width: auto; }
  h1 { font-size: 44px; }
  .award-grid { grid-template-columns: 1fr; }
}