/* The sales page, wearing the game's own interface.

   Everything here comes from TGSC rather than being invented for the web: the palette is UiTheme
   verbatim, the font is the one the game renders in, the wooden frame is UiSprites.WoodFrame baked
   to PNG by tools/New-WoodFrame.ps1, and the grass that sprouts inside a hovered button is
   GrassHoverButton. Somebody who plays the game should recognise this page as the same thing, and
   somebody who does not should get an honest look at what the menus are like before installing.

   The frame is applied as an overlay on ::after rather than as the element's own border, because
   that is what the game does - UiKit.WoodFrame parents a non-interactive Image filling the rect,
   drawn over the face. A CSS border would inset the label by the whole slice instead of letting
   the wood sit on top of it. */

@font-face {
  font-family: "Comic Neue";
  /* The file the game ships, not a lookalike. Craig Rozynski, SIL Open Font License 1.1, which is
     beside it as ComicNeue-OFL.txt - the licence requires it to travel with the font. */
  src: url("ComicNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* UiTheme, name for name. The site's own site.css already carries most of these because it was
   drawn from the same palette; they are repeated here so this page is legible on its own terms if
   the site's look is ever retuned away from the game's. */
.tgsc-getnow {
  --tg-panel: #232C24;
  --tg-surface: #2C362D;
  --tg-surface-hi: #394637;
  --tg-border: #47563C;
  --tg-ink: #F3EEDE;
  --tg-ink-dim: #B4B7A1;
  --tg-grass: #7CB342;
  --tg-grass-hi: #8FC753;
  --tg-wood: #7B5230;
  --tg-wood-hi: #8E6238;
  --tg-on-accent: #16200F;

  /* UiTheme.RadiusControl and RadiusPanel. The frame art carries the same corner, so these only
     matter for the face underneath it. */
  --tg-radius-control: 10px;
  --tg-radius-panel: 18px;
}

/* --- what the page sits on -------------------------------------------------------------------- */

/* Styling `body` from a module's stylesheet is normally rude. It is safe here because this sheet
   is only ever loaded by this one page, and the alternative - a fixed backdrop element - is a div
   that exists for no reason a reader could name.

   A flat near-black green behind cream text is a lot of contrast to hold for a whole page. This is
   the game's own world, shrunk to 240 pixels wide and darkened until it is closer to a texture
   than a photograph: enough variation that the eye has somewhere to rest, not enough to compete
   with anything on top of it.

   Small on purpose. It is only ever seen scaled up to fill the window, so the browser's own
   smoothing blurs it for free - 2 KB, and no repaint cost on scroll the way a large image under a
   CSS filter would have. */
body {
  background:
    linear-gradient(rgba(23, 30, 24, .55), rgba(23, 30, 24, .8)),
    url("backdrop.jpg") center / cover no-repeat fixed,
    #171E18;
}

/* iOS ignores background-attachment: fixed and reflows it on every scroll instead. Letting it
   scroll with the page is the better of the two there. */
@media (max-width: 767px) {
  body { background-attachment: scroll, scroll; }
}

/* --- the wooden frame ------------------------------------------------------------------------ */

/* One rule, two sizes. border-image is a nine-slice, which is exactly what Unity does with the
   same texture, so the wood keeps its proportions at any size instead of stretching its corners.
   The slice numbers are the baked border in image pixels; the widths are the same in CSS pixels,
   the images being rendered at 3x so the corners stay sharp on a dense screen. */
.tg-framed { position: relative; }

.tg-framed::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-style: solid;
  border-color: transparent;
}

.tg-framed--control::after {
  border-width: 20px;
  border-image: url("frame-button.png") 60 fill stretch;
}

.tg-framed--panel::after {
  border-width: 29px;
  border-image: url("frame-panel.png") 87 fill stretch;
}

/* --- buttons --------------------------------------------------------------------------------- */

.tg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  /* The menu's buttons are 360 by 64 with an 11-pixel frame. Matching the height matters more
     than it sounds: the wood is a fixed thickness, so on a shorter button the same frame reads as
     a thin bright outline rather than as a piece of moulding, which is what the first attempt at
     this looked like. Clear of the wood plus a little, the way UiKit.WoodFrame insets a caption by
     its thickness plus six. */
  min-height: 64px;
  padding: 18px 36px;
  min-width: 18rem;

  border: 0;
  border-radius: var(--tg-radius-control);
  font-family: "Comic Neue", "Comic Sans MS", system-ui, sans-serif;
  font-size: 1.3rem;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

  /* The soft drop shadow every panel and control in the game sits on. */
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45));
  transition: transform .12s ease, filter .12s ease;
}

.tg-btn:hover { transform: translateY(-2px); filter: drop-shadow(0 7px 14px rgba(0, 0, 0, .5)); }
.tg-btn:active { transform: translateY(1px); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }

/* The caption sits above the grass and above the frame's inner shadow.

   Its own class rather than `.tg-btn > span`, which also matched the grass strip beside it - and
   at one specificity point higher than `.tg-btn__grass`, so it quietly reset that strip from
   absolute to relative and collapsed it to nothing. The grass was correct the whole time and had
   no box to grow in. */
.tg-btn__label {
  position: relative;
  z-index: 2;
}

/* UiKit.ButtonKind, the three this page uses. */
.tg-btn--primary { background: var(--tg-grass); color: var(--tg-on-accent); }
.tg-btn--primary:hover { background: var(--tg-grass-hi); color: var(--tg-on-accent); }

.tg-btn--wood { background: var(--tg-wood); color: var(--tg-ink); }
.tg-btn--wood:hover { background: var(--tg-wood-hi); color: var(--tg-ink); }

/* Not a game colour, and deliberately so: it is the one button that leads somewhere with its own
   identity, and people find Discord by its colour before they read the word. It wears the game's
   frame like everything else, so it still belongs to the page. */
.tg-btn--discord { background: #5865F2; color: #FFF; }
.tg-btn--discord:hover { background: #6b76f5; color: #FFF; }

/* --- the lawn inside a hovered button --------------------------------------------------------- */

/* GrassHoverButton, in CSS. In the game a masked strip is inset to the frame's opening and blades
   grow up out of its inner lip, the middle first and the edges lagging.
   The strip is inset by the frame's thickness so the grass never draws on the wood; growth is
   scaleY from a base pivot; and the middle-first ripple is a mask that widens from the centre
   rather than thirteen separately delayed blades, which would be thirteen elements of markup per
   button for a difference nobody can name. */
.tg-btn__grass {
  position: absolute;
  inset: 11px;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  border-radius: 4px;
}

.tg-btn__grass::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;

  background: url("grass-tuft.svg") repeat-x bottom center / 30px 34px;

  transform: scaleY(0);
  transform-origin: 50% 100%;

  -webkit-mask-image: radial-gradient(120% 100% at 50% 100%, #000 0%, #000 55%, transparent 75%);
  mask-image: radial-gradient(120% 100% at 50% 100%, #000 0%, #000 55%, transparent 75%);
  -webkit-mask-size: 0% 100%;
  mask-size: 0% 100%;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  transition: transform .34s cubic-bezier(.2, .8, .3, 1), mask-size .42s ease, -webkit-mask-size .42s ease;
}

.tg-btn:hover .tg-btn__grass::before,
.tg-btn:focus-visible .tg-btn__grass::before {
  transform: scaleY(1);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
}

/* Somebody who has asked not to be shown motion gets the lawn without the animation: it is there
   at once on hover instead of growing, and the button stops lifting.

   It used to remove the grass altogether, which is more than the setting asks for - the request is
   for less movement, not less page. It also hid the effect from every automated browser, since
   headless Chrome reports `reduce` by default, so every screenshot taken to check this showed a
   plain button and looked like the grass was broken. */
@media (prefers-reduced-motion: reduce) {
  .tg-btn, .tg-btn__grass::before { transition: none; }
  .tg-btn:hover { transform: none; }
}

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

.tgsc-hero {
  position: relative;

  /* Room above it. With the bar across the top gone, the hero was hard against the very edge of
     the window, which reads as a page that has been cut off rather than one that starts there. */
  margin-top: 2.5rem;
  margin-bottom: 3rem;

  border-radius: var(--tg-radius-panel);
  overflow: hidden;

  /* The colour underneath is what somebody on a slow connection reads the title against for the
     second before the photograph arrives. Positioned low in the frame because the useful half of
     that shot is the field and the people standing in it - centred, a wide banner is all sky. */
  background: #0D130E url("coop.jpg") center 68% / cover no-repeat;
}

.tgsc-hero-shade {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 26rem;
  padding: 4rem 2rem 3.25rem;
  text-align: center;
  background: linear-gradient(to bottom, rgba(13, 19, 14, .30) 0%, rgba(13, 19, 14, .62) 45%, rgba(13, 19, 14, .80) 100%);
}

/* The game's title hangs on a board of its own at the top of the scale - UiKit.TitlePlate. Same
   idea here: a framed panel behind the words rather than white text floating over a photograph,
   which is what it used to be in the menu too. */
.tgsc-plate {
  display: inline-block;
  margin: 0 0 1.75rem;
  padding: 1.1rem 2.4rem 1.3rem;
  background: rgba(35, 44, 36, .92);
  border-radius: var(--tg-radius-panel);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .55));
}

.tgsc-plate h1 {
  margin: 0;
  font-family: "Comic Neue", "Comic Sans MS", system-ui, sans-serif;
  font-size: clamp(1.9rem, 5.5vw, 3.1rem);
  line-height: 1.05;
  color: var(--tg-ink);
}

.tgsc-tagline {
  max-width: 34rem;
  margin: 0 auto 2rem;
  font-family: "Comic Neue", "Comic Sans MS", system-ui, sans-serif;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--tg-ink);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .85);
}

.tgsc-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
}

.tgsc-fineprint {
  margin: 1.75rem 0 0;
  font-size: .95rem;
  color: var(--tg-ink-dim);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}

.tgsc-fineprint a { color: var(--tg-grass-hi); }

/* --- the reading half ------------------------------------------------------------------------ */

/* Narrower than Bootstrap's container, which is as wide as the screen allows: right for a table of
   bans, wrong for a line somebody has to track back across. */
.tgsc-page {
  max-width: 46rem;
  margin: 0 auto;
}

.tgsc-page section { margin-bottom: 3rem; }

.tgsc-page h2 {
  margin-bottom: .9rem;
  font-family: "Comic Neue", "Comic Sans MS", system-ui, sans-serif;
  font-size: 1.7rem;
  color: var(--tg-ink);
}

/* Comic Neue has a smaller x-height than the system sans it replaced, so the same nominal size
   reads a step smaller. This is the size at which the two look alike, not the number that matches. */
.tgsc-page p {
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--tg-ink);
}

/* A screenshot is a picture, so it goes in a picture frame - which is what the wood is for, and
   the reason the game's frame looks like a picture frame in the first place.

   The frame is on the image's own wrapper rather than on the figure, or its border-image would be
   drawn across the caption underneath as well. */
.tgsc-shot { margin: 0 0 3rem; }

.tgsc-shot-frame {
  border-radius: var(--tg-radius-panel);
  background: #0D130E;
  overflow: hidden;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .5));
}

.tgsc-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.tgsc-shot figcaption {
  margin-top: .75rem;
  font-family: "Comic Neue", "Comic Sans MS", system-ui, sans-serif;
  font-size: .95rem;
  color: var(--tg-ink-dim);
  text-align: center;
}

/* The ask at the bottom, on a panel of its own so somebody who skimmed still finds a button at the
   end of the page rather than only at the top of it. */
.tgsc-talk {
  padding: 2.25rem 2.25rem 2.5rem;
  background: var(--tg-surface);
  border-radius: var(--tg-radius-panel);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .5));
}

.tgsc-talk .tgsc-buttons { margin-top: 2rem; }

.tgsc-closing {
  margin: 0 0 1.5rem;
  text-align: center;
  font-family: "Comic Neue", "Comic Sans MS", system-ui, sans-serif;
  font-size: 1.25rem;
  color: var(--tg-ink-dim);
}

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

@media (max-width: 575px) {
  .tgsc-hero { margin-top: 1.25rem; }
  .tgsc-hero-shade { padding: 3rem 1rem 2.5rem; }
  .tgsc-plate { padding: .9rem 1.4rem 1rem; }
  .tg-btn { width: 100%; min-width: 0; padding: 18px 24px; }

  /* The panel frame's own slice is 29px a side, which on a 340px-wide phone is a sixth of the
     screen spent on wood. The frame comes off there and the panel keeps its rounded corner. */
  .tgsc-talk { padding: 1.5rem 1.25rem 1.75rem; }
  .tg-framed--panel::after { display: none; }
}