/* Plow Punch site. The game's own palette (unity/Assets/LastStopLive/Runtime/Core/Palette.cs) and Saira faces. */

@font-face {
  font-family: "Saira";
  src: url("/assets/fonts/saira-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Saira";
  src: url("/assets/fonts/saira-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Saira";
  src: url("/assets/fonts/saira-semibold-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Palette.cs swatches */
  --pine: #142e28;
  --pine-light: #23463d;
  --paper: #f5e6c6;
  --paper-dim: #d9c8a4;
  --ink: #1b1a17;
  --tangerine: #f07935;
  --tangerine-light: #ffa66b;
  --cobalt: #244aa5;
  --cobalt-light: #7096e8;

  /* Derived: deeper pine for edges and the footer, tangerine dark enough for text on paper (4.9:1) */
  --pine-deep: #0e221d;
  --pine-edge: #091714;
  --tangerine-ink: #a8431a;

  /* The title arena's own sky (bc_launch / bc_splash top rows), deepened at the zenith for text */
  --sky-zenith: #102b6e;
  --sky-mid: #1a45a8;
  --sky: #245fd8;

  --gutter: clamp(20px, 5.4vw, 44px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--tangerine) var(--pine-edge);
}

body {
  margin: 0;
  background: var(--pine);
  color: var(--paper);
  font: 500 17px/1.6 "Saira", system-ui, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--tangerine);
  color: var(--ink);
}

a {
  color: var(--paper);
  text-decoration-color: var(--tangerine);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.28em;
}

a:hover {
  color: var(--tangerine-light);
}

:focus-visible {
  outline: 3px solid var(--tangerine-light);
  outline-offset: 4px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  border-radius: 8px;
}

.skip:focus {
  top: 12px;
}

/* ---------- Title screen (landing first viewport) ---------- */

.title {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  background: var(--pine);
}

.title__sky {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(32px, 8vw, 72px) var(--gutter) 0;
  background: linear-gradient(180deg, var(--sky-zenith) 0%, var(--sky-mid) 100%);
}

.title__icon {
  width: clamp(104px, 27vw, 152px);
  aspect-ratio: 1;
  border-radius: 23%;
  box-shadow: 0 12px 28px -6px rgba(4, 12, 38, 0.6);
}

/* The in-game wordmark: Paper capitals in Saira SemiBold Italic, a pine outline, a stepped pine extrusion
   and a strip of orange repair tape behind the lower half. PLOW PUNCH is 6.84em wide with its padding, so
   12.8vw keeps it on one line inside the gutter from 320 px up; nowrap keeps the name and its tape whole. */
.wordmark {
  position: relative;
  z-index: 0;
  margin: clamp(18px, 4.6vw, 30px) 0 0;
  padding: 0 0.12em 0.08em 0;
  font: italic 600 clamp(40px, 12.8vw, 108px) / 1 "Saira", sans-serif;
  letter-spacing: 0.005em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow:
    0.035em 0 0 var(--pine-edge),
    -0.035em 0 0 var(--pine-edge),
    0 0.035em 0 var(--pine-edge),
    0 -0.035em 0 var(--pine-edge),
    0.025em 0.025em 0 var(--pine-edge),
    -0.025em 0.025em 0 var(--pine-edge),
    0.025em -0.025em 0 var(--pine-edge),
    -0.025em -0.025em 0 var(--pine-edge),
    0.05em 0.055em 0 var(--pine),
    0.065em 0.075em 0 var(--pine),
    0.08em 0.095em 0 var(--pine-edge);
}

.wordmark::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.18em;
  right: -0.32em;
  top: 0.62em;
  height: 0.3em;
  background: var(--tangerine);
  transform: rotate(-2.4deg);
  box-shadow: 0 0.04em 0.08em rgba(9, 23, 20, 0.35);
}

/* The title screen's sash: the game's own ribbon art (BC/UI/ui_banner.png, 1024 x 200) as a 9-slice.
   Slices: top 30 (orange stripe), bottom 48 (stripe and swallowtails), sides 180 (tail, plate edge, rivets).
   Border widths are those slices at one scale (1.9em / 122 px of dark plate), so only the plate stretches. */
.sash {
  margin: clamp(16px, 4vw, 26px) 0 0;
  font: 600 clamp(13.5px, 3.6vw, 21px) / 1.15 "Saira", sans-serif;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.sash span {
  display: inline-block;
  padding: 0.375em 0.25em;
  white-space: nowrap;
  color: var(--paper);
  text-shadow: 0 0.06em 0 rgba(4, 12, 10, 0.55);
  border-style: solid;
  border-width: 0.467em 2.8em 0.748em;
  border-image: url("/assets/ui-sash.webp") 30 180 48 fill / 0.467em 2.8em 0.748em stretch;
  filter: drop-shadow(0 0.4em 0.5em rgba(4, 12, 38, 0.5));
}

.soon {
  margin: clamp(26px, 6vw, 36px) 0 0;
  max-width: 24em;
  font: 600 clamp(16px, 4.3vw, 20px) / 1.35 "Saira", sans-serif;
  letter-spacing: 0.01em;
  color: var(--paper);
  text-wrap: balance;
}

/* The title arena starts where the sky band ends (no overlap, so no seam) and fades in; its foot fades into the page. */
.title__arena {
  position: relative;
  display: block;
  margin: 0;
  /* The art's own left-edge colours, smoothed: shows through the top and bottom fades. */
  background: linear-gradient(
    180deg,
    var(--sky-mid) 0%,
    #245fd8 4%,
    #3463d3 6%,
    #6471c5 10%,
    #8977ad 12%,
    #c68582 15%,
    #d88d5e 18%,
    #b0683c 21%,
    #4a3328 26%,
    #2f2624 40%,
    var(--pine) 100%
  );
}

.title__arena img {
  width: 100%;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
}

/* ---------- Feature graphic: the store banner (owner pick E) ---------- */

.feature-graphic {
  margin: 0 auto;
  padding: clamp(32px, 8vw, 72px) var(--gutter) 0;
  max-width: 1100px;
}

.feature-graphic img {
  width: 100%;
  aspect-ratio: 1024 / 500;
  border-radius: 14px;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.7);
}

/* ---------- The pitch: listing copy beside a real battle ---------- */

.pitch {
  display: grid;
  grid-template-areas:
    "head"
    "copy"
    "screen"
    "route";
  gap: clamp(28px, 7vw, 44px);
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(56px, 13vw, 112px) var(--gutter) clamp(24px, 6vw, 56px);
}

.pitch__head {
  grid-area: head;
  margin: 0;
}

.display {
  font: italic 600 clamp(34px, 9.4vw, 64px) / 1.02 "Saira", sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--paper);
  text-wrap: balance;
  text-shadow: 0.04em 0.05em 0 var(--pine-edge);
}

.display .line {
  display: block;
}

.tape {
  display: block;
  width: 4.6em;
  height: 0.28em;
  margin-top: 0.3em;
  background: var(--tangerine);
  transform: rotate(-2.4deg);
  transform-origin: left center;
}

.pitch__copy {
  grid-area: copy;
  margin: 0;
  max-width: 34em;
  font-size: clamp(17px, 4.5vw, 20px);
  line-height: 1.6;
}

.screen {
  grid-area: screen;
  justify-self: center;
  width: min(78vw, 340px);
  margin: 0;
}

.screen img {
  width: 100%;
  border-radius: clamp(24px, 7vw, 36px);
  box-shadow:
    0 0 0 4px var(--pine-edge),
    0 0 0 6px rgba(245, 230, 198, 0.14),
    0 28px 56px -18px rgba(0, 0, 0, 0.7);
}

.screen figcaption,
.souvenir figcaption {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--paper-dim);
  text-align: center;
}

/* The listing's bullets as stops on a route: orange tape, with the teams' shapes as the stops
   (cobalt circle, tangerine diamond), cut out of the line like interchanges on a transit map. */
.route {
  grid-area: route;
  position: relative;
  max-width: 36em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(17px, 4.5vw, 19px);
  line-height: 1.55;
}

.route::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  bottom: 16px;
  width: 6px;
  border-radius: 3px;
  background: var(--tangerine);
}

.route li {
  position: relative;
  padding: 0 0 clamp(22px, 5.6vw, 30px) 56px;
}

.route li:last-child {
  padding-bottom: 0;
}

.route li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.08em;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cobalt);
  box-shadow:
    inset 0 0 0 4px var(--cobalt),
    inset 0 0 0 7.5px var(--paper),
    0 0 0 5px var(--pine);
}

.route li:nth-child(even)::before {
  left: 5px;
  top: 0.22em;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background: var(--tangerine);
  transform: rotate(45deg);
  box-shadow:
    inset 0 0 0 3px var(--tangerine),
    inset 0 0 0 6px var(--paper),
    0 0 0 5px var(--pine);
}

/* ---------- Close ---------- */

.close {
  padding: clamp(64px, 14vw, 128px) var(--gutter) clamp(64px, 14vw, 120px);
  text-align: center;
  background: linear-gradient(180deg, var(--pine) 0%, var(--pine-deep) 100%);
}

.souvenir {
  width: min(74vw, 320px);
  margin: 0 auto;
}

.souvenir img {
  border-radius: 14px;
  transform: rotate(-2.5deg);
  box-shadow: 0 26px 50px -18px rgba(0, 0, 0, 0.75);
}

.souvenir figcaption {
  margin-top: 22px;
}

.close__line {
  max-width: 19em;
  margin: clamp(36px, 9vw, 56px) auto 0;
  font: italic 600 clamp(24px, 6.6vw, 38px) / 1.2 "Saira", sans-serif;
  color: var(--paper);
  text-wrap: balance;
}

.close .soon {
  margin: 18px auto 0;
  color: var(--paper-dim);
}

/* ---------- Footer ---------- */

.site-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 28px;
  padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom));
  background: var(--pine-edge);
  border-top: 3px solid var(--tangerine);
  font-size: 15px;
  color: var(--paper-dim);
}

.site-foot a,
.site-foot span {
  display: inline-block;
  padding: 10px 0;
}

/* ---------- Privacy page ---------- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px var(--gutter);
  background: var(--pine);
  border-bottom: 3px solid var(--tangerine);
}

.bar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  color: var(--paper);
  text-decoration: none;
  font: italic 600 22px / 1 "Saira", sans-serif;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.bar__brand img {
  width: 40px;
  height: 40px;
  border-radius: 9px;
}

.bar__brand:hover {
  color: var(--paper);
}

.bar nav a {
  display: inline-block;
  padding: 12px 4px;
  font-weight: 600;
  font-size: 16px;
}

.sheet-wrap {
  padding: clamp(20px, 5.5vw, 64px) clamp(12px, 4vw, 40px) clamp(48px, 11vw, 104px);
  background: linear-gradient(180deg, var(--pine) 0%, var(--pine-deep) 100%);
}

/* The policy reads like the game's paper receipt: Paper ground, Ink type, pine plate for the short version. */
.sheet {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(28px, 7vw, 64px) clamp(20px, 6.4vw, 72px) clamp(32px, 8vw, 72px);
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.75);
  font-size: clamp(16.5px, 4.3vw, 18px);
  line-height: 1.65;
}

.sheet h1 {
  margin: 0;
  font: italic 600 clamp(30px, 8.4vw, 50px) / 1.05 "Saira", sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--pine);
  text-wrap: balance;
}

.sheet__meta {
  margin: 14px 0 0;
  padding-bottom: 22px;
  border-bottom: 2px dashed rgba(20, 46, 40, 0.32);
  font-size: 15.5px;
  line-height: 1.5;
  color: #48413a;
}

.sheet__meta span {
  display: block;
}

.sheet__short {
  margin: 26px 0 0;
  padding: 16px 20px;
  background: var(--pine);
  color: var(--paper);
  border-radius: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.sheet h2 {
  position: relative;
  margin: 2.1em 0 0.55em;
  padding-left: 26px;
  font: 600 clamp(20px, 5.4vw, 24px) / 1.25 "Saira", sans-serif;
  color: var(--pine);
}

.sheet h2::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 11px;
  height: 11px;
  background: var(--tangerine);
  transform: rotate(45deg);
}

.sheet p,
.sheet ul {
  margin: 0 0 0.9em;
}

.sheet ul {
  padding-left: 1.25em;
}

.sheet li {
  margin-bottom: 0.7em;
  padding-left: 0.2em;
}

.sheet li::marker {
  color: var(--tangerine-ink);
}

.sheet strong {
  font-weight: 600;
}

.sheet a {
  color: var(--pine);
  text-decoration-color: var(--tangerine-ink);
}

.sheet a:hover {
  color: var(--tangerine-ink);
}

.sheet :focus-visible {
  outline-color: var(--tangerine-ink);
}

.sheet code {
  padding: 0.08em 0.36em;
  border-radius: 5px;
  background: rgba(20, 46, 40, 0.09);
  font: 500 0.88em/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

/* ---------- Larger screens ---------- */

/* Desktop: one 2400 x 1536 plate (tools/title-arena-plate.py). Its centre is bc_splash.png at 1:1; its sides are the
   art's own edges, softened and darkened outward. Shown 1920 px wide (the arena 820 px, 0.8 of its source size) and
   cropped by the viewport, up to 2400 px (1:1) on wider screens. Never scaled past its source size.
   The sky band's slope carries on under a longer, eased top fade, so there is no kink where the band ends. */
@media (min-width: 900px) {
  .title__arena {
    --arena-fade: linear-gradient(
      180deg,
      transparent 0,
      rgba(0, 0, 0, 0.08) 3%,
      rgba(0, 0, 0, 0.25) 6%,
      rgba(0, 0, 0, 0.5) 9%,
      rgba(0, 0, 0, 0.78) 12%,
      #000 16%,
      #000 90%,
      transparent 100%
    );
    /* Top: the sky band's own gradient, continued. Foot: the plate's bottom rows into Pine. */
    background: linear-gradient(180deg, var(--sky-mid) 0%, #1e4fbe 16%, #2d2322 80%, #231a19 90%, var(--pine) 100%);
  }

  .title__arena img {
    --plate: clamp(1920px, 100%, 2400px);
    width: var(--plate);
    max-width: none;
    margin-inline: calc((100% - var(--plate)) / 2);
    -webkit-mask-image: var(--arena-fade);
    mask-image: var(--arena-fade);
  }
}

/* Past 2400 px the plate stays at 1:1 and its ends fade (6%, 144 px) into its own outer columns' colours. Under the top
   fade those colours ease in from the sky band (smoothstep over the first 16%), so the band still ends without a kink. */
@media (min-width: 2401px) {
  .title__arena {
    background: linear-gradient(
      180deg,
      var(--sky-mid) 0%,
      #1b46aa 2%,
      #1f4aae 4%,
      #2852b4 6%,
      #3c5db7 8%,
      #5c6ab3 10%,
      #8677a5 12%,
      #b3828c 14%,
      #cf8671 16%,
      #b16b42 20%,
      #5b3a21 25%,
      #3b2717 30%,
      #4f3027 40%,
      #4b3c38 50%,
      #2d2527 60%,
      #1f1a1b 70%,
      #261d1e 80%,
      #1c1618 90%,
      var(--pine) 100%
    );
  }

  .title__arena img {
    -webkit-mask-image: var(--arena-fade), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: var(--arena-fade), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-composite: intersect;
  }
}

@media (min-width: 980px) {
  .pitch {
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas:
      "head screen"
      "copy screen"
      "route screen";
    align-items: start;
    column-gap: clamp(48px, 7vw, 112px);
  }

  .screen {
    position: sticky;
    top: 40px;
    width: 360px;
  }
}

/* ---------- Motion: one moment, the punch-in on the title ---------- */

@media (prefers-reduced-motion: no-preference) {
  .title__icon {
    animation: punch-in 700ms var(--ease-out) both;
  }

  .wordmark::before {
    animation: tape-on 760ms var(--ease-out) 180ms both;
  }

  @keyframes punch-in {
    from {
      transform: scale(0.88) rotate(-5deg);
    }
  }

  @keyframes tape-on {
    from {
      clip-path: inset(0 100% 0 0);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }
}