/* Scoped to the WyrmStar page only (body.wyrmstar-page) — reskins the
   surrounding site chrome to read like the app itself: bitmap chrome font,
   monospace body copy, black-on-white "windows" floating on a dithered
   Windows-95-teal desktop, instead of Nuclear Tiger's orange/Figtree/
   Righteous look. */

body.wyrmstar-page {
  background-color: #008080;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M0 0h1v1H0z' fill='%23000000' fill-opacity='0.08'/%3E%3C/svg%3E");
  background-size: 2px 2px;
  image-rendering: pixelated;
  color: #000;
}

.wyrmstar-page .header-container {
  background: #fff;
  border-bottom: 3px solid #000;
  padding-bottom: 6px;
}

.wyrmstar-page .header-title {
  font-family: "Silkscreen", monospace;
  font-size: 150%;
  text-shadow: none;
  letter-spacing: 2px;
  margin-top: 10px;
}

.wyrmstar-page .header-tagline {
  font-family: "Silkscreen", monospace;
  font-weight: 400;
  letter-spacing: 3px;
  margin-top: 4px;
}

.wyrmstar-page .header-links {
  background: #000;
}

.wyrmstar-page .header-link {
  font-family: "Silkscreen", monospace;
}

.wyrmstar-page .divider,
.wyrmstar-page .short-divider {
  border-style: none none dashed;
  border-color: #000;
}

.wyrmstar-page .figtree-subheader {
  font-family: "Silkscreen", monospace;
  letter-spacing: 1px;
}

.wyrmstar-page .page-brief {
  font-family: "Courier Prime", "Courier New", monospace;
  line-height: 1.6;
  max-width: 68ch;
}

.wyrmstar-page .footer {
  font-family: "Silkscreen", monospace;
}

/* ---------- title-bar hero ---------- */

.ws-window {
  background: #fff;
  border: 3px solid #000;
  margin: 20px;
}

.ws-titlebar {
  height: 28px;
  border-bottom: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    #000 3px 4px,
    transparent 4px 7px
  );
}

.ws-titlebar span {
  background: #fff;
  font-family: "Silkscreen", monospace;
  font-size: 13px;
  letter-spacing: 2px;
  padding: 0 10px;
}

.ws-hero {
  padding: 20px;
  text-align: center;
}

.ws-hero img {
  border: 2px solid #000;
  max-width: 100%;
  height: auto;
}

/* ---------- download button, restyled to match .btn chrome ---------- */

.wyrmstar-page .download-cta {
  font-family: "Silkscreen", monospace;
  border-radius: 0;
}

/* ---------- gallery / carousel ---------- */

.ws-gallery {
  position: relative;
  margin: 20px;
}

.ws-gallery-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px;
  border: 3px solid #000;
  background: #fff;
}

.ws-gallery-item {
  flex: none;
  width: min(720px, 86vw);
  scroll-snap-align: center;
}

.ws-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid #000;
}

.ws-gallery-caption {
  font-family: "Silkscreen", monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-align: center;
  padding: 6px 0 2px;
}

.ws-gallery-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.ws-gallery-controls button {
  font-family: "Silkscreen", monospace;
  border: 2px solid #000;
  background: #fff;
  padding: 6px 14px;
  cursor: pointer;
}

.ws-gallery-controls button:hover {
  background: #000;
  color: #fff;
}

.ws-feature-list {
  font-family: "Courier Prime", "Courier New", monospace;
  line-height: 1.7;
  max-width: 68ch;
  padding-left: 20px;
  padding-right: 20px;
}

.ws-note {
  font-family: "Courier Prime", "Courier New", monospace;
  border: 2px dashed #000;
  padding: 10px 14px;
  margin: 20px;
  max-width: 68ch;
  font-size: 90%;
}