/* ============================================================
   Cribblitz — patch-notes / landing page
   Static site: HTML + CSS + images only (S3-hostable, no backend).
   Palette derived from the game's "Wandering" menu aesthetic
   (THEME.md §5) and the shared UITheme.asset colors.
   ============================================================ */

:root {
  /* --- Wandering dusk palette --- */
  --sky:          rgb(170, 181, 188);   /* faded sky blue           */
  --dusk:         rgb(198, 190, 174);   /* drained mid sky          */
  --dust:         rgb(206, 186, 156);   /* pale sienna / dust        */
  --dust-deep:    rgb(190, 168, 138);

  /* --- parchment / surfaces --- */
  --parchment:    rgb(228, 214, 186);
  --parchment-2:  rgb(214, 196, 164);
  --bone:         rgb(240, 230, 209);

  /* --- inks / wood panels (UITheme SurfaceRaised / TextDark) --- */
  --ink:          rgb(40, 35, 29);
  --wood:         rgb(46, 41, 36);
  --wood-2:       rgb(57, 50, 43);
  --muted:        rgb(120, 108, 92);

  /* --- accents (UITheme Accent / Gold / Fortune valence) --- */
  --barn-red:     rgb(168, 58, 50);
  --barn-red-lo:  rgb(140, 46, 40);
  --gold:         rgb(196, 152, 74);
  --gold-bright:  rgb(226, 182, 96);
  --charm:        rgb(120, 140, 64);    /* FortuneCharm  */
  --curse:        rgb(156, 60, 48);     /* FortuneCurse  */
  --stroke:       rgb(92, 80, 64);

  --shadow:       0 10px 30px rgba(28, 22, 16, 0.28);
  --radius:       12px;

  --font-display: "Rockwell", "Roboto Slab", "Bookman Old Style", Georgia, serif;
  --font-body:    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html { min-height: 100%; background: var(--dust); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.6;
  /* gradient stretched over the full document height (no fixed-attachment,
     so it paints correctly in long pages and full-page screenshots) */
  background:
    radial-gradient(1200px 620px at 50% -120px, rgba(255, 246, 224, 0.38), transparent 70%),
    linear-gradient(180deg, var(--dusk) 0%, var(--dust) 46%, var(--dust-deep) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-font-smoothing: antialiased;
}

/* faint paper grain over the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

.page { position: relative; z-index: 1; overflow: hidden; }

a { color: var(--barn-red); }

/* ============================================================
   HERO — title wordmark over a Wandering dusk sky
   ============================================================ */
.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(360px, 60vh, 540px);
  padding: 64px 24px 132px;
  background:
    radial-gradient(80% 120% at 50% 116%, rgba(232, 178, 96, 0.42), transparent 58%),
    linear-gradient(180deg, var(--sky) 0%, var(--dusk) 52%, var(--dust) 100%);
  overflow: hidden;
}

.hero__wordmark {
  width: min(1300px, 86vw);       /* 2.5x the prior 520px cap */
  aspect-ratio: 487 / 186;        /* intrinsic ratio of menu-wordmark.png */
  position: relative;
  z-index: 3;
  /* fallback for browsers without mask support: the original (white) wordmark */
  background: center / contain no-repeat url("img/menu-wordmark.png");
  filter: drop-shadow(0 6px 14px rgba(34, 24, 14, 0.45));
}

/* Tint the wordmark to the title-screen gold with bare CSS: use the PNG as an
   alpha mask over a weathered-gold fill. No edited art. Tweak the two stops to
   match the in-game gold exactly if you have its value. */
@supports ((-webkit-mask-image: url("img/menu-wordmark.png")) or (mask-image: url("img/menu-wordmark.png"))) {
  .hero__wordmark {
    background: linear-gradient(180deg,
      rgb(245, 205, 120) 0%,
      rgb(222, 176, 92) 52%,
      rgb(176, 128, 60) 100%);
    -webkit-mask: url("img/menu-wordmark.png") center / contain no-repeat;
            mask: url("img/menu-wordmark.png") center / contain no-repeat;
  }
}

.hero__tagline {
  margin: 22px 0 0;
  position: relative;
  z-index: 3;
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.1vw + 0.6rem, 1.12rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.82;
  max-width: 36ch;
}

/* low horizon silhouette pinned to the hero base */
.hero__horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: auto;
  z-index: 2;
  color: rgb(120, 104, 84);
}

/* drifting dust motes */
.hero__mote {
  position: absolute;
  z-index: 1;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 248, 230, 0.55);
  filter: blur(0.4px);
  animation: drift linear infinite;
}
.hero__mote:nth-child(1) { top: 30%; left: -5%;  width: 3px; height: 3px; animation-duration: 26s; animation-delay: -3s; }
.hero__mote:nth-child(2) { top: 54%; left: -5%;  width: 5px; height: 5px; animation-duration: 34s; animation-delay: -12s; opacity: 0.6; }
.hero__mote:nth-child(3) { top: 68%; left: -5%;  width: 4px; height: 4px; animation-duration: 30s; animation-delay: -20s; opacity: 0.5; }
.hero__mote:nth-child(4) { top: 42%; left: -5%;  width: 3px; height: 3px; animation-duration: 40s; animation-delay: -7s;  opacity: 0.45; }

@keyframes drift {
  from { transform: translateX(0) translateY(0); }
  to   { transform: translateX(112vw) translateY(-18px); }
}

/* ============================================================
   CONTENT COLUMN
   ============================================================ */
.wrap {
  position: relative;
  z-index: 1;
  width: min(760px, 92vw);
  margin: 0 auto;
  padding: 0 0 72px;
}

/* --- intro / elevator pitch --- */
.intro {
  position: relative;
  margin: -64px auto 0;
  padding: 34px 36px 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent),
    var(--parchment);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 4;
}

.intro__lead {
  margin: 0;
  font-size: clamp(1.04rem, 0.6vw + 0.95rem, 1.22rem);
  color: rgb(48, 40, 31);
}
.intro__lead .accent { color: var(--barn-red); font-weight: 700; }

.intro__muggins {
  float: right;
  width: 168px;
  margin: 4px -8px 8px 22px;
  filter: drop-shadow(0 6px 12px rgba(34, 24, 14, 0.35));
  transform: rotate(2deg);
  shape-outside: margin-box;
}

/* ============================================================
   PATCH NOTES
   ============================================================ */
.notes-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 56px 2px 10px;
}
.notes-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2rem);
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0;
}
.notes-header .rule {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--stroke), transparent);
  border-radius: 2px;
}
.notes-intro {
  margin: 0 2px 8px;
  color: rgb(74, 64, 52);
  font-style: italic;
}

/* --- one release block --- */
.release {
  position: relative;
  margin: 26px 0 0;
  padding: 26px 30px 24px;
  background: linear-gradient(180deg, var(--wood-2), var(--wood));
  color: var(--bone);
  border: 1px solid #1f1b16;
  border-left: 5px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.release__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(196, 152, 74, 0.28);
}
.release__version {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold-bright);
  margin: 0;
  letter-spacing: 0.02em;
}
.release__date {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(176, 158, 130);
}
.release__title {
  flex-basis: 100%;
  order: 3;
  margin: -4px 0 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 400;
  font-style: italic;
  color: var(--gold);
  opacity: 0.92;
}

/* download button (per-version; omit the element if no public build) */
.release__download {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--bone);
  background: linear-gradient(180deg, var(--barn-red), var(--barn-red-lo));
  border: 1px solid #5e211c;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, 0.18), 0 3px 8px rgba(0,0,0,0.3);
  transition: transform 0.08s ease, filter 0.08s ease;
}
.release__download:hover { filter: brightness(1.12); transform: translateY(-1px); }
.release__download:active { transform: translateY(0); filter: brightness(0.96); }

/* "no build" note shown in place of the download button */
.release__nobuild {
  margin-left: auto;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(150, 134, 110);
  border: 1px dashed rgba(150, 134, 110, 0.5);
  border-radius: 8px;
  padding: 8px 14px;
}

.release__notes {
  margin: 0;
  padding: 0;
  list-style: none;
}
.release__notes li {
  position: relative;
  padding: 0 0 0 28px;
  margin: 0 0 13px;
  font-size: 1.02rem;
}
.release__notes li:last-child { margin-bottom: 0; }
.release__notes li::before {
  content: "◆";
  position: absolute;
  left: 4px;
  top: 1px;
  color: var(--gold);
  font-size: 0.78rem;
}
.release__notes b { color: var(--bone); font-weight: 700; }

/* ============================================================
   MARGIN DECOR — fortune art strewn through the gutters.
   Decorative only; hidden when there is no gutter room.
   ============================================================ */
.decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.decor img {
  position: absolute;
  width: 124px;
  filter: saturate(0.82) contrast(0.95) drop-shadow(0 6px 10px rgba(40, 28, 16, 0.22));
  opacity: 0.26;
}
.decor img:nth-child(1)  { top: 21%; left: 1.5%;  width: 134px; transform: rotate(-8deg);  opacity: 0.30; }
.decor img:nth-child(2)  { top: 26%; right: 1%;   width: 118px; transform: rotate(7deg);   opacity: 0.27; }
.decor img:nth-child(3)  { top: 33%; left: 0.5%;  width: 116px; transform: rotate(10deg);  opacity: 0.24; }
.decor img:nth-child(4)  { top: 39%; right: 1.5%; width: 92px;  transform: rotate(-6deg);  opacity: 0.30; }
.decor img:nth-child(5)  { top: 46%; left: 1.5%;  width: 120px; transform: rotate(-12deg); opacity: 0.23; }
.decor img:nth-child(6)  { top: 52%; right: 0.5%; width: 150px; transform: rotate(6deg);   opacity: 0.25; }
.decor img:nth-child(7)  { top: 59%; left: 1%;    width: 110px; transform: rotate(9deg);   opacity: 0.27; }
.decor img:nth-child(8)  { top: 65%; right: 1.5%; width: 128px; transform: rotate(-7deg);  opacity: 0.25; }
.decor img:nth-child(9)  { top: 72%; left: 2%;    width: 84px;  transform: rotate(8deg);   opacity: 0.29; }
.decor img:nth-child(10) { top: 78%; right: 1%;   width: 120px; transform: rotate(-9deg);  opacity: 0.24; }
.decor img:nth-child(11) { top: 84%; left: 1%;    width: 118px; transform: rotate(7deg);   opacity: 0.23; }
.decor img:nth-child(12) { top: 89%; right: 1.5%; width: 116px; transform: rotate(-8deg);  opacity: 0.25; }
.decor img:nth-child(13) { top: 94%; left: 2%;    width: 80px;  transform: rotate(10deg);  opacity: 0.27; }
.decor img:nth-child(14) { top: 97%; right: 2%;   width: 124px; transform: rotate(-6deg);  opacity: 0.24; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 30px 24px 48px;
  color: rgb(78, 68, 56);
  font-size: 0.86rem;
}
.site-footer .mark {
  font-family: var(--font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .decor { display: none; }            /* no gutter room — drop the margin art */
}

@media (max-width: 560px) {
  .intro { padding: 26px 22px; }
  .intro__muggins { width: 116px; margin: 0 0 6px 14px; }
  .release { padding: 22px 20px; }
  .release__head { gap: 10px; }
  .release__download, .release__nobuild { margin-left: 0; flex-basis: 100%; }
  .release__download { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__mote { animation: none; display: none; }
}