/* MINUS — playminus.com
   The app's claymorphic sage + gold, carried onto the web. Deliberately
   self-contained: no fonts, scripts, analytics or images are fetched from any
   third party, so the privacy pages can honestly say the site itself watches
   nobody. Every colour below is lifted from lib/widgets/luxury.dart. */

:root {
  --bg0: #f3f5ec;
  --bg1: #e8ecdc;
  --bg2: #dce1ce;
  --bg3: #d1d7c0;
  --surface: #edf0e3;
  --sunk: #e5e9d8;

  --green: #37471f;
  --green-deep: #2b3a18;
  --green-mid: #4c5a34;
  --sage: #7c8a5f;
  --sage-soft: #8b9770;
  --sage-text: #6d7c4d;

  --gold: #b8922c;
  --gold-lite: #f1c25a;
  --gold-deep: #e2a531;
  --btn-ink: #3c2e06;

  --card-red: #be2a32;
  /* The comic ink the story screen frames everything with. */
  --ink-comic: #241e1b;

  --shadow-out: 6px 7px 16px rgba(120, 136, 96, 0.42),
    -5px -5px 14px rgba(255, 255, 255, 0.75);
  --shadow-in: inset 4px 5px 11px rgba(120, 136, 96, 0.42),
    inset -3px -3px 8px rgba(255, 255, 255, 0.7);

  --serif: "Cormorant Garamond", Cormorant, Georgia, "Iowan Old Style",
    "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --wrap: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--green-mid);
  background: var(--bg1);
  background-image: radial-gradient(
      1200px 600px at 15% -10%,
      var(--bg0),
      transparent 60%
    ),
    radial-gradient(900px 500px at 100% 0%, #eef1e4, transparent 55%);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(100% - clamp(32px, 8vw, 56px), var(--wrap)); margin-inline: auto; }

/* ------------------------------------------------------------- type */

h1, h2, h3, h4 { color: var(--green); line-height: 1.2; margin: 0 0 0.5em; }

h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 700;
  letter-spacing: 0.06em;
}

h2 {
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

h3 { font-size: 1.06rem; font-weight: 800; }

p { margin: 0 0 1.05em; }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #8f6f1f; }

strong { color: var(--green); font-weight: 700; }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9em;
}

.lede { font-size: 1.12rem; color: var(--sage-text); }

/* ------------------------------------------------------------- clay */

.clay {
  background: linear-gradient(145deg, var(--surface), var(--bg2));
  border-radius: 22px;
  box-shadow: var(--shadow-out);
}

.sunk {
  background: linear-gradient(145deg, #dfe4d1, var(--sunk));
  border-radius: 18px;
  box-shadow: var(--shadow-in);
}

/* ------------------------------------------------------------- header */

header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(240, 243, 232, 0.82);
  border-bottom: 1px solid rgba(124, 138, 95, 0.16);
}

header.site .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand span {
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--green);
}

nav.site { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

nav.site a {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--green-mid);
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 11px;
}
nav.site a:hover { background: rgba(124, 138, 95, 0.13); color: var(--green); }
nav.site a[aria-current="page"] { background: rgba(184, 146, 44, 0.16); color: var(--green); }

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

.hero { padding: clamp(48px, 9vw, 104px) 0 clamp(40px, 7vw, 76px); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

.hero h1 { margin-bottom: 0.1em; }
.hero .sub {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-style: italic;
  color: var(--gold);
  margin: 0 0 1.1em;
}

.hero-art { display: grid; place-items: center; }
.hero-art img {
  width: min(100%, 300px);
  height: auto;
  border-radius: 24%; /* squircle-ish, so the icon reads as an app icon */
  box-shadow: 14px 18px 40px rgba(90, 104, 68, 0.38),
    -8px -8px 24px rgba(255, 255, 255, 0.6);
}

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 15px;
  font-weight: 800;
  font-size: 0.94rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.btn-gold {
  background: linear-gradient(180deg, var(--gold-lite), var(--gold-deep));
  color: var(--btn-ink);
  box-shadow: 5px 6px 14px rgba(150, 118, 34, 0.36),
    -3px -3px 9px rgba(255, 255, 255, 0.6);
}
.btn-gold:hover { color: var(--btn-ink); filter: brightness(1.05); }

.btn-quiet {
  background: linear-gradient(145deg, var(--surface), var(--bg2));
  color: var(--green);
  box-shadow: var(--shadow-out);
}
.btn-quiet:hover { color: var(--green-deep); }

/* ------------------------------------------------------- device + shots */

/* A landscape phone, drawn in CSS. The game is landscape-only, so a portrait
   mock-up would misrepresent it — and a real bezel around a real screenshot is
   what makes the reader believe the shot is a screen rather than artwork. */
.device {
  position: relative;
  margin: 0;
  padding: 8px;
  border-radius: 26px;
  background: linear-gradient(150deg, #414a34, #262d1c 55%, #38402b);
  box-shadow: 12px 16px 34px rgba(78, 90, 58, 0.42),
    -6px -6px 18px rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 19px;
  background: var(--bg2);
}

/* The camera pill, on the short edge — the app pushes its own UI clear of it. */
.device::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 5px;
  height: 42px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.55);
}

.device figcaption {
  padding: 10px 4px 2px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #e7ebdc;
  text-align: center;
}

.tilt { transform: rotate(-1.6deg); }

/* ------------------------------------------------------------- storyboard */

.story .narrow { max-width: 56ch; }

.storyboard {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: clamp(30px, 5vw, 58px);
}

.beat {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(20px, 4vw, 46px);
  align-items: center;
}

/* Alternate sides so the eye zig-zags down the page instead of scanning one
   rigid column — the shots are wide, and five identical rows read as a table.
   The COLUMN WIDTHS swap with the order: the screenshot must keep the wide
   column on both sides, or every other beat shrinks to a thumbnail. */
.beat:nth-child(even) { grid-template-columns: 0.75fr 1.25fr; }
.beat:nth-child(even) .beat-shot { order: 2; }

.beat-num {
  display: block;
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 6px;
}

.beat-text h3 { font-size: 1.25rem; margin-bottom: 0.45em; }
.beat-text p { margin: 0; font-size: 0.97rem; }

/* ------------------------------------------------------------- split */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 4vw, 48px);
  align-items: start;
  margin-top: 26px;
}

.feature { margin-bottom: 22px; }
.feature h3 { margin-bottom: 0.3em; }
.feature p { margin: 0; font-size: 0.95rem; }

.split-shots { display: grid; gap: 22px; }

/* ------------------------------------------------------------- cast */

/* The game's opening comic, rebuilt in CSS. Every colour, angle and border
   width here is lifted straight from lib/screens/story_screen.dart, so the
   page shows the same four panels a player meets on first launch rather than a
   photograph of them. */

.showdown {
  margin-top: 24px;
  border: 4px solid var(--ink-comic);
  border-radius: 20px;
  overflow: hidden;
  background: radial-gradient(120% 130% at 50% 0%, #f3efdf 0%, #e9e4cf 55%, #ded8bf 100%);
  box-shadow: var(--shadow-out);
}

.showdown-banner {
  background: linear-gradient(180deg, #37471f, #2b3a18);
  border-bottom: 4px solid var(--ink-comic);
  padding: 16px 18px 14px;
  text-align: center;
}

.showdown-banner h3 {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.3rem, 4.2vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #f4cc66;
  text-shadow: 3px 3px 0 var(--ink-comic);
}

.showdown-banner p {
  margin: 6px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #e8ecdc;
}

.showdown-panels {
  position: relative;
  display: grid;
  /* minmax(0, 1fr), NOT 1fr: a grid item's min-width is `auto`, so the 600px
     character art refuses to let its column shrink and the fourth panel is
     pushed past the frame — where the container's `overflow: hidden` slices it
     in half. Bounding the track at 0 lets the columns divide the space evenly
     and the art crop inside its own panel, which is what it is meant to do. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  /* Enough that a panel's rotated corner never touches the frame. */
  padding: 14px;
}

.panel {
  position: relative;
  margin: 0;
  /* Same reason as the track above — without it the panel itself is as wide as
     its widest child, whatever the column says. */
  min-width: 0;
  /* A definite height, which is also what lets the art's `height: 78%` resolve
     instead of falling back to its natural 800px. Roughly the app's own panel
     proportion, so the characters sit in the frame the same way. */
  aspect-ratio: 2 / 3;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  border: 4px solid var(--ink-comic);
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(55, 69, 32, 0.26);
  /* The halftone dots the app paints per panel. */
  background-image: radial-gradient(currentColor 1.4px, transparent 1.5px);
  background-size: 9px 9px;
}

.panel-1 { color: rgba(226, 165, 49, 0.5);  background-color: #f3e0b4; transform: rotate(-1.4deg); }
.panel-2 { color: rgba(94, 115, 89, 0.45);  background-color: #dbe4c6; transform: rotate(1.4deg); }
.panel-3 { color: rgba(142, 34, 48, 0.32);  background-color: #ecd4cd; transform: rotate(-1.4deg); }
.panel-4 { color: rgba(26, 39, 64, 0.28);   background-color: #d0dae7; transform: rotate(1.4deg); }

.panel img {
  width: auto;
  max-width: 118%;
  height: 78%;
  max-height: 340px;
  object-fit: contain;
  object-position: bottom center;
  margin-bottom: -6px;
}

.bubble {
  position: absolute;
  top: 14px;
  left: 12px;
  right: 12px;
  margin: 0;
  z-index: 2;
  padding: 9px 11px;
  background: #fff;
  border: 3px solid var(--ink-comic);
  border-radius: 20px;
  box-shadow: 4px 5px 0 rgba(36, 30, 27, 0.85);
  color: var(--ink-comic);
  font-size: clamp(0.72rem, 1.5vw, 0.98rem);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

/* The tail — a rotated square with two ink edges, exactly as the app draws it. */
.bubble::after {
  content: "";
  position: absolute;
  bottom: -11px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-right: 3px solid var(--ink-comic);
  border-bottom: 3px solid var(--ink-comic);
  transform: rotate(45deg);
}
.bubble-left::after { left: 26px; }
.bubble-right::after { right: 26px; }

.panel figcaption {
  position: relative;
  z-index: 2;
  margin-bottom: 12px;
  padding: 5px 18px;
  border: 2.5px solid var(--ink-comic);
  border-radius: 14px;
  background: linear-gradient(135deg, #f4cc66, #e2a531);
  color: var(--ink-comic);
  font-weight: 900;
  font-size: clamp(0.68rem, 1.5vw, 0.92rem);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* The 20-point burst sits between the second and third panel, as on the app's
   own canvas. Absolute so it never takes part in the grid. */
.vs {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 3;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f4cc66, #e2a531);
  border: 3px solid var(--ink-comic);
  clip-path: polygon(
    50% 0%, 59% 12%, 71% 6%, 74% 20%, 87% 18%, 84% 32%, 97% 35%,
    88% 46%, 100% 54%, 87% 61%, 94% 73%, 80% 75%, 82% 89%, 68% 84%,
    64% 97%, 53% 88%, 44% 99%, 37% 86%, 24% 92%, 24% 78%, 10% 79%,
    16% 66%, 3% 62%, 13% 52%, 1% 43%, 15% 38%, 8% 26%, 22% 25%,
    21% 11%, 34% 17%, 38% 4%
  );
}
.vs i {
  font-style: normal;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--ink-comic);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
}

.cast-note { margin-top: 18px; }

/* --------------------------------------------------------- developer */

.devbox { padding: clamp(26px, 4vw, 44px); margin-top: 26px; }
.devbox .lede { margin: 0 0 26px; max-width: 62ch; }
.devbox .cta-row { margin: 0; gap: 12px; }

footer.site .copy a { color: var(--sage-text); text-decoration: none; font-weight: 800; }
footer.site .copy a:hover { color: var(--green); }

/* ------------------------------------------------------------- get */

.getbox { padding: clamp(28px, 5vw, 52px); text-align: center; }
.fineprint {
  margin: 16px auto 0;
  max-width: 52ch;
  font-size: 0.83rem;
  color: var(--sage-soft);
}
.dim { font-weight: 700; opacity: 0.7; }
.getbox .lede { margin-inline: auto; max-width: 58ch; }
.getbox .cta-row { justify-content: center; }

/* ------------------------------------------------------------- sections */

/* One vertical rhythm for the whole page. Sections used to set their own
   spacing and the seams showed — a generous gap above one heading and a tight
   one above the next. */
section { padding: clamp(44px, 6.5vw, 84px) 0; }
section > .wrap > .eyebrow { margin-bottom: 0.7em; }
section > .wrap > h2 { margin-bottom: 0.9em; }
section > .wrap > .lede { margin-bottom: 0; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { padding: 24px 22px; }
.card .num {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 10px;
}
.card p { margin: 0; font-size: 0.94rem; }

.rules { padding: clamp(26px, 4vw, 44px); margin-top: 6px; }
.rules li { line-height: 1.6; }
.rules ol { margin: 0; padding-left: 1.3em; }
.rules li { margin-bottom: 0.7em; }
.rules li::marker { color: var(--gold); font-weight: 800; }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pill {
  padding: 8px 15px;
  border-radius: 13px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--green);
  background: linear-gradient(145deg, #eef1e4, #dde3cf);
  box-shadow: 3px 4px 9px rgba(120, 136, 96, 0.3),
    -2px -2px 7px rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------------------------- legal */

.legal { padding: clamp(34px, 6vw, 60px) 0 20px; }
.legal .wrap { width: min(100% - 44px, 800px); }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: 0.02em; }
.legal h2 {
  margin-top: 2.2em;
  padding-top: 0.9em;
  border-top: 1px solid rgba(124, 138, 95, 0.24);
  font-size: 1.28rem;
}
.legal h3 { margin-top: 1.7em; }
.legal ul, .legal ol { padding-left: 1.25em; }
.legal li { margin-bottom: 0.55em; }
.legal li::marker { color: var(--sage); }

.updated {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sage-text);
  background: rgba(124, 138, 95, 0.13);
  margin-bottom: 1.6em;
}

.callout {
  padding: 20px 24px;
  margin: 1.8em 0;
  border-radius: 18px;
  border-left: 4px solid var(--gold);
  background: linear-gradient(145deg, #eef1e4, #e2e7d5);
}
.callout :last-child { margin-bottom: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 0.91rem;
}
th, td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(124, 138, 95, 0.22);
  vertical-align: top;
}
th { color: var(--green); font-weight: 800; background: rgba(124, 138, 95, 0.1); }
tbody tr:last-child td { border-bottom: 0; }

.table-scroll { overflow-x: auto; }

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

footer.site {
  margin-top: 40px;
  padding: 34px 0 40px;
  border-top: 1px solid rgba(124, 138, 95, 0.2);
  background: rgba(220, 225, 206, 0.5);
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
footer.site nav { display: flex; gap: 18px; flex-wrap: wrap; }
/* The one nav item that is a destination rather than a jump down the page. */
nav.site .nav-play {
  padding: 6px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-lite), var(--gold-deep));
  color: var(--btn-ink);
  box-shadow: 0 2px 6px rgba(120, 136, 96, 0.35);
}
nav.site .nav-play:hover { color: var(--btn-ink); filter: brightness(1.05); }

footer.site a { color: var(--sage-text); font-size: 0.87rem; font-weight: 700; text-decoration: none; }
footer.site a:hover { color: var(--green); }
footer.site .copy { margin-left: auto; font-size: 0.82rem; color: var(--sage-soft); }

/* ------------------------------------------------------------- responsive */

/* Long words and code blocks must never be what makes a page scroll
   sideways — on a narrow phone that is the difference between a page that
   feels built and one that feels broken. */
img, figure, .device, .clay { max-width: 100%; }
h1, h2, h3, p, li { overflow-wrap: anywhere; }

@media (max-width: 980px) {
  .beat { grid-template-columns: 1fr; gap: 18px; }
  .beat:nth-child(even) .beat-shot { order: 0; }
  .split { grid-template-columns: 1fr; }
  .showdown-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs { top: 50%; }
}

@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; }
  .panel { min-height: 220px; }
  .split-shots { gap: 16px; }
  .cta-row { gap: 10px; }
  .cta-row .btn { flex: 1 1 auto; text-align: center; }
  .hero-art { order: -1; }
  .cards { grid-template-columns: 1fr; }
  .tilt { transform: none; }
  footer.site .copy { margin-left: 0; width: 100%; }
}

/* A phone bezel scaled down to phone width is a hairline; drop it rather than
   draw a frame nobody can see. */
/* Phones. The site is read on one far more often than it is designed on one. */
@media (max-width: 700px) {
  header.site .wrap { flex-wrap: wrap; row-gap: 8px; }
  nav.site { gap: 12px; flex-wrap: wrap; justify-content: center; width: 100%; }
  nav.site a { font-size: 0.85rem; }
  .pill-row { gap: 8px; }
  .pill { font-size: 0.78rem; padding: 6px 12px; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; text-align: center; }
  .beat-text { padding: 0; }
  .rules ol { padding-left: 18px; }
  footer.site .wrap { flex-direction: column; align-items: flex-start; gap: 10px; }
  footer.site nav { flex-wrap: wrap; gap: 12px; }
}

@media (max-width: 560px) {
  .showdown-panels { grid-template-columns: minmax(0, 1fr); }
  .vs { display: none; }
  .panel { aspect-ratio: 4 / 3; min-height: 240px; transform: none; }
  .device { padding: 5px; border-radius: 16px; }
  .device img { border-radius: 12px; }
  .device::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}