@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');

/* NOTE: 'Algerian' is a proprietary Monotype/Microsoft font and can't be legally
   embedded/redistributed here. 'DrCrakkDisplay' below self-hosts "Rye" (Sorkin
   Type Co., SIL Open Font License — see fonts/OFL.txt), a similarly chunky
   decorative slab font, so titles look the same for every visitor regardless
   of what's installed on their system. */
@font-face {
  font-family: 'DrCrakkDisplay';
  src: url('fonts/Rye-Regular.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: swap;
}

.section-heading {
  font-family: 'DrCrakkDisplay','Copperplate Gothic Bold','Copperplate','Palatino Linotype',Georgia,serif;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: normal;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

#top, .panel, .disclaimer-panel { scroll-margin-top: 14px; }

body {
  background-color: #000;
  color: #00ff00;
  font-family: 'Comic Neue','Comic Sans MS',cursive;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse at 20% 20%, #1a004a 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, #004a00 0%, transparent 50%);
}

#starfield {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

.page-wrap {
  position: relative; z-index: 1;
  max-width: 820px; margin: 0 auto; padding: 10px;
}

/* ── ANIMATIONS ── */
@keyframes rainbow {
  0%{color:#ff0000}12%{color:#ff7700}25%{color:#ffff00}
  37%{color:#00ff00}50%{color:#00ffff}62%{color:#0055ff}
  75%{color:#ff00ff}87%{color:#ff0099}100%{color:#ff0000}
}
@keyframes blink    { 50%{opacity:0} }
@keyframes spin     { from{transform:rotate(0deg)}    to{transform:rotate(360deg)}   }
@keyframes spinrev  { from{transform:rotate(0deg)}    to{transform:rotate(-360deg)}  }
@keyframes bounce   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes wobble   { 0%,100%{transform:rotate(-10deg)} 50%{transform:rotate(10deg)} }
@keyframes pulse    { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.12)} }
@keyframes shake    { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
@keyframes shimmer  { from{background-position:0%} to{background-position:200%} }
@keyframes flashbtn { 0%{opacity:1} 50%{opacity:.4} 100%{opacity:1} }
@keyframes hue      { from{filter:hue-rotate(0deg)} to{filter:hue-rotate(360deg)} }
@keyframes crackgrow{ from{stroke-width:1} to{stroke-width:3.5} }
@keyframes floatup  { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-8px) rotate(5deg)} }
@keyframes scrollleft { from{transform:translateX(820px)} to{transform:translateX(-100%)} }
@keyframes disclaimerpulse {
  0%,100%{border-color:#ff0000;box-shadow:0 0 10px #ff0000}
  50%{border-color:#ff6600;box-shadow:0 0 30px #ff6600}
}

.spin-anim    { animation: spin    2s linear infinite;       transform-origin: center; display: inline-block; }
.spinrev-anim { animation: spinrev 3s linear infinite;       transform-origin: center; display: inline-block; }
.bounce-anim  { animation: bounce  1s ease-in-out infinite;  display: inline-block; }
.wobble-anim  { animation: wobble  0.7s ease-in-out infinite; display: inline-block; }
.pulse-anim   { animation: pulse   0.9s ease-in-out infinite; display: inline-block; }
.shake-anim   { animation: shake   0.35s linear infinite;    display: inline-block; }
.hue-anim     { animation: hue     3s linear infinite; }
.float-anim   { animation: floatup 2s ease-in-out infinite;  display: inline-block; }
.crack-grow   { animation: crackgrow 3s ease-in-out infinite alternate; transform-origin: 20px 80px; }

/* ── HEADER ── */
.site-header {
  text-align: center; padding: 20px 10px 14px;
  border: 6px solid #ff00ff;
  background: linear-gradient(180deg, #22006a, #000055, #001100);
  margin-bottom: 10px;
  box-shadow: 0 0 30px #ff00ff, 0 0 60px #ff00ff;
}
.site-header h1 {
  font-size: 2.6em; margin: 0;
  text-shadow: 0 0 10px #fff, 3px 3px 0 #ff0000, -1px -1px 0 #ff00ff;
  animation: rainbow 0.9s linear infinite; line-height: 1.1;
  font-family: 'DrCrakkDisplay','Copperplate Gothic Bold','Copperplate',Georgia,serif;
  letter-spacing: 0.06em; font-weight: normal;
}
.site-header .subtitle {
  font-size: 1.2em; color: #ffff00; margin: 8px 0 0;
  animation: blink .6s step-end infinite; text-shadow: 0 0 8px #ffff00;
}
.site-header .tagline { font-size: .9em; color: #ff00ff; margin-top: 6px; text-shadow: 0 0 6px #ff00ff; }

/* ── VISITOR BAR ── */
.visitor-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(90deg,#110044,#004400,#440000);
  border: 3px solid #ffff00; padding: 6px 14px; margin-bottom: 10px;
  font-size: .8em; color: #ffff00; box-shadow: 0 0 12px #ffff00;
}
.hit-counter {
  font-family: monospace; font-size: 1.6em; color: #00ff00;
  letter-spacing: 4px; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
  background: #000; padding: 2px 8px; border: 2px solid #00ff00;
}

/* ── PANELS ── */
.panel { border: 4px solid; padding: 14px 16px; margin-bottom: 14px; }
.panel-magenta { border-color:#ff00ff; background:linear-gradient(135deg,#1a0030,#000033); box-shadow:0 0 14px #ff00ff; }
.panel-lime    { border-color:#00ff00; background:linear-gradient(135deg,#001800,#001133); box-shadow:0 0 14px #00ff00; }
.panel-orange  { border-color:#ff6600; background:linear-gradient(135deg,#1a0900,#110022); box-shadow:0 0 14px #ff6600; }
.panel-cyan    { border-color:#00ffff; background:linear-gradient(135deg,#001a1a,#001133); box-shadow:0 0 14px #00ffff; }
.panel-pink    { border-color:#ff0099; background:linear-gradient(135deg,#1e0015,#000033); box-shadow:0 0 14px #ff0099; }
.panel-yellow  { border-color:#ffff00; background:linear-gradient(135deg,#1a1a00,#001133); box-shadow:0 0 14px #ffff00; }
.panel-red     { border-color:#ff0000; background:linear-gradient(135deg,#220000,#110011); box-shadow:0 0 14px #ff0000; }
.panel h2      { margin: 0 0 10px; font-size: 1.45em; text-align: center; }
.panel p, .panel li { font-size: .9em; line-height: 1.6; margin: 5px 0; }
.panel ul { padding-left: 22px; }

/* ── DISCLAIMER ── */
.disclaimer-panel {
  border: 6px dashed #ff0000;
  background: repeating-linear-gradient(135deg,#200000,#200000 8px,#140000 8px,#140000 16px);
  padding: 16px; margin-bottom: 16px;
  animation: disclaimerpulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 20px #ff0000;
}
.disclaimer-panel h2 { font-size:1.6em; text-align:center; margin:0 0 12px; animation:rainbow .7s linear infinite; }
.disclaimer-panel p  { font-size:.84em; line-height:1.6; color:#ffbb00; }
.disclaimer-panel .legalese {
  font-size:.72em; color:#ff8888; border:2px solid #ff3300;
  padding:8px; margin-top:10px; background:#0a0000; line-height:1.6;
}

/* ── BUTTONS ── */
.flashbtn {
  display: inline-block; padding: 8px 16px; font-family: 'Comic Neue',cursive;
  font-weight: bold; font-size: .9em; border: 3px solid; cursor: pointer;
  animation: flashbtn .45s step-end infinite; text-shadow: 0 0 6px currentColor;
  text-decoration: none; text-align: center;
}
.btn-row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:12px 0; }
.fb1{background:#ff00ff;color:#ffff00;border-color:#00ff00;box-shadow:0 0 10px #ff00ff}
.fb2{background:#00ff00;color:#000000;border-color:#ffff00;box-shadow:0 0 10px #00ff00}
.fb3{background:#ff6600;color:#ffffff;border-color:#ffff00;box-shadow:0 0 10px #ff6600}
.fb4{background:#ff0099;color:#ffff00;border-color:#00ffff;box-shadow:0 0 10px #ff0099}
.fb5{background:#ffff00;color:#000000;border-color:#ff0000;box-shadow:0 0 10px #ffff00}

/* ── MARQUEES ── */
.marquee-box {
  background: linear-gradient(90deg,#0a0022,#001100,#220000);
  border: 3px solid #00ffff; overflow: hidden; white-space: nowrap;
  padding: 5px 0; margin: 10px 0; box-shadow: 0 0 10px #00ffff;
}
.marquee-inner  { display:inline-block; animation:scrollleft 16s linear infinite; color:#ffff00; font-size:.9em; font-weight:bold; text-shadow:0 0 6px #ffff00; }
.marquee-inner2 { display:inline-block; animation:scrollleft 20s linear infinite reverse; color:#ff00ff; font-size:.9em; font-weight:bold; text-shadow:0 0 6px #ff00ff; }

/* ── TABLES ── */
.retro-table { width:100%; border-collapse:collapse; font-size:.82em; }
.retro-table th { background:#ff00ff; color:#ffff00; padding:6px 8px; border:2px solid #ffff00; text-shadow:0 0 4px #000; }
.retro-table td { padding:5px 8px; border:2px solid #00ff00; color:#00ff00; background:#000; vertical-align:top; }
.retro-table tr:nth-child(even) td { background:#050520; }

/* ── LAYOUT ── */
.two-col { display:flex; gap:12px; margin-bottom:14px; }
.col-left  { flex:1.4; }
.col-right { flex:1; }

/* ── NEON TEXT ── */
.neon-pink   { color:#ff44ff; text-shadow:0 0 8px #ff00ff, 0 0 16px #ff00ff; }
.neon-green  { color:#44ff44; text-shadow:0 0 8px #00ff00, 0 0 16px #00ff00; }
.neon-yellow { color:#ffff44; text-shadow:0 0 8px #ffff00, 0 0 16px #ffff00; }
.neon-cyan   { color:#44ffff; text-shadow:0 0 8px #00ffff, 0 0 16px #00ffff; }
.neon-orange { color:#ff8800; text-shadow:0 0 8px #ff6600, 0 0 16px #ff6600; }
.neon-red    { color:#ff4444; text-shadow:0 0 10px #ff0000, 0 0 20px #ff0000; }

/* ── BADGES ── */
.badge { display:inline-block; padding:2px 8px; font-size:.72em; font-weight:bold; border:2px solid; }
.badge-new { background:#ff0000; color:#ffff00; border-color:#ffff00; animation:blink .4s step-end infinite; }
.badge-hot { background:#ff6600; color:#ffffff; border-color:#ffff00; }

/* ── DIVIDERS ── */
hr.retro { border:none; border-top:4px dashed #ff00ff; margin:12px 0; box-shadow:0 0 6px #ff00ff; }
.divider { text-align:center; font-size:1.3em; color:#ff00ff; margin:10px 0; animation:blink 1s step-end infinite; text-shadow:0 0 8px #ff00ff; }
.rainbow-hr {
  height:5px; border:none; margin:12px 0;
  background:linear-gradient(90deg,#ff0000,#ff7700,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0099);
  background-size:200%; animation:shimmer 1.5s linear infinite;
  box-shadow:0 0 8px rgba(255,255,255,.5);
}

/* ── UNDER CONSTRUCTION ── */
.under-construction {
  text-align:center; color:#00eeff; font-weight:bold; font-size:1.1em;
  padding:10px; animation:blink .5s step-end infinite; margin:10px 0;
  border:4px solid #00eeff; text-shadow:0 0 12px #00eeff, 0 0 24px #0099ff;
  box-shadow:0 0 16px #00eeff; background:#000011;
}

/* ── WARNING STRIPE ── */
.warning-stripe {
  background:repeating-linear-gradient(45deg,#ffff00,#ffff00 8px,#000 8px,#000 16px);
  height:12px; width:100%; margin:8px 0;
}

/* ── GIF ROW ── */
.gif-row {
  display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap; margin:12px 0; padding:8px 0;
}
.gif-label { font-size:.62em; color:#ff44ff; text-align:center; display:block; margin-top:3px; text-shadow:0 0 4px #ff00ff; }

/* ── UPLOADED IMAGE TRANSPARENCY ── */
.uploaded-img        { background:transparent !important; mix-blend-mode:screen; }
.uploaded-img-normal { background:transparent !important; }

/* ── NETSCAPE ROW ── */
.netscape-row {
  display:flex; align-items:center; justify-content:center;
  gap:16px; flex-wrap:wrap; margin:12px 0; padding:10px;
  border:3px solid #00ffff;
  background:linear-gradient(90deg,#000033,#001100,#000033);
  box-shadow:0 0 14px #00ffff;
}
.netscape-text {
  font-family:'DrCrakkDisplay','Copperplate Gothic Bold','Copperplate',Georgia,serif;
  font-size:1.3em; letter-spacing:0.08em; font-weight:normal;
  animation:rainbow 1s linear infinite; text-shadow:0 0 10px #fff;
}
.screen-info {
  font-size:.82em; color:#00ffff; text-align:center;
  text-shadow:0 0 8px #00ffff; font-weight:bold;
  animation:blink 1.2s step-end infinite;
}

/* ── SIDE DECORATIONS ── */
.side-deco {
  position:fixed; top:50%; transform:translateY(-50%);
  z-index:2; display:flex; flex-direction:column; gap:14px; align-items:center;
}
.side-deco-left  { left:4px; }
.side-deco-right { right:4px; }
@media(max-width:900px){ .side-deco{display:none} }

/* ── AWARDS ── */
.awards { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:12px 0; }
.award-badge { border:3px solid; padding:8px 12px; text-align:center; font-size:.72em; width:110px; }
.award-badge .aw-icon { font-size:2em; display:block; margin-bottom:4px; }
.ab1{border-color:#ff00ff;color:#ff00ff;box-shadow:0 0 8px #ff00ff}
.ab2{border-color:#ffff00;color:#ffff00;box-shadow:0 0 8px #ffff00}
.ab3{border-color:#00ff00;color:#00ff00;box-shadow:0 0 8px #00ff00}

/* ── GUESTBOOK ── */
.guestbook-entry { border-left:5px solid; padding:7px 12px; margin-bottom:10px; font-size:.84em; }
.gb1{border-color:#ff00ff;background:#0a0015}
.gb2{border-color:#00ff00;background:#001500}
.gb3{border-color:#ff6600;background:#150800}

/* ── FOOTER ── */
.site-footer {
  border:4px solid #ff6600; background:linear-gradient(135deg,#150000,#000033);
  text-align:center; padding:14px; margin-top:14px; font-size:.82em; color:#ff6600;
  box-shadow:0 0 20px #ff6600;
}
.footer-nav a { color:#ffff44; text-decoration:none; }
.footer-nav a:visited { color:#dd88ff; }
.footer-nav a:hover { color:#fff; text-decoration:underline; text-shadow:0 0 6px #ffff00; }

/* ── NET SECTION BOX ── */
.netsection-box {
  border:3px solid #ff6600; padding:12px; margin-top:12px;
  background:linear-gradient(135deg,#0e0400,#000022);
  box-shadow:0 0 12px #ff6600;
}