/* Bloomshire -- the front door.
 *
 * The page is built from the game's own interface: the pack's parchment
 * 9-slice, its banner plate, its buttons and slots, the game's 5x7 letters.
 * One rule holds everything together: a UI pixel is --px CSS pixels, and
 * every size, border, offset and shadow is a whole number of them.
 */

@font-face {
  font-family: 'Bloomshire Pixel';
  src: url(../fonts/bloomshire-pixel.woff) format('woff'), url(../fonts/bloomshire-pixel.ttf) format('truetype');
  font-display: block;
}

:root {
  /* the game's palette (src/ui/UIKit.js C) */
  --ink: #37101a;
  --ink-text: #3a1410;
  --parchment: #dc9b78;
  --parchment-hi: #f0c8a0;
  --parchment-lo: #b26247;
  --edge: #8c3c32;
  --cream: #ffeccd;
  --accent: #e7945d;
  --hot: #a5320f;
  --dim: #8c5a44;
  --gold: #c8730f;
  --valley: #0e9459;
  --backdrop: #37101a;
  --backdrop-deep: #240a11;

  --px: 2px;
  --logo: 3px;
  --font: 'Bloomshire Pixel', ui-monospace, monospace;
  color-scheme: dark;
}
@media (min-width: 720px) and (min-height: 560px) { :root { --logo: 4px; } }
@media (min-width: 1100px) and (min-height: 700px) { :root { --px: 3px; --logo: 6px; } }
@media (min-width: 2200px) and (min-height: 1200px) { :root { --px: 4px; --logo: 8px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--backdrop-deep); scroll-behavior: auto; }
/* THE PACK'S OWN POINTER (designer, Phase 16): the brown hand from
     UI/Mouse (Mouse.png), and its pressing hand (MouseClick.png) while a mouse
     button is held -- every element, links and buttons too, except text
     fields, which keep their I-beam. Drawn at 32px from the 16px art (64px on
     sharp screens), pointing from the fingertip of each hand. */
*,*::before,*::after{cursor:url(../assets/ui/cursor.png) 2 2,auto!important;
  cursor:-webkit-image-set(url(../assets/ui/cursor.png) 1x,url(../assets/ui/cursor@2x.png) 2x) 2 2,auto!important;
  cursor:image-set(url(../assets/ui/cursor.png) 1x,url(../assets/ui/cursor@2x.png) 2x) 2 2,auto!important}
html.pressing,html.pressing *{cursor:url(../assets/ui/cursor_click.png) 11 1,auto!important;
  cursor:-webkit-image-set(url(../assets/ui/cursor_click.png) 1x,url(../assets/ui/cursor_click@2x.png) 2x) 11 1,auto!important;
  cursor:image-set(url(../assets/ui/cursor_click.png) 1x,url(../assets/ui/cursor_click@2x.png) 2x) 11 1,auto!important}
input:not([type=button]):not([type=submit]):not([type=checkbox]),textarea{cursor:text!important}
body {
  margin: 0;
  font-family: var(--font);
  font-size: calc(8 * var(--px));
  line-height: calc(11 * var(--px));
  color: var(--ink-text);
  background: var(--backdrop-deep);
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  overflow-x: hidden;
}
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: inherit; }
p { margin: 0 0 calc(4 * var(--px)); }
p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- the world */
.world, .world-fallback {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0;
}
.world { display: block; }
/* WHAT IS ON SCREEN WHILE THE WORLD LOADS. It used to be the bare plate at
   full brightness, so when the finished frame arrived -- which carries the
   darkened reading layer down its left side -- the picture visibly dimmed.
   The same ramp is painted over the plate here, so the two look alike and the
   hand-over reads as the scene sharpening rather than the lights going out. */
.world-fallback {
  background:
    linear-gradient(100deg, rgba(9,12,18,.92) 0%, rgba(9,12,18,.86) 26%,
                            rgba(9,12,18,.45) 48%, rgba(9,12,18,.12) 68%, rgba(9,12,18,0) 82%),
    #1d3a2a url(../visuals/v2/farm.png) center / cover no-repeat;
  image-rendering: pixelated;
}
/* THE CANVAS ARRIVES, IT DOES NOT SNAP IN. The fallback is the farm plate
   stretched to cover; the canvas draws the same farm at its own camera, so
   swapping one for the other in a single frame reads as a jolt. A short fade
   turns that into the picture settling. */
.world-fallback { transition: opacity .28s linear; }
.world-ready .world-fallback { opacity: 0; pointer-events: none; }
.still .world-fallback, .no-js .world-fallback { transition: none; }
.no-js .world, .world-failed .world { display: none; }

/* ---------------------------------------------------------------- type */
.skip {
  position: fixed; left: calc(4 * var(--px)); top: calc(4 * var(--px)); z-index: 50;
  transform: translateY(-300%);
}
.skip:focus { transform: none; }

/* ---------------------------------------------------------------- the pack's parchment */
.panel {
  position: relative;
  border: calc(5 * var(--px)) solid transparent;
  border-image: url(../assets/ui/panel.png) 5 fill / calc(5 * var(--px)) repeat;
  image-rendering: pixelated;
  box-shadow: calc(2 * var(--px)) calc(3 * var(--px)) 0 rgb(0 0 0 / .35);
  color: var(--ink-text);
}
.frame {
  display: inline-block;
  border: calc(5 * var(--px)) solid transparent;
  border-image: url(../assets/ui/frame.png) 5 / calc(5 * var(--px)) repeat;
  image-rendering: pixelated;
  background: var(--parchment-lo);
  line-height: 0;
}
.frame canvas, .frame img { display: block; }

/* The banner plate, left cap / body / right cap, as the game builds it */
.banner {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(17 * var(--px));
  min-width: calc(40 * var(--px));
  margin: 0;
  padding: 0 calc(10 * var(--px));
  font: inherit; font-weight: normal;
  font-size: calc(8 * var(--px));
  line-height: calc(17 * var(--px));
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cream);
  text-shadow: 0 var(--px) 0 var(--ink);
  background:
    url(../assets/ui/banner_l.png) left top / calc(9 * var(--px)) 100% no-repeat,
    url(../assets/ui/banner_r.png) right top / calc(9 * var(--px)) 100% no-repeat,
    url(../assets/ui/banner_m.png) left top / calc(20 * var(--px)) 100% repeat-x;
  background-clip: border-box, border-box, content-box;
  background-origin: border-box, border-box, border-box;
  image-rendering: pixelated;
}
.banner--name { min-width: 0; padding: 0 calc(9 * var(--px)); }

/* ---------------------------------------------------------------- buttons */
.btn {
  --lift: 0px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: calc(3 * var(--px));
  min-height: calc(21 * var(--px));
  padding: 0 calc(5 * var(--px));
  border: calc(6 * var(--px)) solid transparent;
  border-image: url(../assets/ui/btn0.png) 6 fill / calc(6 * var(--px)) repeat;
  image-rendering: pixelated;
  font: inherit;
  line-height: calc(9 * var(--px));
  color: var(--ink-text);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  background: none;
  cursor: pointer;
  box-shadow: 0 var(--px) 0 var(--ink);
  transform: translateY(var(--lift));
  transition: transform 90ms steps(1, end), box-shadow 90ms steps(1, end);
}
.btn::after {           /* the cream highlight a button catches when you point at it */
  content: ''; position: absolute; left: 0; right: 0; top: calc(-3 * var(--px));
  height: var(--px); background: var(--cream); opacity: 0;
}
.btn:hover { --lift: calc(-1 * var(--px)); box-shadow: 0 calc(2 * var(--px)) 0 var(--ink); }
.btn:hover::after, .btn:focus-visible::after { opacity: 1; }
.btn:active { --lift: var(--px); box-shadow: 0 0 0 var(--ink); border-image-source: url(../assets/ui/btn1.png); color: var(--cream); }
.btn:focus-visible, .title-menu__item:focus-visible, .menu__item:focus-visible, .tab:focus-visible, .foot a:focus-visible, .hud__mark:focus-visible {
  outline: var(--px) solid var(--cream);
  outline-offset: var(--px);
  box-shadow: 0 0 0 calc(2 * var(--px)) var(--ink);
}
.btn__icon { width: calc(7 * var(--px)); height: calc(7 * var(--px)); }
.btn--big { min-height: calc(27 * var(--px)); padding: 0 calc(9 * var(--px)); font-size: calc(8 * var(--px)); }
.btn--big .btn__icon { width: calc(9 * var(--px)); height: calc(9 * var(--px)); }
.btn--wide { width: 100%; }
.btn--quiet { border-image-source: url(../assets/ui/btn1.png); color: var(--cream); text-shadow: 0 var(--px) 0 var(--ink); }
.btn--quiet:active { border-image-source: url(../assets/ui/btn0.png); color: var(--ink-text); text-shadow: none; }
/* the music key (Phase 16 revision): the pack's sound icon, struck through while the theme is not playing */
.btn--sound { padding: 0 calc(3 * var(--px)); }
.btn--sound .btn__icon { width: calc(9 * var(--px)); height: calc(9 * var(--px)); image-rendering: pixelated; }
.btn--sound.is-off .btn__icon { opacity: .85; }
.btn--sound.is-off::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: calc(13 * var(--px)); height: var(--px);
  background: var(--cream); box-shadow: 0 var(--px) 0 var(--ink);
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ---------------------------------------------------------------- moments */
/* A beat is a stretch of page to scroll through; its window sits on the
   screen, over the world, for as long as its scene is on. Without script the
   windows sit in the page, each over a still of its scene. */
.journey { position: relative; z-index: 1; }
.moment, .span { position: relative; height: calc(var(--h, 100) * 1vh); height: calc(var(--h, 100) * 1svh); }
.moment--year { height: auto; }
.moment__ui {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
  padding: calc(34 * var(--px)) calc(20 * var(--px)) calc(12 * var(--px));
  pointer-events: none;
}
.moment__ui--span { margin-bottom: -100vh; margin-bottom: -100svh; }
html:not(.no-js) .moment__ui { position: fixed; inset: 0; height: auto; margin: 0; z-index: 2; }
html:not(.no-js) .moment.is-live .moment__ui { z-index: 3; }
.moment__ui > * { pointer-events: auto; }
html:not(.no-js) .moment:not(.is-live) .moment__ui > * { pointer-events: none; }
.place-left .moment__ui { justify-content: flex-start; }
.place-right .moment__ui { justify-content: flex-end; }
.place-center .moment__ui { justify-content: center; }
.place-bottom .moment__ui { justify-content: center; align-items: flex-end; padding-bottom: calc(10 * var(--px)); }

/* a window opens in three steps and settles two pixels, like the game's.
   A closed one is only unseen: it stays in the page, to be read aloud or
   tabbed into (which brings its scene on). */
.moment .panel, .moment .bare {
  opacity: 0;
  transform: translateY(calc(2 * var(--px)));
  transition: opacity 240ms steps(3, end), transform 240ms steps(2, end);
}
.moment.is-live .panel, .moment.is-live .bare { opacity: 1; transform: none; }
.no-js .moment .panel, .no-js .moment .bare, .still .moment .panel, .still .moment .bare { transition: none; }
.no-js .moment .panel, .no-js .moment .bare { opacity: 1; transform: none; }
.no-js .moment { background: var(--plate) center / cover no-repeat; image-rendering: pixelated; }
/* without script there is no one to draw a face */
.no-js .span { height: 50vh; }
.no-js .say__face, .no-js .dialog__portrait, .no-js .faces .frame, .no-js .lineup { display: none; }

/* ---------------------------------------------------------------- the title screen */
.place-title .moment__ui { justify-content: flex-start; align-items: center; padding-top: calc(12 * var(--px)); }
.title { display: flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--px)); }
.title__name { margin: 0; line-height: 0; }

/* THE NAME. The designer's logo goes in assets/brand/ and shows wherever the
   page names Bloomshire; until it is there, the name is set plainly in the
   game's letters -- a stand-in, not a logo. */
.brand { display: inline-flex; align-items: center; margin: 0; line-height: 0; }
/* The logo is ARTWORK, not a 1:1 pixel grid: 489x186 with soft edges. So it
   is scaled smoothly and never drawn larger than it is -- pixelating it would
   only chew its own anti-aliasing. */
.brand__logo { display: block; width: auto; max-width: 100%; height: auto; image-rendering: auto; }
.brand__word { display: block; text-transform: uppercase; white-space: nowrap; }
.title__name .brand__logo { width: clamp(260px, 34vw, 489px); }
.title__name .brand__word {
  font-size: calc(16 * var(--logo)); line-height: calc(16 * var(--logo));
  color: var(--cream);
  text-shadow:
    var(--logo) 0 0 var(--ink), calc(-1 * var(--logo)) 0 0 var(--ink), 0 var(--logo) 0 var(--ink), 0 calc(-1 * var(--logo)) 0 var(--ink),
    0 calc(2 * var(--logo)) 0 var(--ink);
}
.title__tagline {
  margin: 0 0 calc(4 * var(--px)) calc(2 * var(--logo));
  color: var(--cream);
  font-size: calc(8 * var(--px));
  text-shadow: var(--px) 0 0 var(--ink), calc(-1 * var(--px)) 0 0 var(--ink), 0 var(--px) 0 var(--ink), 0 calc(-1 * var(--px)) 0 var(--ink), 0 calc(2 * var(--px)) 0 var(--ink);
}
.title-menu { display: flex; flex-direction: column; align-items: flex-start; gap: calc(3 * var(--px)); margin-left: calc(2 * var(--logo)); }
.title-menu .btn--big { margin-bottom: calc(4 * var(--px)); }
.title-menu__item, .menu__item {
  position: relative;
  display: inline-block;
  padding: calc(1 * var(--px)) calc(2 * var(--px)) calc(1 * var(--px)) calc(11 * var(--px));
  color: var(--cream);
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: var(--px) 0 0 var(--ink), calc(-1 * var(--px)) 0 0 var(--ink), 0 var(--px) 0 var(--ink), 0 calc(-1 * var(--px)) 0 var(--ink), 0 calc(2 * var(--px)) 0 var(--ink);
}
/* the menu cursor: the pack's play arrow, the way a title screen points */
.title-menu__item::before, .menu__item::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: calc(7 * var(--px)); height: calc(7 * var(--px)); margin-top: calc(-4 * var(--px));
  background: url(../assets/ui/icon_play_light.png) center / 100% no-repeat;
  image-rendering: pixelated;
  opacity: 0;
}
.title-menu__item:hover, .title-menu__item:focus-visible, .menu__item:hover, .menu__item:focus-visible { transform: translateX(var(--px)); }
.title-menu__item:hover::before, .title-menu__item:focus-visible::before, .menu__item:hover::before, .menu__item:focus-visible::before { opacity: 1; }

.prompt {
  position: absolute; left: 0; right: 0; bottom: calc(10 * var(--px));
  display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--px));
  margin: 0;
  color: var(--cream);
  text-transform: uppercase;
  text-shadow: 0 var(--px) 0 var(--ink);
  animation: blink 1.2s steps(2, jump-none) infinite;
}
.prompt__arrow { width: calc(7 * var(--px)); height: calc(7 * var(--px)); transform: rotate(90deg); }
@keyframes blink { from { opacity: 1; } to { opacity: .35; } }
.moment--title .title, .moment--title .prompt { transition: opacity 240ms steps(3, end); }
.moment--title:not(.is-live) .title { opacity: 0; }
/* (the blink is an animation, and an animation outranks a plain opacity) */
.moment--title:not(.is-live) .prompt { animation: none; opacity: 0; }
.no-js .moment--title .title, .no-js .moment--title .prompt { opacity: 1; }

/* ---------------------------------------------------------------- cards */
.card {
  width: calc(150 * var(--px));
  max-width: 100%;
  padding: calc(8 * var(--px)) calc(5 * var(--px)) calc(4 * var(--px));
}
.card > .banner:first-child {
  position: absolute; left: 50%; top: calc(-14 * var(--px));
  transform: translateX(-50%);
}
.card--wide { width: calc(250 * var(--px)); }
.card--farmer { width: calc(198 * var(--px)); }
.card--map { width: calc(170 * var(--px)); }
.card__lead { color: var(--hot); }
.card__note { color: var(--dim); }
.card__small { color: var(--dim); font-size: calc(8 * var(--px)); margin-top: calc(-2 * var(--px)); }
.rule {
  height: calc(2 * var(--px)); margin: calc(3 * var(--px)) 0 calc(4 * var(--px));
  border: 0; background: linear-gradient(var(--edge) 50%, var(--parchment-hi) 50%);
}

/* item wells: the pack's inventory slot, an item icon at 1:1 in each */
.slots { display: flex; flex-wrap: wrap; gap: calc(2 * var(--px)); margin: 0 0 calc(4 * var(--px)); padding: 0; list-style: none; }
.slots li {
  width: calc(20 * var(--px)); height: calc(20 * var(--px));
  display: grid; place-items: center;
  background: url(../assets/ui/slot.png) center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.slots img { width: calc(16 * var(--px)); height: calc(16 * var(--px)); transition: transform 90ms steps(1, end); }
/* pointed at, a slot does what the game's inventory does: it lights, the item lifts */
.slots li:hover { background-image: url(../assets/ui/slot_sel.png); }
.slots li:hover img { transform: translateY(calc(-1 * var(--px))); }
.slots--night li { filter: none; }

/* a villager has a word: their face in a frame, and the line */
.say { display: flex; align-items: flex-start; gap: calc(4 * var(--px)); margin: calc(3 * var(--px)) 0 0; }
.say__face canvas { width: calc(24 * var(--px)); height: calc(24 * var(--px)); }
.say__bubble {
  position: relative; flex: 1;
  margin: 0;
  padding: calc(3 * var(--px)) calc(4 * var(--px));
  background: var(--parchment-hi);
  box-shadow: 0 0 0 var(--px) var(--edge);
  color: var(--ink-text);
}
.say__bubble::before {        /* a three-step pixel tail pointing at the face */
  content: ''; position: absolute; left: calc(-2 * var(--px)); top: calc(5 * var(--px));
  width: var(--px); height: var(--px);
  box-shadow:
    0 0 0 var(--edge), 0 var(--px) 0 var(--edge), 0 calc(2 * var(--px)) 0 var(--edge),
    var(--px) calc(-1 * var(--px)) 0 var(--edge), var(--px) 0 0 var(--parchment-hi), var(--px) var(--px) 0 var(--parchment-hi), var(--px) calc(2 * var(--px)) 0 var(--parchment-hi), var(--px) calc(3 * var(--px)) 0 var(--edge);
}
.say__bubble cite { display: block; margin-top: calc(2 * var(--px)); color: var(--dim); font-style: normal; }
.say__bubble cite::before { content: '- '; }

/* the nine faces of the valley */
.faces { display: flex; flex-wrap: wrap; gap: calc(3 * var(--px)) calc(4 * var(--px)); margin: calc(2 * var(--px)) 0 calc(4 * var(--px)); padding: 0; list-style: none; }
.faces li { display: flex; flex-direction: column; align-items: center; gap: var(--px); color: var(--dim); }
.faces .frame canvas { width: calc(24 * var(--px)); height: calc(24 * var(--px)); }

/* the character compositor's farmers, idling -- doubled in a framed box,
   the way the game's own creator screen shows its farmer */
.lineup {
  --k: 2;                   /* the creator doubles its farmer; a phone shows them 1:1 */
  display: grid; grid-template-columns: repeat(3, calc(28 * var(--k) * var(--px)));
  justify-content: center;
  margin: 0 0 calc(4 * var(--px));
  padding: calc(1 * var(--px)) 0;
  width: 100%;
}
.lineup canvas { width: calc(28 * var(--k) * var(--px)); height: calc(34 * var(--k) * var(--px)); }

/* a snapshot of an interior, in the pack's frame, one game pixel to one UI pixel */
.snap { display: block; margin: 0 0 calc(3 * var(--px)); }
.card--make { width: calc(160 * var(--px)); }
.snap img { width: calc(128 * var(--px)); height: calc(88 * var(--px)); }
.snap figcaption { color: var(--dim); line-height: calc(10 * var(--px)); padding-bottom: calc(2 * var(--px)); }

/* bare words over the world, for the one scene that is dark enough */
.bare { max-width: calc(170 * var(--px)); }
.bare__title {
  margin: 0 0 calc(4 * var(--px));
  font-size: calc(24 * var(--px)); line-height: calc(26 * var(--px));
  font-weight: normal; text-transform: uppercase;
  color: var(--cream);
  text-shadow:
    calc(2 * var(--px)) 0 0 var(--ink), calc(-2 * var(--px)) 0 0 var(--ink), 0 calc(2 * var(--px)) 0 var(--ink), 0 calc(-2 * var(--px)) 0 var(--ink),
    0 calc(4 * var(--px)) 0 var(--backdrop-deep);
}
.bare__line { color: #cfe2ff; text-shadow: 0 var(--px) 0 var(--ink); margin-bottom: calc(6 * var(--px)); }
.slots--night li { background-image: url(../assets/ui/slot_sel.png); }

/* the season switch */
.seasons { display: flex; flex-wrap: wrap; gap: calc(2 * var(--px)); margin: 0 0 calc(4 * var(--px)); }
.tab {
  font: inherit; text-transform: uppercase; cursor: pointer;
  min-height: calc(17 * var(--px));
  padding: 0 calc(3 * var(--px));
  border: calc(6 * var(--px)) solid transparent;
  border-image: url(../assets/ui/btn1.png) 6 fill / calc(6 * var(--px)) repeat;
  image-rendering: pixelated;
  color: var(--parchment-hi); background: none;
  line-height: calc(9 * var(--px));
}
.tab { position: relative; color: rgb(240 200 160 / .8); }
.tab.is-on {
  border-image-source: url(../assets/ui/btn0.png); color: var(--ink-text);
  transform: translateY(calc(-1 * var(--px)));
  box-shadow: 0 var(--px) 0 var(--ink);
}
.tab.is-on::after {         /* the selected season catches the light, like a pointed-at button */
  content: ''; position: absolute; left: 0; right: 0; top: calc(-3 * var(--px)); height: var(--px); background: var(--cream);
}
.tab:hover { transform: translateY(calc(-1 * var(--px))); }

/* the dialog box, as DialogUI lays it out: name plate, role, words, face */
.dialog {
  width: min(calc(300 * var(--px)), 100%);
  margin: 0;
  padding: calc(10 * var(--px)) calc(41 * var(--px)) calc(4 * var(--px)) calc(5 * var(--px));
}
.dialog__head { display: block; }
.dialog__head .banner--name { position: absolute; left: calc(2 * var(--px)); top: calc(-14 * var(--px)); }
/* the role sits inside the box, right-aligned before the face, as DialogUI has it */
.dialog__role { position: absolute; right: calc(38 * var(--px)); top: calc(1 * var(--px)); color: var(--dim); line-height: calc(9 * var(--px)); }
.dialog__line { margin: 0 0 calc(5 * var(--px)); quotes: none; }
.dialog__replies { display: flex; gap: calc(3 * var(--px)); }
.dialog__portrait { position: absolute; right: calc(2 * var(--px)); top: calc(2 * var(--px)); }
.dialog__portrait canvas { width: calc(24 * var(--px)); height: calc(24 * var(--px)); }

/* the last screen */
.end { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--px)); padding: calc(12 * var(--px)) calc(14 * var(--px)) calc(10 * var(--px)); text-align: center; width: calc(176 * var(--px)); max-width: 100%; }
.end__logo { margin-bottom: calc(2 * var(--px)); }
.end__logo .brand__logo { width: 250px; }
.end__logo .brand__word { font-size: calc(16 * var(--px)); line-height: calc(16 * var(--px)); color: var(--ink-text); text-shadow: 0 var(--px) 0 var(--parchment-hi); }
.end__lead { color: var(--hot); margin: 0; }
.end__line { margin: 0 0 calc(4 * var(--px)); }
.end__small { color: var(--dim); margin: calc(2 * var(--px)) 0 0; }


/* ---------------------------------------------------------------- what the cards show
   Small rows of the game's own pictures: a crop's stages, the stones in the
   rock, the animals, the skills. They carry the meaning; the words beside
   them are a handful at most. */

/* A CROP, STAGE BY STAGE: the packet, four beds, the carrot in your hand.
   The stage sprites are 16x32 (the pack draws trellises and tall leaves into
   the top half), so they sit on a shared base line. */
.strip { display: flex; align-items: flex-end; gap: calc(2 * var(--px)); margin: 0 0 calc(4 * var(--px)); padding: 0; list-style: none; }
.strip li { display: flex; align-items: flex-end; justify-content: center; padding: calc(2 * var(--px)); background: var(--parchment-lo); box-shadow: 0 0 0 var(--px) var(--edge); }
.strip img { display: block; image-rendering: pixelated; }
.strip--grow img { width: calc(16 * var(--px)); height: calc(32 * var(--px)); }
.strip--grow li:first-child img, .strip--grow .strip__end img { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
.strip__end { background: var(--parchment-hi); }

/* THE ANIMALS, each cut out of its 64px cell so the row is faces, not padding */
.beasts { display: flex; flex-wrap: wrap; gap: calc(2 * var(--px)); margin: 0; padding: 0; list-style: none; }
.beasts li {
  position: relative; overflow: hidden;
  width: calc(38 * var(--px)); height: calc(34 * var(--px));
  background: url(../assets/ui/slot.png) center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.beasts img { position: absolute; left: calc(-13 * var(--px)); top: calc(-19 * var(--px)); width: calc(64 * var(--px)); height: calc(64 * var(--px)); }

/* THE SKILLS: the game's own ten, nine of them in a square, named and no more */
/* minmax(0, 1fr), not 1fr: a plain 1fr will not shrink below its widest
   word, so "Woodcutting" pushed the third column -- icons and all -- out
   through the side of the card. */
.skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(3 * var(--px)) calc(2 * var(--px)); margin: 0; padding: 0; list-style: none; }
.skills li { display: flex; flex-direction: column; align-items: center; gap: var(--px); min-width: 0; color: var(--dim); text-align: center; line-height: calc(9 * var(--px)); overflow-wrap: anywhere; }
.slot {
  display: grid; place-items: center;
  width: calc(20 * var(--px)); height: calc(20 * var(--px));
  background: url(../assets/ui/slot.png) center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.slot img { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }

/* THE STONES, as they sit in the rock */
.stones { display: flex; flex-wrap: wrap; gap: calc(2 * var(--px)); margin: 0 0 calc(4 * var(--px)); padding: 0; list-style: none; }
.stones li { padding: calc(2 * var(--px)); background: #3f4a63; box-shadow: 0 0 0 var(--px) #272f42; }
.stones img { display: block; width: calc(16 * var(--px)); height: calc(16 * var(--px)); image-rendering: pixelated; }

/* the HUD's keys: log in, menu, play -- the game's buttons, nothing more */
.hud__keys { display: flex; align-items: flex-start; gap: calc(3 * var(--px)); }

/* ---------------------------------------------------------------- the HUD */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: calc(4 * var(--px)) calc(5 * var(--px));
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 240ms steps(3, end), visibility 0s linear 240ms;
}
.hud > * { pointer-events: auto; }
.hud-on .hud { opacity: 1; visibility: visible; transition: opacity 240ms steps(3, end), visibility 0s; }
.no-js .hud { display: none; }
.hud__mark { line-height: 0; padding: calc(2 * var(--px)); text-decoration: none; transition: opacity 240ms steps(3, end); }
/* on the title screen the logo is already the page: the HUD's own mark goes */
.title-live .hud__mark { opacity: 0; visibility: hidden; }
.hud__mark .brand__logo { width: 124px; }
.hud__mark .brand__word {
  font-size: calc(8 * var(--px)); line-height: calc(11 * var(--px));
  color: var(--cream);
  text-shadow: var(--px) 0 0 var(--ink), calc(-1 * var(--px)) 0 0 var(--ink), 0 var(--px) 0 var(--ink), 0 calc(-1 * var(--px)) 0 var(--ink), 0 calc(2 * var(--px)) 0 var(--ink);
}
.hud__right { display: flex; align-items: flex-start; gap: calc(3 * var(--px)); }
.hud .btn { min-height: calc(19 * var(--px)); }

/* ---------------------------------------------------------------- the menu */
.menu {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: rgb(36 10 17 / .6);
}
.menu[hidden] { display: none; }
.menu__panel { width: calc(120 * var(--px)); padding: calc(12 * var(--px)) calc(8 * var(--px)) calc(6 * var(--px)); display: flex; flex-direction: column; gap: calc(3 * var(--px)); }
.menu__panel > .banner { position: absolute; left: 50%; top: calc(-14 * var(--px)); transform: translateX(-50%); }
.menu__list { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.menu__list .btn--play { margin-bottom: calc(3 * var(--px)); }
.menu__item { color: var(--ink-text); text-shadow: none; }
.menu__item::before { background-image: url(../assets/ui/icon_play_dark.png); }
.menu__close { align-self: center; margin-top: calc(4 * var(--px)); }
.menu-open { overflow: hidden; }

/* ---------------------------------------------------------------- the foot */
.foot {
  position: relative; z-index: 1;
  padding: calc(10 * var(--px)) calc(20 * var(--px)) calc(12 * var(--px));
  background: var(--backdrop-deep);
  box-shadow: 0 calc(-2 * var(--px)) 0 var(--ink);
  color: var(--parchment-hi);
  text-align: center;
}
.foot p { margin: 0 0 calc(3 * var(--px)); }
.foot img { width: calc(8 * var(--px)); height: calc(8 * var(--px)); vertical-align: calc(-1 * var(--px)); }
.foot a { color: var(--cream); }

/* the links sit on one line and wrap to two on a phone, separated by a dot so
   they read as a row rather than a list */
.foot__links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: calc(3 * var(--px)) calc(8 * var(--px));
}
.foot__links a { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); }
.foot__links a + a::before {
  content: ''; margin-right: calc(8 * var(--px));
  width: calc(2 * var(--px)); height: calc(2 * var(--px));
  background: var(--dim);
}
.foot__links img { vertical-align: baseline; }
.foot__legal { color: var(--dim); }
/* wrapped onto several lines the dots strand at the start of a row, so on a
   phone the gap does the separating instead */
@media (max-width: 719px) {
  .foot__links a + a::before { display: none; }
  .foot__links { gap: calc(4 * var(--px)) calc(7 * var(--px)); }
}

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 719px), (max-height: 520px) {
  .moment__ui { padding: calc(26 * var(--px)) calc(5 * var(--px)) calc(6 * var(--px)); align-items: flex-end; justify-content: center !important; }
  /* the title docks along the bottom like every other window: the scene's
     subject is in the upper part of a phone, and the camera does not move */
  .place-title .moment__ui { align-items: flex-end; padding-bottom: calc(34 * var(--px)); }
  .title__name .brand__logo { width: min(82vw, 360px); }
  .end__logo .brand__logo { width: min(66vw, 250px); }
  /* the barnyard is at the valley's southern edge: nothing below it for the
     camera to show, so its window docks at the top instead */
  .dock-top .moment__ui { align-items: flex-start; padding-top: calc(42 * var(--px)); }
  .title { align-items: center; width: 100%; }
  .title__tagline, .title-menu { margin-left: 0; }
  .title-menu { align-items: center; }
  .card, .card--wide, .card--farmer, .card--make, .end { width: 100%; }
  .lineup { --k: 1; }
  .dialog { padding-right: calc(41 * var(--px)); }
  /* the nine faces become a roster you swipe along, one row high */
  .faces {
    flex-wrap: nowrap; justify-content: flex-start; gap: calc(3 * var(--px));
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    padding-bottom: calc(2 * var(--px)); scrollbar-width: none;
  }
  .faces::-webkit-scrollbar { display: none; }
  .faces li { scroll-snap-align: start; flex: none; }
  /* a phone's HUD: the menu and the way in */
  .hud__mark, .hud__keys .btn--quiet { display: none; }
  .hud { justify-content: flex-end; }
  .bare { background: rgb(36 10 17 / .5); padding: calc(4 * var(--px)); box-shadow: 0 0 0 var(--px) var(--ink); }
  .prompt { bottom: calc(14 * var(--px)); }
}

/* a short phone keeps the world on screen: the snapshot is the one thing that goes */
@media (max-width: 719px) and (max-height: 700px) { .snap { display: none; } }

/* ---------------------------------------------------------------- still */
@media (prefers-reduced-motion: reduce) {
  .prompt { animation: none; }
  .moment .panel, .moment .bare, .hud, .btn, .title, .prompt { transition: none !important; }
}
.still .prompt { animation: none; }
.still .moment .panel, .still .moment .bare, .still .hud, .still .btn, .still .title, .still .prompt, .still .tab { transition: none !important; }

/* ---------------------------------------------------------------- the Founding Farmers card
   ADDED September 2026, with the whitelist application. Nothing above this
   line was changed for it. These rules are used by the new beat in the square
   (index.html, #founding-farmers) and by nothing else on the page. */
.founding { margin: 0 0 calc(4 * var(--px)); padding: 0; list-style: none; }
.founding li {
  position: relative; padding-left: calc(12 * var(--px)); margin-bottom: calc(2 * var(--px));
  line-height: calc(10 * var(--px));
}
.founding li::before {         /* the pack's own tick, as the game marks a thing done */
  content: ''; position: absolute; left: 0; top: calc(1 * var(--px));
  width: calc(8 * var(--px)); height: calc(8 * var(--px));
  background: url(../assets/ui/icon_tick_dark.png) center / 100% no-repeat;
  image-rendering: pixelated;
}
.founding b { font-weight: normal; color: var(--hot); }
.card--founding .btn { margin-top: calc(2 * var(--px)); }
/* the pause menu is narrower than this button's words: it is the one button
   on the page allowed to take two lines, rather than the panel being widened */
.menu__list .btn--wl {
  white-space: normal; text-align: center;
  line-height: calc(9 * var(--px));
  padding: calc(3 * var(--px)) calc(4 * var(--px));
}