/* Dropping Dollars On Strippers: hand-coded like it's 2003. */

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 10px 0 30px;
  color: #f2e9ff;
  font: 12px/1.45 Verdana, Tahoma, Geneva, sans-serif;
  background-color: #000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ctext x='8' y='22' font-family='Georgia' font-size='16' fill='%23241033'%3E%24%3C/text%3E%3Ctext x='40' y='54' font-family='Georgia' font-size='16' fill='%23241033'%3E%24%3C/text%3E%3Cpath d='M48 12l1.4 3 3.2.4-2.4 2.2.6 3.2-2.8-1.6-2.8 1.6.6-3.2-2.4-2.2 3.2-.4z' fill='%231c0e2a'/%3E%3Cpath d='M16 44l1 2.2 2.4.3-1.8 1.6.5 2.4-2.1-1.2-2.1 1.2.5-2.4-1.8-1.6 2.4-.3z' fill='%231c0e2a'/%3E%3C/svg%3E");
  cursor: default;
}
a { color: #ff5ce1; }
a:visited { color: #d58cff; }
a:hover { color: #fff200; text-decoration: none; background: #3a0038; }
b, strong { color: #fff; }
.gold { color: #ffd23f !important; }
.pink { color: #ff5ce1; }
.mono { font-family: "Courier New", Courier, monospace; word-break: break-all; }
.tiny { font-size: 10px; color: #a996bf; }
.center { text-align: center; }
[hidden] { display: none !important; }

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

/* ---------- beveled buttons, Win98-ish but pink ---------- */
.bevel {
  font: bold 11px Verdana, Tahoma, sans-serif;
  color: #000;
  background: #d9d0e0;
  border: 2px outset #f4eef8;
  padding: 3px 10px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.bevel:hover { background: #ffc6f3; color: #000; }
.bevel:active { border-style: inset; }
.bevel.big { font-size: 16px; padding: 8px 26px; letter-spacing: 1px; }
.bevel.sm { font-size: 10px; padding: 1px 6px; }
a.bevel:visited { color: #000; }

/* ---------- WordArt ---------- */
.wordart {
  margin: 0;
  font: italic 900 52px/0.95 Impact, "Arial Black", "Haettenschweiler", sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fffbe0 0%, #ffe56b 30%, #d99a00 48%, #7a4a00 52%, #ffd23f 70%, #fff6c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px #5a0048;
  filter: drop-shadow(3px 3px 0 #ff2fd0) drop-shadow(5px 5px 0 #4b0070);
  transform: perspective(400px) rotateX(8deg) skewX(-6deg);
}
.wordart.small { font-size: 38px; }

/* ---------- splash ---------- */
.splash {
  position: fixed; inset: 0; z-index: 50;
  background: #000 radial-gradient(ellipse at 50% 40%, #2c0038 0%, #000 65%);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px;
  overflow: auto;
}
.splash-in { max-width: 560px; }
.splash-logo {
  font: bold 42px Georgia, serif; color: #3cff7a;
  text-shadow: 0 0 8px #0f0, 0 0 20px #0a0;
  animation: flick 3s infinite;
  margin-bottom: 10px;
}
@keyframes flick { 0%, 19%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .35; } }
.warn { font: bold 18px Verdana, sans-serif; color: #ff2d2d; margin: 22px 0 6px; }
.splash-copy { font-size: 13px; }
.gatebtns { margin: 16px auto; border-spacing: 14px 0; }
.leave { color: #000 !important; }
.loadtxt { font: bold 13px Verdana, sans-serif; color: #fff; margin-top: 26px; }
.loadbar { width: 260px; max-width: 80vw; height: 14px; margin: 8px auto; border: 2px inset #777; background: #111; }
#loadfill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, #ff2fd0 0 8px, #b000a0 8px 10px); }
.loadpct { font: 11px Verdana, sans-serif; color: #aaa; margin: 4px 0 14px; }
body.locked { overflow: hidden; }

/* ---------- the shell table ---------- */
.shell {
  width: 800px; max-width: 100%;
  margin: 0 auto;
  border: 3px ridge #b3309e;
  background: #0b0010;
  box-shadow: 0 0 0 1px #000, 0 0 30px rgba(255, 47, 208, .25);
  border-collapse: separate;
}
.hdr {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 47, 208, .45), transparent 60%),
    radial-gradient(ellipse at 80% 0%, rgba(0, 220, 255, .35), transparent 60%),
    linear-gradient(#1a0024, #000);
  border-bottom: 2px solid #ff2fd0;
  text-align: center;
  padding: 20px 10px 12px;
}
.hdr-in { position: relative; }
.tagline { margin-top: 12px; font-size: 11px; color: #e7c9ff; letter-spacing: .5px; }
.spark { position: absolute; color: #fff; font-size: 16px; text-shadow: 0 0 6px #fff, 0 0 12px #ff2fd0; animation: twinkle 1.6s infinite; }
.s1 { left: 9%; top: 6px; }
.s2 { right: 12%; top: 40px; animation-delay: .5s; font-size: 12px; }
.s3 { left: 22%; bottom: 20px; animation-delay: 1s; font-size: 10px; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.coin { position: absolute; top: 24px; width: 40px; height: 40px; perspective: 200px; }
.coin span {
  display: block; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd23f 40%, #b07800 80%);
  border: 2px solid #7a4a00;
  font: bold 24px/36px Georgia, serif; color: #7a4a00; text-align: center;
  animation: spin 1.4s linear infinite;
}
.c1 { left: 3%; }
.c2 { right: 3%; }
.c2 span { animation-delay: -.7s; }
@keyframes spin { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }

.marq {
  background: linear-gradient(#ffe56b, #d99a00);
  color: #2a0020;
  font: bold 11px Verdana, sans-serif;
  padding: 3px 0;
  border-bottom: 2px solid #7a4a00;
}
.marq b { color: #6a004e; }

/* ---------- left nav ---------- */
.nav { width: 150px; padding: 10px 8px; background: #12001a; border-right: 1px dashed #5a2070; }
.navbox { margin-bottom: 14px; }
.navtitle, .sidetitle {
  font: bold 10px Verdana, sans-serif; letter-spacing: 1px;
  color: #000; background: linear-gradient(#ff8ae8, #c1009c);
  text-align: center; padding: 2px 0; margin-bottom: 6px;
  border: 1px solid #ffc6f3; border-bottom-color: #5a0048; border-right-color: #5a0048;
}
.navbtn {
  display: block; margin: 0 0 4px;
  padding: 5px 7px;
  font: bold 11px Tahoma, Verdana, sans-serif;
  color: #fff !important; text-decoration: none;
  background: linear-gradient(#3b0a52, #1b0028);
  border: 2px outset #7b3a99;
}
.navbtn:hover { background: linear-gradient(#ff5ce1, #9e0080); color: #fff200 !important; border-color: #ff9cef; }
.navbtn.on { background: linear-gradient(#ffe56b, #d99a00); color: #2a0020 !important; border-style: inset; border-color: #ffd23f; }
.new { font: bold 9px Verdana, sans-serif; color: #fff200; background: #d40000; padding: 0 3px; margin-left: 3px; animation: blink .8s steps(1) infinite; }
.txtlink { font-size: 11px; line-height: 1.9; }
.uc { width: 120px; margin: 0 auto; border: 2px solid #000; background: #ffd200; color: #000; }
.uc-stripe { height: 10px; background: repeating-linear-gradient(-45deg, #000 0 8px, #ffd200 8px 16px); animation: slide 1s linear infinite; background-size: 22.6px 10px; }
@keyframes slide { to { background-position: 22.6px 0; } }
.uc-txt { font: bold 11px/1.2 Impact, "Arial Black", sans-serif; letter-spacing: 1px; padding: 4px 0; }

/* ---------- main content ---------- */
.main { padding: 10px; }
.box { width: 100%; margin-bottom: 12px; border: 2px solid #ff2fd0; background: #150020; }
.boxhead {
  font: bold 13px Verdana, sans-serif; color: #fff;
  background: linear-gradient(90deg, #9e0080, #4b0070 60%, #150020);
  padding: 4px 8px;
  text-shadow: 1px 1px 0 #000;
}
.boxbody { padding: 10px 12px; }
.boxbody.nopad { padding: 0; }
.lead { font: bold 15px Georgia, "Times New Roman", serif; color: #ffd23f; margin-top: 0; }
.h2 { font: bold italic 16px Georgia, "Times New Roman", serif; color: #3cff7a; margin: 16px 0 6px; border-bottom: 1px dotted #3cff7a; }
.h2:first-child { margin-top: 0; }
ol { padding-left: 22px; }
ol li { margin-bottom: 5px; }
.note { border: 1px dashed #ffd23f; padding: 6px 8px; background: #221000; }
.rule { border: 0; height: 3px; background: linear-gradient(90deg, transparent, #ff2fd0, #ffd23f, #ff2fd0, transparent); margin: 12px 0; }

.grid { width: 100%; border: 2px outset #7b3a99; background: #0e0016; font-size: 11px; }
.grid th { background: #3b0a52; color: #ffd23f; text-align: left; border: 1px solid #5a2070; }
.grid td { border: 1px solid #3a1450; vertical-align: top; }
.grid .ic { width: 26px; text-align: center; font-size: 15px; }
.grid .empty { text-align: center; color: #a996bf; padding: 14px; font-style: italic; }
.specs { margin: 14px 0 8px; }
.specs td:first-child { width: 36%; color: #d9b8ff; font-weight: bold; }
.ledger td:nth-child(4) { color: #3cff7a; font-weight: bold; white-space: nowrap; }
.totals { width: 100%; margin-top: 8px; font-size: 12px; }
.totals td { padding: 4px; }

/* stage */
.neon { color: #fff; text-shadow: 0 0 4px #fff, 0 0 10px #ff2fd0, 0 0 18px #ff2fd0; letter-spacing: 2px; }
.stagebox .boxhead { text-align: center; background: #000; border-bottom: 1px solid #ff2fd0; }
.stagewrap { position: relative; background: #000; line-height: 0; }
#stage { width: 100%; height: 340px; display: block; cursor: pointer; touch-action: manipulation; }
.stagehint {
  position: absolute; left: 0; right: 0; bottom: 8px;
  font: bold 10px/1 Verdana, sans-serif; letter-spacing: 1px; color: #fff200;
  text-align: center; text-shadow: 1px 1px 0 #000;
  animation: blink 1.2s steps(1) infinite;
  pointer-events: none;
}
.controls { width: 100%; background: #26003a; border-top: 1px solid #5a2070; font-size: 11px; }
.controls td { padding: 6px; text-align: center; white-space: nowrap; }
.controls select { font: 11px Verdana, sans-serif; }
.chk { cursor: pointer; }
.dropped { padding: 6px 10px 8px; font-size: 11px; background: #150020; text-align: center; }
#dropped-amt { color: #3cff7a; font-size: 13px; }

.news p { margin: 0 0 9px; }
.date { font: bold 10px Verdana, sans-serif; color: #000; background: #3cff7a; padding: 0 4px; }

/* flowchart */
.flow { width: 100%; margin: 4px 0 6px; }
.fstep {
  width: 22%; text-align: center; vertical-align: top;
  background: #fff; color: #000; border: 2px solid #000;
  padding: 16px 4px 8px; position: relative; font: 11px "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
}
.fstep b { color: #000; }
.fstep .tiny { color: #444; }
.fstep.hot { background: #ffe0f8; }
.fnum { position: absolute; top: -9px; left: 50%; margin-left: -10px; width: 20px; height: 20px; border-radius: 50%; background: #ff2fd0; color: #fff; font: bold 11px/20px Verdana, sans-serif; border: 1px solid #000; }
.farrow { text-align: center; color: #ffd23f; font-size: 18px; width: 4%; }

/* guestbook */
.gbform input, .gbform textarea, .gbform select { font: 12px "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive; background: #fff; color: #000; border: 2px inset #aaa; width: 100%; max-width: 300px; box-sizing: border-box; }
.gbentry { border: 1px solid #5a2070; margin-bottom: 8px; background: #0e0016; }
.gbhead { background: #26003a; padding: 3px 6px; font-size: 11px; }
.gbhead b { color: #ffd23f; }
.gbmsg { padding: 6px 8px; font: 12px/1.4 "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive; color: #fff; white-space: pre-wrap; word-wrap: break-word; }
.gbentry.web .gbhead b { color: #3cff7a; }

/* faq */
.faq .q { font-weight: bold; color: #ffd23f; margin: 10px 0 2px; }
.faq .a { margin: 0 0 6px 14px; }
.totop { text-align: center; margin-top: 14px; font-size: 11px; }

/* links */
.linkgrid { width: 100%; margin-bottom: 10px; }
.linkgrid td { width: 33%; }
.bigbtn {
  display: block; text-align: center; padding: 12px 4px;
  font: bold 13px Verdana, sans-serif; line-height: 1.6;
  color: #000 !important; text-decoration: none;
  background: linear-gradient(#fff6c8, #ffd23f 50%, #d99a00);
  border: 3px outset #ffe56b;
}
.bigbtn:hover { background: linear-gradient(#ffe0f8, #ff5ce1 50%, #b000a0); color: #fff !important; }
.bigbtn.off { filter: grayscale(1) brightness(.6); cursor: not-allowed; }
.webring { margin-top: 18px; text-align: center; border: 2px ridge #ffd23f; padding: 8px; background: #000; font-size: 11px; }
.wr-title { font-weight: bold; color: #ffd23f; margin-bottom: 4px; }

/* ---------- right sidebar ---------- */
.side { width: 140px; padding: 10px 8px; background: #12001a; border-left: 1px dashed #5a2070; text-align: center; }
.sidebox { margin-bottom: 16px; }
.jar { width: 70px; margin: 4px auto 4px; }
.jar-lid { height: 8px; margin: 0 8px; background: linear-gradient(#ddd, #777); border: 1px solid #333; border-radius: 2px; }
.jar-body {
  position: relative; height: 80px; overflow: hidden;
  border: 2px solid #9fd8ff; border-top: 0; border-radius: 0 0 14px 14px;
  background: rgba(160, 220, 255, .12);
}
.jar-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 6%;
  background: repeating-linear-gradient(-20deg, #85bb65 0 6px, #5e9a45 6px 9px, #a5d88a 9px 12px);
  transition: height 1s;
}
.jar-label { position: absolute; left: 8px; right: 8px; top: 26px; background: #fff; color: #c1009c; font: bold 11px Georgia, serif; border: 1px solid #000; }
.jar-amt { font: bold 18px Georgia, serif; color: #3cff7a; }

.odo { display: inline-flex; border: 2px inset #666; background: #000; padding: 2px; }
.odo span {
  display: inline-block; width: 13px; height: 20px; margin: 0 1px;
  font: bold 15px/20px "Courier New", monospace; color: #fff;
  background: linear-gradient(#333, #000 45%, #000 55%, #333);
  text-align: center;
}
.odo span.d { color: #3cff7a; }

.midi { background: #000; border: 2px inset #666; padding: 5px; }
.midi-name { font: 10px "Courier New", monospace; color: #3cff7a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.midi-bar { height: 6px; background: #222; border: 1px solid #444; margin-bottom: 5px; }
#midi-prog { height: 100%; width: 0; background: #3cff7a; }

.badges { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.b88 {
  width: 88px; height: 31px; box-sizing: border-box;
  font: 8px/1.15 Verdana, sans-serif; padding-top: 5px;
  border: 1px solid #000; outline: 1px solid #777;
}
.b88 b { font-size: 9px; color: inherit; }
.b-a { background: linear-gradient(#0040ff, #001a66); color: #fff; }
.b-b { background: #fff; color: #000; }
.b-c { background: linear-gradient(#3cff7a, #00801f); color: #000; }
.b-d { background: #000; color: #ffd23f; border-color: #ffd23f; }
.b-e { background: #ffd200; color: #000; }
.b-f { background: linear-gradient(90deg, #ff2fd0, #7a00ff); color: #fff; }

/* ---------- footer ---------- */
.foot { text-align: center; padding: 4px 12px 14px; font-size: 11px; color: #d9b8ff; background: #0b0010; }
.foot p { margin: 4px 0; }

/* ---------- cursor trail ---------- */
#trail { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 40; }
#trail i {
  position: fixed; font: bold 14px Georgia, serif; font-style: normal;
  color: #3cff7a; text-shadow: 0 0 4px #0f0;
  transform: translate(-50%, -50%);
  will-change: left, top;
}

/* ---------- small screens: the table unfolds ---------- */
@media (max-width: 760px) {
  body { padding: 0 0 20px; }
  .shell { border-width: 0 0 3px; }
  .shell, .shell > tbody, .shell > tbody > tr, .shell > tbody > tr > td { display: block; width: auto; }
  .hdr { padding: 24px 12px 12px; }
  .wordart { font-size: 34px; }
  .wordart.small { font-size: 28px; }
  .coin { display: none; }
  .nav { border-right: 0; border-bottom: 1px dashed #5a2070; padding: 8px 16px; }
  .navbox:first-child { display: flex; flex-wrap: wrap; gap: 4px; }
  .navbox:first-child .navtitle { flex-basis: 100%; }
  .navbtn { margin: 0; flex: 1 1 30%; text-align: center; padding: 6px 4px; }
  .side-hide { display: none; }
  .main { padding: 10px 16px; }
  .side { border-left: 0; border-top: 1px dashed #5a2070; display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px 18px; padding: 12px 16px; }
  .sidebox { margin: 0; min-width: 120px; }
  .badges { flex-direction: row; flex-wrap: wrap; justify-content: center; flex-basis: 100%; }
  #stage { height: 280px; }
  .controls, .controls tbody, .controls tr { display: block; }
  .controls td { display: inline-block; padding: 5px 4px; }
  .controls tr { text-align: center; }
  .flow, .flow tbody, .flow tr { display: block; }
  .fstep { display: block; width: auto; margin: 16px 0 0; }
  .farrow { display: block; width: auto; transform: rotate(90deg); line-height: 1; margin-top: 6px; }
  .linkgrid, .linkgrid tbody, .linkgrid tr, .linkgrid td { display: block; width: auto; }
  .linkgrid td { margin-bottom: 8px; }
  .ledger { font-size: 10px; }
}
@media (hover: none) { #trail { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .blink, .new, .stagehint, .spark, .coin span, .uc-stripe, .splash-logo { animation: none; }
}