/* ==========================================================================
   OpportunisticBastard.Com — stylesheet
   Aesthetic target: GeoCities, 2001, dial-up, a man shouting.
   Yes the colours are wrong. That is the point. Do not "fix" them.
   ========================================================================== */

/* No webfonts. It's 2001 — you use what's on the machine. */

:root {
  --hazard-yellow: #ffe600;
  --shout-red: #ff0033;
  --acid: #00ff66;
  --hot-pink: #ff00cc;
  --panel: #1a0033;
  --panel-2: #2b0052;
  --ink: #ffffff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  /* The obligatory tiled starfield, generated so we ship no binaries */
  background-color: #0a0018;
  background-image:
    radial-gradient(circle at 12px 18px, #fff 0.9px, transparent 1.2px),
    radial-gradient(circle at 48px 62px, #ffe600 1.1px, transparent 1.4px),
    radial-gradient(circle at 78px 26px, #00ffee 0.8px, transparent 1.1px),
    radial-gradient(circle at 30px 96px, #ff00cc 1px, transparent 1.3px),
    linear-gradient(160deg, #0a0018 0%, #17002e 50%, #060010 100%);
  background-size: 110px 110px, 110px 110px, 110px 110px, 110px 110px, auto;
  background-attachment: fixed;
}

/* ---------- Layout tables (it's 2001, this is correct) ---------- */
table.layout { border-collapse: collapse; }
td.sidebar { width: 210px; }
td.content { border-left: 3px ridge var(--hot-pink); border-right: 3px ridge var(--hot-pink); }

@media (max-width: 900px) {
  table.layout, table.layout tbody, table.layout tr, table.layout td { display: block; width: 100% !important; }
  td.content { border-left: 0; border-right: 0; }
  td.sidebar { width: 100%; }
  .hdr-side { display: none !important; }
}

/* ---------- Construction banner ---------- */
#construction-top {
  background: repeating-linear-gradient(45deg, #000 0 18px, var(--hazard-yellow) 18px 36px);
  color: #000;
  font-weight: 700;
  padding: 6px 0;
  border-bottom: 4px double #000;
}
#construction-top marquee {
  background: var(--hazard-yellow);
  padding: 4px 0;
  font-family: Impact, "Haettenschweiler", "Arial Black", sans-serif;
  letter-spacing: 0.5px;
}

/* ---------- Header / WordArt ---------- */
header {
  padding: 14px 6px 18px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,0,204,0.35), transparent 60%),
    linear-gradient(#2b0052, #12002a);
  border-bottom: 6px ridge var(--acid);
  text-align: center;
}
.hdr-side { width: 90px; font-size: 34px; line-height: 1.4; }

.wordart {
  margin: 0;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(34px, 8.5vw, 92px);
  line-height: 0.9;
  letter-spacing: 1px;
  color: var(--hazard-yellow);
  -webkit-text-stroke: 2px #000;
  text-shadow:
    3px 3px 0 var(--shout-red),
    6px 6px 0 #000,
    0 0 26px rgba(255,230,0,0.75);
  transform: skewY(-3deg);
  animation: wobble 2.6s ease-in-out infinite;
}
.wordart-2 {
  color: var(--acid);
  text-shadow: 3px 3px 0 var(--hot-pink), 6px 6px 0 #000, 0 0 30px rgba(0,255,102,0.8);
}
.dotcom {
  display: block;
  font-size: 0.32em;
  color: #fff;
  letter-spacing: 8px;
  text-shadow: 2px 2px 0 #000;
}

@keyframes wobble {
  0%, 100% { transform: skewY(-3deg) rotate(-1deg) scale(1); }
  50%      { transform: skewY(-3deg) rotate(1deg) scale(1.02); }
}

.tagline {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(12px, 2.4vw, 20px);
  color: var(--shout-red);
  background: #000;
  display: inline-block;
  padding: 5px 12px;
  border: 3px outset var(--shout-red);
  margin: 14px 0 8px;
}
.subtag { margin: 4px 0 0; font-size: 14px; }

/* ---------- Nav ---------- */
#navbar {
  background: linear-gradient(#00ffee, #0088aa);
  border-top: 3px outset #fff;
  border-bottom: 3px outset #fff;
  text-align: center;
  padding: 8px 4px;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  color: #002;
  position: sticky;
  top: 0;
  z-index: 40;
}
#navbar a {
  color: #000080;
  text-decoration: underline;
  padding: 2px 4px;
  display: inline-block;
}
#navbar a:hover {
  background: var(--hazard-yellow);
  color: var(--shout-red);
  transform: scale(1.15) rotate(-2deg);
}

/* ---------- Ticker ---------- */
#ticker {
  background: #000;
  color: var(--acid);
  border-bottom: 3px double var(--acid);
  font-family: "Courier New", monospace;
  font-weight: 700;
  padding: 5px 0;
  font-size: 14px;
}

/* ---------- Boxes (sidebar widgets) ---------- */
.box {
  background: linear-gradient(#2b0052, #14002b);
  border: 4px ridge var(--hot-pink);
  margin: 0 0 12px;
  padding: 8px;
  text-align: center;
}
.box-alert { border-color: var(--shout-red); background: linear-gradient(#3a0010, #1a0008); }
.box a { color: #66ffff; }
.box a:visited { color: var(--hazard-yellow); }
.box h3 {
  margin: 0 0 8px;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--hazard-yellow);
  text-shadow: 2px 2px 0 #000;
  border-bottom: 2px dashed var(--acid);
  padding-bottom: 4px;
}

/* ---------- Counters ---------- */
.counter {
  font-family: "Courier New", monospace;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--acid);
  background: #000;
  border: 3px inset #666;
  padding: 5px 2px;
  display: block;
}
.counter-red { color: var(--shout-red); }

/* ---------- Badges / awards ---------- */
.badge-stack { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.badge {
  display: inline-block;
  background: linear-gradient(#c0c0c0, #7a7a7a);
  color: #000;
  border: 2px outset #fff;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  padding: 4px 6px;
  text-align: center;
}
.badge-alt { background: linear-gradient(var(--hazard-yellow), #b39b00); }
.award { margin: 6px 0; font-size: 13px; }
.pet { font-size: 40px; margin: 4px 0; animation: wobble 1.8s ease-in-out infinite; }

/* ---------- Panels ---------- */
.panel {
  /* the sticky navbar is 44-odd pixels of shouting; keep anchors clear of it */
  scroll-margin-top: 56px;
  background: rgba(10, 0, 30, 0.78);
  border: 4px ridge var(--acid);
  padding: 14px;
  margin: 0 0 16px;
}
.panel-loud { border-color: var(--hazard-yellow); background: rgba(30, 0, 10, 0.82); }
.panel h2 {
  margin: 0 0 12px;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(20px, 4vw, 32px);
  letter-spacing: 1px;
  color: var(--hazard-yellow);
  text-shadow: 3px 3px 0 var(--shout-red), 5px 5px 0 #000;
  text-align: center;
  border-bottom: 4px double var(--hot-pink);
  padding-bottom: 8px;
}
.panel p { margin: 10px 0; }
.panel a { color: #66ffff; }
.panel a:visited { color: var(--hot-pink); }

.shout {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(18px, 4.2vw, 30px);
  color: var(--shout-red);
  text-align: center;
  margin: 12px 0;
  text-shadow: 2px 2px 0 #000;
  animation: shake 0.5s ease-in-out infinite;
}
.shout-small {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 19px;
  text-align: center;
  color: var(--hazard-yellow);
}
@keyframes shake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(-2px, 1px) rotate(-0.6deg); }
  75%      { transform: translate(2px, -1px) rotate(0.6deg); }
}

.hot { color: var(--hazard-yellow); font-weight: 700; }

.rainbow {
  background: linear-gradient(90deg, #ff0000, #ff9900, #ffee00, #33ff00, #00ffee, #3300ff, #ff00cc, #ff0000);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow-slide 3s linear infinite;
  font-weight: 700;
}
@keyframes rainbow-slide {
  to { background-position: 400% 0; }
}

.blink { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

.new-gif {
  display: inline-block;
  background: var(--shout-red);
  color: #fff;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid #fff;
  animation: blink 0.8s steps(2, start) infinite;
  vertical-align: middle;
}

blockquote {
  border-left: 6px solid var(--hot-pink);
  background: rgba(255, 0, 204, 0.12);
  margin: 14px 0;
  padding: 10px 14px;
  font-style: italic;
}
blockquote cite { display: block; margin-top: 6px; font-size: 13px; color: var(--acid); font-style: normal; }

img-placeholder {
  display: block;
  border: 3px dashed #888;
  padding: 18px 8px;
  color: #999;
  font-family: "Courier New", monospace;
  font-size: 11px;
}

/* ---------- Data table ---------- */
table.data {
  border-collapse: collapse;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  background: #000;
}
table.data th {
  background: linear-gradient(var(--hot-pink), #99007a);
  color: #fff;
  font-family: Impact, "Arial Black", sans-serif;
  letter-spacing: 1px;
  border: 2px outset #fff;
}
table.data td { border: 1px solid #555; padding: 6px; }
table.data tr:nth-child(even) td { background: #16002b; }
.status-bad { color: var(--shout-red); font-weight: 700; }
.status-ok  { color: var(--acid); font-weight: 700; }

/* ---------- Hazard strip ---------- */
.hazard-strip {
  height: 14px;
  background: repeating-linear-gradient(45deg, #000 0 14px, var(--hazard-yellow) 14px 28px);
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  margin: 8px 0 14px;
}

/* ---------- Forms ---------- */
.oldform { margin: 12px 0 0; }
table.formtable { border-collapse: collapse; }
td.lbl {
  width: 190px;
  vertical-align: top;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--acid);
  padding-top: 9px;
}
@media (max-width: 700px) {
  table.formtable, table.formtable tbody, table.formtable tr, table.formtable td { display: block; width: 100% !important; }
  td.lbl { padding-top: 10px; }
}

input[type="text"], input[type="email"], input[type="number"], select, textarea {
  width: 100%;
  font-family: "Courier New", monospace;
  font-size: 14px;
  padding: 6px;
  background: #000;
  color: var(--acid);
  border: 3px inset #999;
}
input[type="range"] { width: 70%; vertical-align: middle; accent-color: var(--shout-red); }
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--hazard-yellow);
  background: #101010;
}
/* :user-invalid, not :invalid — don't shout at a field they haven't touched yet */
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--shout-red); }
textarea { resize: vertical; }
output { font-family: Impact, sans-serif; color: var(--hazard-yellow); margin-left: 8px; }

.checkline { display: inline-block; margin: 10px 0; font-size: 13px; }
.checkline input { margin-right: 6px; accent-color: var(--shout-red); }

.judgement {
  display: inline-block;
  margin-top: 6px;
  font-family: Impact, "Arial Black", sans-serif;
  color: var(--hot-pink);
  font-size: 14px;
}

button.chunky {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 8px 14px;
  margin: 6px 4px;
  color: #000;
  background: linear-gradient(var(--hazard-yellow), #c9b100);
  border: 4px outset #fff;
  cursor: pointer;
}
button.chunky:hover { background: linear-gradient(var(--acid), #00a844); transform: scale(1.05); }
button.chunky:active { border-style: inset; transform: scale(0.97); }
button.chunky.big { font-size: 19px; padding: 12px 22px; background: linear-gradient(var(--shout-red), #99001f); color: #fff; }
button.chunky[disabled] { opacity: 0.6; cursor: wait; transform: none; }

.chunky-link {
  display: inline-block;
  font-family: Impact, "Arial Black", sans-serif;
  padding: 8px 14px;
  margin: 6px 4px;
  color: #000 !important;
  background: linear-gradient(#c0c0c0, #808080);
  border: 4px outset #fff;
  text-decoration: none;
}
.chunky-link:hover { background: linear-gradient(var(--hot-pink), #99007a); color: #fff !important; }

.status {
  margin: 12px 0 0;
  padding: 10px;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 15px;
  text-align: center;
  min-height: 1px;
}
.status.ok   { background: #003d1a; border: 3px ridge var(--acid); color: var(--acid); }
.status.bad  { background: #3d0010; border: 3px ridge var(--shout-red); color: var(--shout-red); }
.status.busy { background: #3d3000; border: 3px ridge var(--hazard-yellow); color: var(--hazard-yellow); }

/* ---------- FAQ ---------- */
dl.faq dt {
  font-family: Impact, "Arial Black", sans-serif;
  color: var(--hazard-yellow);
  font-size: 16px;
  margin-top: 14px;
}
dl.faq dd { margin: 4px 0 0 18px; }

/* ---------- Guestbook ---------- */
#guestbook-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
#guestbook-form input { flex: 1 1 160px; width: auto; }
.gb-entries { margin-top: 12px; }
.gb-entry {
  border: 2px groove var(--hot-pink);
  background: rgba(255, 0, 204, 0.08);
  padding: 6px 10px;
  margin: 6px 0;
  font-size: 14px;
}
.gb-entry b { color: var(--acid); }
.gb-entry .gb-time { float: right; font-size: 11px; color: #aaa; }

/* ---------- Links list ---------- */
ul.links { list-style: "👉 "; padding-left: 24px; }
ul.links li { margin: 6px 0; }

/* ---------- Poll ---------- */
.poll { text-align: left; font-size: 11px; }
.poll-row { display: flex; align-items: center; gap: 4px; margin: 4px 0; }
.poll-row span:first-child { width: 46px; }
.bar { flex: 1; height: 12px; background: #000; border: 1px inset #666; }
.bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--shout-red) 0 4px, #ff6688 4px 8px); }

/* ---------- Stats ---------- */
table.stats { font-size: 11px; width: 100%; text-align: left; line-height: 1.35; }
table.stats td { padding: 1px 0; }
table.stats td:last-child { text-align: right; white-space: nowrap; }
table.stats tr.stat-rule td { border-top: 1px dashed #6a4a8a; padding-top: 4px; }
table.stats .tiny { font-size: 9px; }

/* The portfolio ticking over while you read. */
.stat-flash { animation: stat-flash 1s ease-out 1; }
@keyframes stat-flash {
  0%   { background: var(--shout-red); color: #fff; }
  100% { background: transparent; }
}

/* ---------- Footer ---------- */
footer {
  margin-top: 10px;
  background: linear-gradient(#12002a, #000);
  border-top: 6px ridge var(--hazard-yellow);
  padding-bottom: 20px;
  text-align: center;
}
footer marquee {
  background: #000;
  color: var(--hazard-yellow);
  font-family: Impact, "Arial Black", sans-serif;
  padding: 6px 0;
  font-size: 16px;
}
.footer-legal {
  max-width: 820px;
  margin: 14px auto;
  padding: 12px;
  border: 2px dotted #666;
  color: #bbb;
  text-align: left;
  line-height: 1.6;
}

/* ---------- Bits and bobs ---------- */
.tiny { font-size: 11px; color: #ccc; }
.centre { text-align: center; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- Live figures box ---------- */
.box-live { border-color: var(--acid); background: linear-gradient(#052b16, #01160b); }
.box-live h3 { color: var(--acid); border-bottom-color: var(--hazard-yellow); }

/* ---------- Fake pop-up windows ---------- */
#popup-root { position: fixed; inset: 0; pointer-events: none; z-index: 9000; }

.popup {
  position: fixed;
  width: 300px;
  max-width: calc(100vw - 24px);
  background: #c0c0c0;
  border: 3px outset #fff;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  font-family: Verdana, Geneva, sans-serif;
  color: #000;
}

.popup-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 4px;
  cursor: move;
  user-select: none;
}

.popup-x {
  flex: none;
  width: 18px;
  height: 16px;
  line-height: 1;
  font-size: 10px;
  background: #c0c0c0;
  color: #000;
  border: 2px outset #fff;
  cursor: pointer;
  padding: 0;
}
.popup-x:active { border-style: inset; }

.popup-body { padding: 12px 10px; font-size: 12px; line-height: 1.45; }
.popup-body b { color: #000080; }
.pu-small { font-size: 10px; color: #444; }

.popup-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 0 8px 10px;
  flex-wrap: wrap;
}
.popup-row button.chunky {
  font-size: 11px;
  padding: 5px 10px;
  margin: 0;
  border-width: 2px;
  background: linear-gradient(#e0e0e0, #a8a8a8);
}
.popup-row button.chunky:hover { background: linear-gradient(var(--hazard-yellow), #c9b100); transform: none; }

/* ---------- Cursor trail ---------- */
.trail-star {
  position: fixed;
  pointer-events: none;
  font-size: 14px;
  z-index: 9999;
  animation: trail-fade 700ms linear forwards;
}
@keyframes trail-fade {
  to { opacity: 0; transform: translateY(22px) scale(0.4) rotate(180deg); }
}

/* ---------- Mercy ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .blink, .new-gif { visibility: visible !important; }
  marquee { -moz-binding: none; }
}