/* Feudalism — the front door.
   Same room as the game: gilt on walnut, candlelight, painted edges. What is
   different here is that the painting behind it is the whole page rather than a
   texture, so everything on top has to earn its opacity. */

:root {
  --gold: #d8a44a;
  --gold-dim: #a07a34;
  --ink: #f2ece0;
  --ink-dim: #c9bda6;
  --wood: #2a2119;
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  font: 16px/1.55 var(--font-body);
  color: var(--ink);
  background: #0d1418;
  overflow-x: hidden;
}

/* --- the painting, and the water on it -------------------------------------- */

/* Fixed rather than scrolling: the sea stays put and the page moves over it,
   which is the cheapest honest parallax there is. */
#scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
#scene img,
#scene canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Its own compositor layer. A full-screen fixed element that repaints while
     the page scrolls over it is the classic phone stutter; promoted, the scroll
     and the swell stop fighting over the same raster. */
  will-change: transform;
  backface-visibility: hidden;
  /* A hair of overscan, so the pointer parallax below never drags an edge into
     view. */
  transform: scale(1.06) translate(var(--drift-x, 0px), var(--drift-y, 0px));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* The canvas redraws the entire painting, warp and all, so it replaces the image
   rather than overlaying it — but only once it has a frame to show. */
#scene canvas { opacity: 0; }
#scene canvas,
#scene img { transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Dusk: a wash that pulls the top and bottom down so text has something to sit
   on. Without it the wordmark floats on a bright sky and every letter needs an
   outline to survive. */
#dusk {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 14, 20, 0.62) 0%, rgba(6, 14, 20, 0.10) 26%,
      rgba(6, 14, 20, 0) 45%, rgba(4, 10, 16, 0.55) 82%, rgba(3, 8, 12, 0.88) 100%);
}

main, .rails, footer { position: relative; z-index: 2; }

/* --- hero --------------------------------------------------------------------- */

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 5vh 24px 0;
}

.hero { text-align: center; }

.wordmark {
  margin: 0;
  line-height: 0;
}
.wordmark img {
  width: min(620px, 78vw);
  height: auto;
  /* TIGHT. A 34px blur here drew a dark rectangle in the sky: the chains and the
     beam reach all four edges of the PNG, so a shadow that soft stops following
     the silhouette and starts following the bounding box. This is the same
     shadow the sign wears on the topbar in the game. */
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.75));
}

.tagline {
  margin: 22px 0 26px;
  font-family: var(--font-display);
  font-size: clamp(16px, 2.6vw, 26px);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

/* CHROME, ALL OF IT FROM THE GAME. Every frame below is one of the app's own
   nine-sliced PNGs, with the slice numbers copied out of style.css rather than
   measured again — same file, same cut. A gilt border drawn in CSS next to a
   painted one is the tell that a landing page was built by somebody who had not
   seen the product. */

/* The pill, exactly as every button in the app is made: sliced left and right
   only, so the caps hold their shape and the middle grows to the label. One size
   up from the in-game button, which is what a call to action gets. */
.play {
  display: inline-block;
  padding: 14px 6px 12px;
  text-decoration: none; text-align: center;
  border-style: solid; border-width: 0 52px;
  border-image: url('/ui/button.png') 0 150 fill stretch;
  border-radius: 0;
  background: none;
  filter: saturate(1.3) brightness(1.12);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.play strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 3.4vw, 30px);
  letter-spacing: 0.10em; color: #f4e4c2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  text-transform: uppercase;
}
.play em {
  display: block;
  font-style: normal; font-size: 13px; letter-spacing: 0.14em;
  color: var(--gold); text-transform: uppercase; text-decoration: underline;
}
.play:hover { transform: translateY(-2px); filter: saturate(1.3) brightness(1.26); }
.play:active { transform: translateY(0); }

.blurb {
  max-width: 560px; margin: 22px auto 0;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--ink);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

/* --- the three showcase panels ------------------------------------------------ */

.showcase {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  align-items: center;
  gap: 18px;
  margin: 6vh 0 0;
}
/* The lobby's card, which is what these three are: a small painted panel with
   something on it. */
.showcase figure {
  margin: 0; padding: 4px 2px;
  text-align: center;
  border-style: solid; border-width: 26px 28px;
  border-image: url('/ui/panel-fine.png') 55 fill stretch;
  border-radius: 0;
  background: none;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55));
}
.showcase figcaption {
  margin-top: 10px;
  font-size: 13px; color: var(--ink-dim); letter-spacing: 0.02em;
}

.card-stack { position: relative; }
.card-stack .res {
  display: inline-block;
  width: 62px; height: 88px; margin: 0 -10px;
  background-size: cover; background-position: center;
  border: 2px solid #efe6d2; border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
  vertical-align: middle;
}
.res-sheep { background-image: url('/cards/sheep.jpg'); transform: rotate(-7deg); }
.res-wheat { background-image: url('/cards/wheat.jpg'); transform: translateY(-6px); }
.res-ore { background-image: url('/cards/ore.jpg'); transform: rotate(7deg); }

/* The cabinet frame the board itself hangs in, at a fifth of the size. Its slice
   is not symmetric — the carving down the left is wider than the one down the
   right — which is why the numbers are what they are. */
.board-frame {
  border-style: solid; border-width: 26px 28px 26px 29px;
  border-image: url('/ui/frame.png') 138 149 136 156 stretch;
  border-radius: 0;
  background: #12232c;
}
#board-art {
  display: block; height: 190px;
  background: url('/ui/home-board.jpg') center / cover no-repeat, #12232c;
}

.dice { font-size: 0; }
/* Pips, not glyphs: ⚄ is a tofu box in every display serif worth using. Five on
   a three-by-three grid, three down the diagonal. */
.die {
  display: inline-grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 4px;
  margin: 0 6px; padding: 10px;
  width: 62px; height: 62px;
  background: linear-gradient(#f6f1e4, #cfc4ad);
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}
.die i { border-radius: 50%; background: #2b2118; }
.die[aria-label="five"] i:nth-child(1) { grid-area: 1 / 1; }
.die[aria-label="five"] i:nth-child(2) { grid-area: 1 / 3; }
.die[aria-label="five"] i:nth-child(3) { grid-area: 2 / 2; }
.die[aria-label="five"] i:nth-child(4) { grid-area: 3 / 1; }
.die[aria-label="five"] i:nth-child(5) { grid-area: 3 / 3; }
.die[aria-label="three"] i:nth-child(1) { grid-area: 1 / 1; }
.die[aria-label="three"] i:nth-child(2) { grid-area: 2 / 2; }
.die[aria-label="three"] i:nth-child(3) { grid-area: 3 / 3; }
.die:first-child { transform: rotate(-8deg); }
.die:last-child { transform: rotate(6deg); }

/* --- RPG mode ------------------------------------------------------------------ */

/* The big panel, the one the game's own side rails are built from. */
.rpg {
  margin: 8vh 0 0;
  padding: 14px 18px 18px;
  border-style: solid; border-width: 30px;
  border-image: url('/ui/panel.png') 58 fill stretch;
  border-radius: 0;
  background: none;
  filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.6));
  text-align: center;
}
.eyebrow {
  margin: 0; font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold);
}
.rpg h2 {
  margin: 6px 0 12px;
  font-family: var(--font-display); font-size: clamp(26px, 4vw, 40px);
  letter-spacing: 0.05em; color: var(--ink);
}
.rpg .lead {
  max-width: 640px; margin: 0 auto;
  font-size: 17px; color: var(--ink-dim);
}

.classes {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px 26px;
  list-style: none; margin: 26px 0 6px; padding: 0;
}
.classes li { width: 96px; }
.classes i {
  display: block; width: 72px; height: 72px; margin: 0 auto 6px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
}
.classes b {
  display: block; font-family: var(--font-display); font-size: 13px;
  letter-spacing: 0.03em; color: var(--gold); font-weight: 400;
}
.classes span { display: block; font-size: 11px; color: var(--ink-dim); line-height: 1.35; }

.rpg-points {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin: 30px 0 0; text-align: left;
}
.rpg-points h3 {
  margin: 0 0 6px;
  font-family: var(--font-display); font-size: 16px; letter-spacing: 0.02em;
  color: var(--gold);
}
.rpg-points p { margin: 0; font-size: 14px; color: var(--ink-dim); }

.modes {
  margin: 26px 0 0; padding-top: 18px;
  border-top: 1px solid rgba(216, 164, 74, 0.28);
  font-size: 15px; color: var(--ink-dim);
}
.modes strong { color: var(--ink); font-weight: 400; }

/* --- rails ---------------------------------------------------------------------- */

.rails {
  max-width: 1180px; margin: 6vh auto 0; padding: 0 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.rail {
  padding: 4px 6px;
  border-style: solid; border-width: 26px 28px;
  border-image: url('/ui/panel-fine.png') 55 fill stretch;
  border-radius: 0;
  background: none;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.5));
}
.rail h2 {
  margin: 0 0 14px;
  font-family: var(--font-display); font-size: 15px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
  text-shadow: 0 1px 2px #000;
  background: url('/ui/wood.jpg') center / 220px auto;
  border-style: solid; border-width: 14px 16px;
  border-image: url('/ui/plaque.png') 70 74 75 73 fill stretch;
}
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail li { padding: 4px 0; font-size: 15px; color: var(--ink-dim); }

.legislators li { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
/* The frame is a whole picture, not a border — scaled to the box so its carved
   corners keep their proportions — and the portrait sits in a child inset to the
   opening. Copied wholesale from .face in style.css. */
.legislators .face {
  position: relative; display: block; flex: none;
  width: 64px; height: 64px;
  background: url('/ui/portrait-frame.png') center / 100% 100% no-repeat;
}
.legislators .face i {
  position: absolute; inset: 15.5%;
  background-size: cover; background-position: center top;
}
.legislators strong {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: 15px; color: var(--ink); letter-spacing: 0.02em;
}
.legislators em { font-style: normal; font-size: 12px; color: var(--gold); }
.rail-note { margin: 10px 0 0; font-size: 13px; color: var(--ink-dim); font-style: italic; }

/* --- footer --------------------------------------------------------------------- */

footer {
  max-width: 1180px; margin: 7vh auto 0; padding: 0 24px 34px;
  text-align: center;
}
/* One row off the lobby's table list, sliced wide so the corner flourishes
   survive and the plain middle stretches. */
footer nav {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0 8px;
  padding: 2px 4px;
  border-style: solid; border-width: 12px 30px;
  border-image: url('/ui/row.png') 34 84 34 84 fill stretch;
  border-radius: 0;
  background: none;
}
footer a {
  color: var(--ink-dim); text-decoration: none; font-size: 14px; padding: 0 8px;
}
footer a + a { border-left: 1px solid rgba(216, 164, 74, 0.3); }
footer a:hover { color: var(--gold); }

/* --- narrow ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; }
  .rpg-points { grid-template-columns: 1fr; }
  .rails { grid-template-columns: 1fr; }

  /* The frames are pictures, and a 30px picture either side of a 375px screen is
     a third of the page spent on carving. They come down; the slice is the same,
     so the ornament shrinks rather than being cropped. */
  .rpg { border-width: 18px; padding: 8px 6px 12px; }
  .showcase figure, .rail { border-width: 18px 20px; }
  .board-frame { border-width: 16px 17px 16px 18px; }
  footer nav { border-width: 10px 22px; }
  .play { border-width: 0 40px; }
}

/* Somebody who has asked for less motion gets the painting, still. */
@media (prefers-reduced-motion: reduce) {
  #scene img, #scene canvas { transition: none; }
}