/* =====================================================================
   PS2ME — "Web 1.0 / GeoCities" retro skin  (preview: retro.html)
   Deliberately gaudy: tiled starfield, bevels, blink, rainbow rules,
   Comic Sans, 800x600-era table layout. Loud on purpose. :-)
   ===================================================================== */

/* ---- reset-ish ---- */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* Always reserve the vertical scrollbar gutter and never show a horizontal
   one. Without this, a scrolling <marquee> makes the document width oscillate,
   which toggles the scrollbars several times per second (the "flicker"). */
html { overflow-y: scroll; }
body { overflow-x: hidden; }

body {
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 16px;
  color: #ffff00;                     /* classic yellow-on-navy */
  background-color: #000033;
  /* Tiled "starfield": two layers of tiny stars on deep space navy. */
  background-image:
    radial-gradient(1px 1px at 20px 30px, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 70px 80px, #9ad0ff 50%, transparent 51%),
    radial-gradient(2px 2px at 130px 40px, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 160px 120px, #fff2a8 50%, transparent 51%),
    radial-gradient(1px 1px at 50px 150px, #ffffff 50%, transparent 51%);
  background-size: 200px 200px;
  background-repeat: repeat;
  line-height: 1.5;
  text-align: center;                 /* center everything, 90s style */
}

a { color: #00ffff; }
a:visited { color: #ff88ff; }
a:hover { color: #ffffff; background: #000080; }

img { border: 0; }

/* ---- blink & marquee-ish helpers ---- */
@keyframes blinker { 50% { opacity: 0; } }
.blink { animation: blinker 1s step-start infinite; }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }

@keyframes hue { to { filter: hue-rotate(360deg); } }

/* Rainbow horizontal rule (animated gradient bar) */
.rainbow-hr {
  height: 6px; border: 0; margin: 14px auto; width: 92%;
  background: linear-gradient(90deg,
     #ff0000, #ff8800, #ffff00, #00cc00, #00ffff, #0066ff, #cc00ff, #ff0000);
  background-size: 200% 100%;
  animation: rainbowslide 4s linear infinite;
  box-shadow: 0 0 0 1px #000;
}
@keyframes rainbowslide { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .rainbow-hr { animation: none; } }

/* ===================================================================== */
/* Top scrolling marquee banner                                          */
/* ===================================================================== */
.topbar {
  background: #000000;
  border-bottom: 3px ridge #00ff00;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-weight: bold;
  padding: 4px 0;
  letter-spacing: 1px;
}
.topbar { overflow: hidden; }
.topbar marquee { font-size: 15px; }
/* keep every marquee clipped to its box so it can't widen the page */
marquee { max-width: 100%; overflow: hidden; }

/* ===================================================================== */
/* Page shell — a fixed-ish width "table" look, centered                 */
/* ===================================================================== */
.page {
  width: 90%;
  max-width: 900px;
  margin: 12px auto 30px;
  background: #000055;
  border: 4px outset #6a6ad0;
  padding: 0;
  box-shadow: 6px 6px 0 #000000;
}

/* ---- HERO / masthead ---- */
.masthead {
  background:
    repeating-linear-gradient(45deg, #1a1a66 0 14px, #22228a 14px 28px);
  border-bottom: 3px groove #ffff00;
  padding: 14px 10px 10px;
}
.wordart {
  margin: 6px 0 2px;
  font-family: "Impact", "Arial Black", "Comic Sans MS", sans-serif;
  font-size: clamp(46px, 12vw, 92px);
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 0.95;
  /* fake WordArt: rainbow fill + chunky outline + drop shadow */
  background: linear-gradient(180deg, #fff700, #ff9900 45%, #ff2d95 70%, #7a00ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px #000000;
  text-shadow: 4px 4px 0 #000000, 6px 6px 0 rgba(0,0,0,0.4);
  animation: hue 12s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .wordart { animation: none; } }

.masthead .logo {
  width: 96px; height: 96px;
  image-rendering: pixelated;
  border: 3px double #00ffff;
  background: #000;
  vertical-align: middle;
}
.subtitle {
  color: #ffffff;
  font-size: 18px;
  margin: 6px auto 4px;
  max-width: 620px;
}
.subtitle b { color: #00ff00; }
.byline { color: #ff88ff; font-size: 14px; margin: 2px 0 8px; }
.newflag {
  display: inline-block;
  background: #ff0000; color: #ffff00;
  font-family: "Comic Sans MS", cursive;
  font-weight: bold; font-size: 13px;
  padding: 1px 8px; border: 2px outset #ff6666;
  transform: rotate(-6deg);
}

/* ---- 88x31 style badge buttons ---- */
.badges { margin: 10px 0 4px; line-height: 2.1; }
.badge88 {
  display: inline-block;
  width: 88px; height: 31px;
  margin: 3px;
  font-family: "Courier New", monospace;
  font-size: 9px; font-weight: bold; line-height: 1.05;
  color: #fff;
  border: 1px solid #000;
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.6), inset 1px 1px 0 rgba(255,255,255,.4);
  vertical-align: middle;
  overflow: hidden;
  padding: 3px 2px 0;
  text-align: center;
  letter-spacing: 0;
}
.badge88 small { font-size: 8px; font-weight: normal; }
.b-netscape { background: linear-gradient(180deg,#0a0a5a,#000); color:#9fd; }
.b-800      { background: linear-gradient(180deg,#555,#111); color:#0f0; }
.b-notepad  { background: linear-gradient(180deg,#008080,#004040); color:#fff; }
.b-java     { background: linear-gradient(180deg,#e76f00,#7a3b00); color:#fff; }
.b-html     { background: linear-gradient(180deg,#cc0000,#660000); color:#ff0; }
.b-ps2      { background: linear-gradient(180deg,#111,#000); color:#7ea8ff; }

/* ===================================================================== */
/* Nav bar (beveled buttons)                                             */
/* ===================================================================== */
.navbar {
  background: #111144;
  border-top: 2px groove #8888ff;
  border-bottom: 2px groove #8888ff;
  padding: 8px 4px;
}
.navbtn {
  display: inline-block;
  margin: 3px;
  padding: 4px 12px;
  font-family: "Comic Sans MS", "Arial", sans-serif;
  font-weight: bold;
  font-size: 14px;
  color: #000 !important;
  background: silver;
  border: 3px outset #ffffff;
  text-decoration: none !important;
}
.navbtn:hover { background: #ffff66; border-style: inset; color:#000 !important; }
.navbtn:active { border-style: inset; }

/* ===================================================================== */
/* Two-column layout table (sidebar + content)                           */
/* ===================================================================== */
.layout { display: flex; align-items: stretch; }
.row { display: contents; }   /* let sidebar + content be flex items directly */
.sidebar {
  flex: 0 0 190px;
  background: #000044;
  border-right: 3px ridge #4444aa;
  padding: 12px 8px;
  text-align: center;
}
.content {
  flex: 1 1 auto;
  min-width: 0;               /* KEY: allow wide children (pre/notes) to wrap */
  padding: 14px 18px 20px;
  text-align: left;
}
@media (max-width: 680px) {
  .layout { display: block; }
  .sidebar, .content { width: auto; }
  .sidebar { flex: none; border-right: 0; border-bottom: 3px ridge #4444aa; }
}

/* Sidebar widgets ---------------------------------------------------- */
.widget {
  margin: 0 0 16px;
  background: #101055;
  border: 2px inset #6a6ad0;
  padding: 8px 6px;
}
.widget h4 {
  margin: 0 0 6px;
  font-family: "Comic Sans MS", cursive;
  font-size: 14px;
  color: #00ff00;
  text-decoration: underline;
}
.widget ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.widget li { margin: 3px 0; }
.widget a { color: #ffff00; }
.widget a:hover { color:#fff; }

/* ===================================================================== */
/* Content sections                                                      */
/* ===================================================================== */
.content h2 {
  font-family: "Comic Sans MS", cursive;
  font-size: 26px;
  color: #ffcc00;
  margin: 20px 0 6px;
  text-shadow: 2px 2px 0 #000, 0 0 6px #ff6a00;
  border-bottom: 2px dashed #00ffff;
  padding-bottom: 4px;
}
.content h2::before { content: "» "; color: #00ff00; }
.content h3 { color:#00ff00; font-family:"Comic Sans MS",cursive; margin: 12px 0 4px; }
.content p { color: #eeeeff; }
.content strong { color: #ffff66; }
.content em { color: #9fe6ff; font-style: italic; }
.content a { color:#00ffff; }

/* "GIF bullet" list */
.bullets, .steps { padding-left: 4px; list-style: none; }
.bullets li, .steps li { margin: 7px 0; color:#eeeeff; padding-left: 26px; position: relative; }
.bullets li::before { content: "►"; color:#ff00ff; position:absolute; left:2px; }
.steps { counter-reset: step; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position:absolute; left:0; top:1px;
  background:#ff0000; color:#fff; font-family:"Courier New",monospace; font-weight:bold;
  width:18px; height:18px; line-height:18px; text-align:center;
  border:2px outset #ff8888; border-radius: 2px;
}

/* code blocks — old terminal look */
pre {
  text-align: left;
  background: #000000;
  color: #00ff00;
  border: 2px inset #338833;
  padding: 8px 10px;
  overflow-x: auto;
  font-family: "Courier New", monospace;
  font-size: 13px;
}
code {
  font-family: "Courier New", monospace;
  color: #00ff88;
  background: #001500;
  padding: 0 3px;
}
pre code { background: none; padding: 0; }

.hint {
  font-size: 13px;
  color: #aaccff;
  background: #000033;
  border-left: 4px solid #00ffff;
  padding: 6px 10px;
  margin: 10px 0;
}

/* ===================================================================== */
/* Screenshots (Swiper) — thick-border TV frame                          */
/* ===================================================================== */
.screenshots-swiper {
  border: 5px ridge #888;
  background: #000;
  padding: 8px;
  margin: 12px 0;
}
.screenshots-swiper figure { margin: 0; text-align: center; }
.screenshots-swiper img {
  max-width: 100%;
  border: 3px inset #555;
  image-rendering: pixelated;
  background: #000;
}
.screenshots-swiper figcaption {
  color: #ffff66; font-size: 13px; margin-top: 6px;
  font-family: "Comic Sans MS", cursive;
}
.swiper-button-prev, .swiper-button-next { color: #00ff00 !important; }
.swiper-pagination-bullet { background: #00ffff !important; }
.screenshot-note { text-align: center; }

/* ===================================================================== */
/* Releases (rendered by releases.js) — reskinned                        */
/* ===================================================================== */
.releases { text-align: left; }
.rel-status { color:#ffcc00; font-weight:bold; }
.rel-empty { color:#aaccff; font-style: italic; }

.rel-featured {
  background: #0a0a4a;
  border: 4px double #00ff00;
  padding: 12px;
  margin: 8px 0 16px;
}
.rel-featured-head { margin-bottom: 8px; }
.rel-featured-title { }
.rel-featured-title h3 { display:inline; margin: 0 6px 0 0; color:#ffff00; font-size: 22px; font-family:"Comic Sans MS",cursive; }
.rel-tag {
  font-family:"Courier New",monospace; color:#00ff00; background:#001500;
  border:1px solid #0f0; padding: 0 4px; font-size: 13px;
}
.rel-date { color:#aaccff; font-size: 13px; }
.rel-badge {
  display:inline-block; font-family:"Comic Sans MS",cursive; font-weight:bold;
  font-size: 11px; padding: 1px 7px; margin-right: 5px; border:2px outset #888;
}
.rel-badge-latest { background:#ff0000; color:#ffff00; }
.rel-badge-pre { background:#ffaa00; color:#000; }

.rel-assets { margin: 10px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.rel-asset {
  display:inline-block; margin: 4px 6px 4px 0;
  background: silver; color:#000 !important;
  border: 3px outset #fff; padding: 4px 10px;
  font-family:"Comic Sans MS",sans-serif; font-weight:bold; font-size: 13px;
  text-decoration:none !important;
}
.rel-asset:hover { background:#ffff66; border-style: inset; }
.rel-asset::before { content: "💾 "; }
.rel-asset-name { }
.rel-asset-size { color:#333; font-size: 11px; }

/* Featured: the .zip as a big green button */
.rel-asset-primary {
  margin: 0;
  background: linear-gradient(180deg,#66ff66,#009900) !important;
  font-size: 15px; padding: 8px 16px;
}
.rel-asset-primary .rel-asset-size { color:#063; }

/* Secondary links (e.g. "ELF only") — small, to the right of the button */
.rel-asset-alts { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.rel-asset-alt {
  color:#00ffff !important; background: none; border: 0; padding: 0;
  font-family:"Courier New", monospace; font-size: 12px;
  text-decoration: underline !important;
}
.rel-asset-alt:hover { color:#ffffff !important; background:#000080; }
.rel-asset-alt .rel-asset-size { color:#8fb0d0; }

.rel-notes { color:#dfe4ff; font-size: 14px; overflow-wrap: break-word; word-break: break-word; }
.rel-notes pre { max-width: 100%; }
.rel-notes h1,.rel-notes h2,.rel-notes h3 { color:#00ff00; border:0; font-size: 16px; margin: 10px 0 4px; text-shadow:none; }
.rel-notes h2::before { content: ""; }
.rel-notes a { color:#00ffff; }
.rel-notes code { color:#00ff88; background:#001500; }
.rel-featured-foot a { color:#00ffff; font-weight:bold; }

.rel-history-heading { color:#ffcc00; font-family:"Comic Sans MS",cursive; margin: 16px 0 8px; }
.rel-history { text-align:left; }
.rel-history-item { border: 2px inset #6a6ad0; background:#101055; margin: 5px 0; }
.rel-history-item > summary {
  cursor: pointer; padding: 6px 10px; color:#ffff00; font-weight:bold; list-style:none;
}
.rel-history-item > summary::-webkit-details-marker { display:none; }
.rel-history-item > summary::before { content:"▶ "; color:#00ff00; }
.rel-history-item[open] > summary::before { content:"▼ "; }
.rel-history-tag { font-family:"Courier New",monospace; color:#00ff00; margin-right:6px; }
.rel-history-name { color:#fff; }
.rel-history-body { padding: 4px 12px 12px; }

/* Generic buttons used by releases fallback */
.btn {
  display:inline-block; text-decoration:none !important;
  background: silver; color:#000 !important;
  border:3px outset #fff; padding: 5px 14px;
  font-family:"Comic Sans MS",sans-serif; font-weight:bold;
}
.btn:hover { background:#ffff66; border-style: inset; }
.btn-primary { background: linear-gradient(180deg,#66ff66,#009900); }
.btn-ghost   { background: linear-gradient(180deg,#88ccff,#3366cc); color:#000 !important; }

/* Big CTA row under hero */
.hero-cta { margin: 10px 0 4px; }
.hero-cta .btn { margin: 4px; font-size: 15px; padding: 7px 18px; }

/* ===================================================================== */
/* Footer                                                                */
/* ===================================================================== */
.footer {
  background: #000000;
  border-top: 3px ridge #00ff00;
  color: #88ccff;
  padding: 12px 10px;
  font-size: 13px;
}
.footer a { color:#00ffff; }
.footer .copy { color:#ffff66; }
.footer .ring { margin: 8px 0; }
.email-gif {
  font-family:"Courier New",monospace; color:#00ff00; font-weight:bold;
  background:#001500; border:1px solid #0f0; padding: 1px 5px;
}

/* signature at very bottom */
.sig {
  margin: 14px auto 0; font-size: 11px; color:#6688cc;
}