/* Breakaway Solitaire: the website's one stylesheet. The brand's felt green and the logo's
   lettering (Avenir Next Condensed where the reader has it), light pages that go dark with the
   reader's setting, and nothing loaded from anywhere else. */

:root {
  --felt: #0f5c33;
  --felt-deep: #0a3f23;
  --charcoal: #151a17;
  /* (Where the bar and the foot meet the page: only a dark page, near their charcoal, needs it) */
  --edge: transparent;
  --ink: #1d1d1f;
  --muted: #5f6368;
  --page: #ffffff;
  --panel: #f4f6f4;
  --line: #dfe3df;
  --link: #0f6b3b;
  --red: #c8102e;
  --gold: #f2c14e;
  --heading: "Avenir Next Condensed", "AvenirNextCondensed-Bold", "Avenir Next", "Helvetica Neue", "Arial Narrow", system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f2f4f2;
    --muted: #a7aea9;
    --page: #121614;
    --panel: #1b211e;
    --line: #2b332e;
    --link: #6fd39b;
    --edge: rgba(255, 255, 255, 0.09);
  }
}

:root[data-theme="dark"] {
  --ink: #f2f4f2;
  --muted: #a7aea9;
  --page: #121614;
  --panel: #1b211e;
  --line: #2b332e;
  --link: #6fd39b;
  --edge: rgba(255, 255, 255, 0.09);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 17px/1.55 var(--text);
}

a {
  color: var(--link);
}

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

h1, h2, h3 {
  font-family: var(--heading);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.2px;
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ********** The bar along the top ********** */

/* (Charcoal rather than the felt, so the icon's green shows against it) */
.bar {
  background: var(--charcoal);
  box-shadow: inset 0 -1px 0 var(--edge);
  color: #fff;
}

.bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
}

.bar a {
  color: #fff;
  text-decoration: none;
}

.bar .name {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 22px/1 var(--heading);
}

.bar .name img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.bar nav {
  display: flex;
  gap: 18px;
  font-size: 15px;
  font-weight: 600;
}

.bar nav a {
  opacity: 0.85;
}

.bar nav a:hover,
.bar nav a[aria-current="page"] {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ********** The front page's top: the felt, the logo and a phone ********** */

/* (Flat felt, the logo's own, so the logo sits on it without an edge) */
.hero {
  background: var(--felt);
  color: #fff;
  overflow: hidden;
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 56px;
}

.hero .logo {
  width: min(420px, 100%);
  display: block;
}

.hero .tagline {
  font: 600 22px/1.35 var(--text);
  margin: 20px 0 8px;
  max-width: 30em;
}

.hero .lede {
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 26px;
  max-width: 34em;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  padding: 10px 18px;
  text-decoration: none;
  font-weight: 600;
}

.store small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.8;
}

.platforms {
  margin-top: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

.phone {
  justify-self: center;
  width: min(300px, 100%);
  border-radius: 44px;
  background: #050605;
  padding: 10px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.phone img {
  display: block;
  width: 100%;
  border-radius: 34px;
}

/* ********** Sections ********** */

section {
  padding: 56px 0;
}

section + section {
  border-top: 1px solid var(--line);
}

section h2 {
  font-size: 38px;
  margin: 0 0 12px;
}

section > .wrap > p.intro {
  color: var(--muted);
  max-width: 40em;
  margin: 0 0 28px;
  font-size: 18px;
}

.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.rules li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 18px 16px;
}

.rules h3 {
  font-size: 22px;
  margin: 0 0 6px;
}

.rules p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.suit {
  font-family: var(--text);
  font-weight: 700;
}

.red {
  color: var(--red);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.split.flip > :first-child {
  order: 2;
}

.shots {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.shots img {
  width: min(260px, 70%);
  border-radius: 28px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}

.grades {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.grades li {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 4px 14px;
  font-weight: 600;
  font-size: 15px;
}

.features {
  columns: 2 280px;
  column-gap: 40px;
  padding-left: 1.1em;
  margin: 0;
}

.features li {
  margin: 0 0 10px;
  break-inside: avoid;
}

.plus {
  display: inline-block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 15px;
}

/* ********** Pages of text: support and privacy ********** */

.page {
  padding: 48px 0 64px;
}

.page .wrap {
  max-width: 760px;
}

.page h1 {
  font-size: 44px;
  margin: 0 0 6px;
}

.page .updated {
  color: var(--muted);
  margin: 0 0 28px;
}

.page h2 {
  font-size: 28px;
  margin: 36px 0 8px;
}

.page h3 {
  font-family: var(--text);
  font-size: 18px;
  font-weight: 700;
  margin: 24px 0 4px;
  letter-spacing: 0;
}

.page p,
.page li {
  max-width: 42em;
}

.contact {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 24px 0;
}

/* ********** Platforms: each one's pictures, in a frame like the device's ********** */

.platform-top {
  padding: 48px 0 8px;
}

.platform-top h1 {
  font-size: 44px;
  margin: 0 0 10px;
}

.platform-top .intro {
  color: var(--muted);
  font-size: 18px;
  max-width: 40em;
  margin: 0 0 18px;
}

.jump {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.jump a {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 4px 16px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.platform h2 {
  margin-bottom: 8px;
}

.platform p {
  max-width: 40em;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-end;
  justify-content: center;
  margin: 32px 0 0;
}

.gallery figure {
  margin: 0;
  text-align: center;
}

.gallery figcaption {
  color: var(--muted);
  font-size: 14px;
  margin-top: 12px;
}

.device {
  background: #050605;
  padding: 8px;
  border-radius: 36px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.device img {
  display: block;
  width: 100%;
  border-radius: 28px;
}

.device.tablet {
  padding: 11px;
  border-radius: 26px;
}

.device.tablet img {
  border-radius: 15px;
}

/* (Sized so the two pictures of a device are about as tall as each other's short side) */
.phone-upright {
  width: min(200px, 42%);
}

.phone-sideways {
  width: min(436px, 100%);
}

.tablet-upright {
  width: min(300px, 46%);
}

.tablet-sideways {
  width: min(400px, 100%);
}

.mac-window {
  width: min(820px, 100%);
}

/* (A Mac window's corners, rounded as the window's are: 16 of its 1440 by 842 points) */
.window img {
  display: block;
  width: 100%;
  border-radius: 1.15% / 1.95%;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.keys {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 16px 0 0;
  max-width: 28em;
}

.keys dt {
  font-weight: 700;
  text-align: right;
}

.keys dd {
  margin: 0;
  color: var(--muted);
}

kbd {
  font: inherit;
}

/* ********** The foot ********** */

footer {
  background: var(--charcoal);
  box-shadow: inset 0 1px 0 var(--edge);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 22px;
  padding-bottom: 22px;
}

footer a {
  color: #fff;
}

footer nav {
  display: flex;
  gap: 16px;
}

/* ********** Small screens ********** */

@media (max-width: 760px) {
  .hero .wrap,
  .split {
    grid-template-columns: 1fr;
  }

  .hero .wrap {
    padding-top: 36px;
    padding-bottom: 40px;
    text-align: center;
  }

  .hero .logo {
    margin: 0 auto;
    width: min(320px, 100%);
  }

  .hero .tagline,
  .hero .lede {
    margin-left: auto;
    margin-right: auto;
  }

  .split.flip > :first-child {
    order: 0;
  }

  section h2 {
    font-size: 32px;
  }

  .bar nav {
    gap: 14px;
  }

  .bar .name span {
    display: none;
  }
}

/* (The smallest phones: the four links and the icon, a little closer) */
@media (max-width: 380px) {
  .wrap {
    padding: 0 16px;
  }

  .bar nav {
    gap: 11px;
    font-size: 14px;
  }
}