/* Slugroller landing page: a 1998 GeoCities homepage.
   The page is old-web (Comic Sans, Impact, Times New Roman), the form widgets are the
   ones a 1998 browser would have drawn (Win98 bevels). System fonts only, nothing bundled.
   Ported from preview/retro98/index.html. */
:root {
  --lime: #39ff14;
  --yellow: #ffff00;
  --cyan: #00ffff;
  --magenta: #ff00ff;
  --hot: #ff3fa4;
  --navy: #000080;
  --face: #c0c0c0;
  --comic: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
  --times: "Times New Roman", Times, serif;
  --impact: Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif;
  --ui: "MS Sans Serif", "Microsoft Sans Serif", "W95FA", sans-serif;
  --raised: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --sunken: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  --pressed: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
}
* { box-sizing: border-box; }
html { background: #000; }
body.gc {
  margin: 0;
  color: #fff;
  font-family: var(--times);
  font-size: 16px;
  overflow-x: hidden;
  /* Tiled starfield, the one true GeoCities background. */
  background-color: #05001a;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='%2305001a'/%3E%3Crect x='12' y='18' width='2' height='2' fill='%23fff'/%3E%3Crect x='70' y='9' width='1' height='1' fill='%23fff'/%3E%3Crect x='97' y='44' width='2' height='2' fill='%23ffff66'/%3E%3Crect x='33' y='67' width='1' height='1' fill='%23fff'/%3E%3Crect x='58' y='95' width='2' height='2' fill='%23aaffff'/%3E%3Crect x='104' y='101' width='1' height='1' fill='%23fff'/%3E%3Crect x='6' y='108' width='1' height='1' fill='%23ffaaff'/%3E%3Cpath d='M84 70h1v-2h1v2h2v1h-2v2h-1v-2h-2z' fill='%23fff'/%3E%3C/svg%3E");
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' shape-rendering='crispEdges'%3E%3Cpath d='M1 1v14l4-4 3 6 2-1-3-6h6z' fill='%2339ff14' stroke='%23000'/%3E%3C/svg%3E") 1 1, auto;
}
.gc a { color: var(--cyan); }
.gc a:visited { color: #ff99ff; }
.gc a:hover { color: var(--yellow); background: var(--magenta); }

.page { width: min(820px, 100%); margin: 0 auto; padding: 18px 12px 60px; }
.layout > *, .box { min-width: 0; }

/* ---------- header strip ---------- */
.topstrip { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 13px var(--comic); color: var(--lime); }
.topstrip .ew { color: var(--yellow); }

/* Spinning 3D die: the "spinning @ email gif" of this site. */
.die3d-wrap { width: 64px; height: 64px; perspective: 260px; flex: none; }
.die3d { width: 48px; height: 48px; margin: 8px; position: relative; transform-style: preserve-3d; animation: spin 5s linear infinite; }
.die3d .f {
  position: absolute; inset: 0;
  background: #fff; border: 2px solid #000; border-radius: 7px;
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 5px;
}
.die3d .f i { width: 8px; height: 8px; border-radius: 50%; background: #000; place-self: center; }
.die3d .f.six i { background: var(--hot); }
.die3d .f1 { transform: translateZ(24px); }
.die3d .f2 { transform: rotateY(90deg) translateZ(24px); }
.die3d .f3 { transform: rotateY(180deg) translateZ(24px); }
.die3d .f4 { transform: rotateY(-90deg) translateZ(24px); }
.die3d .f5 { transform: rotateX(90deg) translateZ(24px); }
.die3d .f6 { transform: rotateX(-90deg) translateZ(24px); }
@keyframes spin { from { transform: rotateX(-20deg) rotateY(0); } to { transform: rotateX(-20deg) rotateY(360deg); } }
i.x { visibility: hidden; }

.new-burst {
  font: bold 15px var(--impact); color: #fff; background: #e00;
  clip-path: polygon(50% 0,61% 20%,84% 8%,80% 32%,100% 38%,84% 55%,98% 76%,74% 76%,70% 100%,52% 84%,33% 100%,28% 78%,3% 80%,16% 57%,0 38%,20% 31%,15% 8%,38% 20%);
  width: 74px; height: 70px; display: grid; place-items: center;
  transform: rotate(12deg); animation: blink 1s steps(1) infinite; flex: none;
}
@keyframes blink { 50% { opacity: .15; } }
.blink { animation: blink 1s steps(1) infinite; }

/* ---------- WordArt ---------- */
.wordart { display: flex; justify-content: center; margin: 6px 0 0; font: 86px/1 var(--impact); font-weight: normal; letter-spacing: 2px; user-select: none; }
.wordart .l {
  position: relative; display: inline-block;
  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg));
  animation: wave 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.18s);
}
.wordart .l span {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #fff 0%, #ffff00 22%, #ff9900 45%, #ff00cc 70%, #6600ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px #200040;
}
.wordart .l::before { content: attr(data-c); position: absolute; left: 6px; top: 6px; color: #000080; -webkit-text-stroke: 1px #000080; }
@keyframes wave { 50% { transform: translateY(calc(var(--y, 0px) - 6px)) rotate(var(--r, 0deg)); } }

.tagline { text-align: center; font: bold 20px var(--comic); color: var(--lime); margin: 10px 0 14px; text-shadow: 2px 2px 0 #004400; }
.tagline em { color: var(--yellow); font-style: normal; }

.rainbow {
  height: 6px; border: 0; margin: 16px 0;
  background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, magenta, red);
  background-size: 200% 100%; animation: slide 3s linear infinite;
}
@keyframes slide { to { background-position: -200% 0; } }

.marquee { overflow: hidden; white-space: nowrap; background: var(--navy); border: 3px ridge #c0c0c0; color: var(--yellow); font: bold 15px var(--comic); padding: 4px 0; }
.marquee span { display: inline-block; padding-left: 100%; animation: marquee 22s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }

.construction {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 14px auto 0; padding: 6px 12px; width: fit-content; max-width: 100%;
  background: #000; border: 6px solid transparent;
  border-image: repeating-linear-gradient(45deg, #ffcc00 0 10px, #000 10px 20px) 6;
  font: bold 14px var(--comic); color: #ffcc00;
}
.digger { font-size: 26px; display: inline-block; animation: dig .5s steps(2) infinite; }
@keyframes dig { 50% { transform: rotate(-18deg) translateY(2px); } }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 170px 1fr; gap: 14px; margin-top: 18px; }
.sidebar { background: #1b0033; border: 4px ridge #ff66ff; padding: 10px 8px; align-self: start; }
.sidebar h3 { margin: 0 0 8px; text-align: center; font: 18px var(--impact); font-weight: normal; color: var(--magenta); letter-spacing: 1px; }
.gc .navbtn {
  display: block; margin: 0 0 6px; padding: 5px 6px;
  background: var(--face); box-shadow: var(--raised);
  color: #000; text-decoration: none; font: bold 13px var(--comic); text-align: center;
}
.gc .navbtn:visited { color: #000; }
.gc .navbtn:hover { background: #d8d8ff; color: #000; }
.gc .navbtn:active { box-shadow: var(--pressed); }
.gc .navbtn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.sidebar .since { margin-top: 12px; font: 12px var(--comic); color: #bbb; text-align: center; }

.box { border: 4px ridge var(--c, #00ffff); background: rgba(0, 0, 40, .82); padding: 12px 16px 16px; margin-bottom: 16px; }
.box h2 { margin: -2px 0 10px; font: 28px var(--impact); font-weight: normal; letter-spacing: 1px; color: var(--c, #00ffff); text-shadow: 3px 3px 0 #000; }
.box h2 .star { color: var(--yellow); display: inline-block; animation: twirl 2s linear infinite; }
@keyframes twirl { to { transform: rotate(360deg); } }
.box p { margin: 0 0 10px; line-height: 1.4; }
.box.create { --c: #39ff14; }
.box.join { --c: #ff66ff; }
.box.what { --c: #ffff00; }
.box.feat { --c: #00ffff; }

/* Form controls in Win98 dress: the site is GeoCities, but the widgets
   are the ones a 1998 browser would have drawn. */
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.field-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.gc input[type=text], .gc input[type=password] { font: 14px "Courier New", monospace; padding: 5px 6px; border: 0; border-radius: 0; background: #fff; color: #000; box-shadow: var(--sunken); min-width: 0; }
.gc input[type=text]:focus, .gc input[type=password]:focus { outline: 1px dotted #000; outline-offset: -4px; }
.gc input::placeholder { color: #707070; opacity: 1; }
.pw-input { width: 240px; max-width: 100%; }
.chk { display: inline-flex; align-items: center; gap: 8px; font: 15px var(--comic); cursor: pointer; }
.chk input { appearance: none; width: 15px; height: 15px; margin: 0; background: #fff; box-shadow: var(--sunken); display: grid; place-items: center; flex: none; cursor: pointer; }
.chk input:checked::after { content: ""; width: 7px; height: 4px; border: solid #000; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }
.chk input:focus-visible { outline: 1px dotted #fff; outline-offset: 2px; }
.warn { font: bold 14px var(--comic); color: #ff5555; }
.warn::before { content: "\26A0\00a0"; }

.btn98 { font: bold 14px var(--comic); padding: 6px 16px; background: var(--face); color: #000; border: 0; box-shadow: var(--raised); cursor: pointer; }
.btn98:active { box-shadow: var(--pressed); padding: 7px 15px 5px 17px; }
.btn98:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.btn98.big { font: 22px var(--impact); letter-spacing: 1px; padding: 8px 22px; outline: 1px solid #000; text-transform: uppercase; }
.btn98.big:focus-visible { outline: 1px dotted #000; outline-offset: -4px; box-shadow: var(--raised), 0 0 0 1px #000; }
.btn98.big::before { content: "\25BA\00a0"; color: #d00; }
.btn98.big::after { content: "\00a0\25C4"; color: #d00; }

.ownerkey { margin-top: 12px; padding: 10px; background: #000; border: 2px dashed var(--lime); font: 14px var(--comic); }
.ownerkey .ok-title { font: bold 16px var(--comic); color: var(--yellow); margin-bottom: 4px; }
.ownerkey code { display: block; margin: 6px 0 10px; padding: 6px; background: #002200; color: var(--lime); font: bold 15px "Courier New", monospace; word-break: break-all; user-select: all; }

.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 4px; text-align: center; font: 14px var(--comic); }
.rules > div { border: 2px outset #888; background: #111; padding: 8px 4px; }
.rules b { display: block; font: 18px var(--impact); font-weight: normal; letter-spacing: .5px; margin-top: 4px; }
.pdice { display: inline-flex; gap: 3px; }
.pd { width: 22px; height: 22px; background: #fff; border: 1px solid #000; border-radius: 4px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 2px; }
.pd i { width: 4px; height: 4px; border-radius: 50%; background: #000; place-self: center; }

.feats { list-style: none; padding: 0; margin: 0; font: 15px var(--comic); }
.feats li { margin: 0 0 8px; padding-left: 26px; position: relative; }
.feats li::before { content: "\2605"; position: absolute; left: 0; color: var(--yellow); animation: twirl 3s linear infinite; display: inline-block; }
.feats b { color: var(--lime); }

.counter-row { text-align: center; margin-top: 22px; font: 14px var(--comic); color: #ccc; }
.odometer { display: inline-flex; gap: 2px; padding: 3px; background: #222; border: 2px inset #666; vertical-align: middle; margin: 0 6px; }
.odometer b { width: 18px; height: 26px; background: linear-gradient(#000 0 48%, #1a1a1a 52% 100%); color: var(--lime); font: bold 20px/26px "Courier New", monospace; text-align: center; text-shadow: 0 0 4px var(--lime); }
.badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.b88 { width: 88px; height: 31px; border: 1px solid #000; display: grid; place-items: center; font: bold 9px/1.05 Verdana, sans-serif; text-align: center; color: #fff; text-transform: uppercase; overflow: hidden; }
.b88.a { background: linear-gradient(#000080, #0000d0); color: var(--yellow); }
.b88.b { background: #fff; color: #000; border: 2px outset #ccc; }
.b88.c { background: linear-gradient(90deg, #ff00cc, #6600ff); }
.b88.d { background: #000; color: var(--lime); border: 1px solid var(--lime); }
.b88.e { background: repeating-linear-gradient(45deg, #ffcc00 0 6px, #000 6px 12px); color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.b88 big { font: 13px var(--impact); letter-spacing: .5px; }
.fineprint { text-align: center; font: 12px var(--comic); color: #b0b0b0; margin-top: 16px; line-height: 1.5; }

/* ---------- fake MIDI player ---------- */
.midi { position: fixed; right: 12px; bottom: 12px; width: 210px; background: var(--face); box-shadow: var(--raised), 2px 2px 0 #000; padding: 3px; font: 11px var(--ui); color: #000; z-index: 10; }
.midi[hidden] { display: none; }
.midi .tb { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: bold; padding: 2px 4px; display: flex; justify-content: space-between; align-items: center; }
.midi .tb button { width: 16px; height: 14px; padding: 0; font: bold 10px/1 sans-serif; color: #000; background: var(--face); box-shadow: var(--raised); border: 0; cursor: pointer; }
.midi .body { padding: 6px 4px 4px; display: flex; gap: 6px; align-items: center; }
.midi .lcd { flex: 1; min-width: 0; background: #000; color: var(--lime); font: 11px "Courier New", monospace; padding: 3px 4px; overflow: hidden; white-space: nowrap; box-shadow: var(--sunken); }
.midi .lcd span { display: inline-block; animation: marquee 9s linear infinite; padding-left: 100%; }
.midi .ctl { width: 22px; height: 20px; padding: 0; border: 0; color: #000; background: var(--face); box-shadow: var(--raised); font-size: 10px; cursor: pointer; }
.midi .ctl:active { box-shadow: var(--pressed); }
.midi .tb button:focus-visible, .midi .ctl:focus-visible { outline: 1px dotted #000; outline-offset: -3px; }
.midi .eq { display: flex; gap: 1px; align-items: flex-end; height: 16px; }
.midi .eq i { width: 3px; background: var(--lime); animation: eq .6s ease-in-out infinite alternate; }
.midi.paused .eq i, .midi.paused .lcd span { animation-play-state: paused; }
@keyframes eq { from { height: 3px; } to { height: 16px; } }

.sparkle { position: fixed; pointer-events: none; font-size: 14px; z-index: 50; animation: fall .8s ease-out forwards; }
@keyframes fall { to { transform: translate(var(--dx), 30px) scale(.2); opacity: 0; } }

@media (max-width: 700px) {
  .wordart { font-size: 11.5vw; letter-spacing: 1px; }
  .wordart .l::before { left: 3px; top: 3px; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { order: 2; }
  .rules { grid-template-columns: 1fr; }
  .new-burst { display: none; }
  .midi { display: none; }
  .topstrip { font-size: 12px; }
  .box h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  /* The scrolling text starts off-screen (padding-left: 100%): with no scrolling, show it in place. */
  .marquee { white-space: normal; text-align: center; }
  .marquee span, .midi .lcd span { padding-left: 0; }
  .midi .lcd { text-overflow: ellipsis; }
}