:root {
  /* Colors */
  --background: #F2F3F3;
  --background-inverted: #202423;
  --primary-color: #222;
  --primary-inverted: #fff;
  --accent: #FFC802;
  --font-family: 'alte_haas_groteskregular', Helvetica, Arial,sans-serif;
  --font-family-bold: 'alte_haas_groteskbold', Helvetica, Arial,sans-serif;
  --font-mono: 'simply_monobold', ui-monospace, SFMono-Regular, Menlo, monospace;
}
body {
  padding: 0;
  font-size: 1.25em;
  line-height: 1.125em;
  font-family: var(--font-family);
  background: var(--background);
}
/*
Typography
*/
h1,h2,h3,h4,h5 {
  font-family: var(--font-family-bold);
}
h1 {
  font-size: 2em;
  line-height: 120%;
}
h2 {
  font-size: 1.5em;
  line-height: 140%;
}
h3 {
  font-size: 1.25rem;
  line-height: 120%;
}
a {
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}
p.lead {
  font-size: 1em;
  opacity: 0.8;
  margin-top: 0.75em;
  max-width: 720px;
}
/*
Sections
*/
.wrapper {
  overflow-x: hidden;
}
section {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 50vh
}
.container {
  width: 100%;
  padding: 4rem;
  margin: 0 auto;
  max-width: 1200px;
  box-sizing: border-box;
}
#s1 {
  background: var(--background-inverted);
  color: var(--primary-inverted);
}
#s1 #nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#s1 svg {
  fill: var(--primary-inverted);
  width: 40px;
}
#s2 {
  background: var(--background);
  color: var(--primary-color);
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
}
#s3 {
  background: var(--background-inverted);
  color: var(--primary-inverted);
  align-items: center;
  justify-content: space-around;
}
#s3 p {
  box-sizing: border-box;
  margin-top: 1.25em;
  max-width: 960px;
}
.container.support {
  padding-top: 0;
}
.support {
  font-size: 0.7em;
  opacity: 75%;
}
.support a {
  color: var(--primary-inverted);
}
/*
How to play
*/
#howto {
  background: var(--background);
  color: var(--primary-color);
}
.rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
  margin-top: 2.5rem;
}
.rule h3 {
  margin-top: 1.25rem;
}
.rule p {
  margin-top: 0.6rem;
  font-size: 0.9em;
  line-height: 1.4em;
  opacity: 0.85;
}
.rule-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 320px;
}
.mini-canvas {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  display: block;
  background: #fff;
}

.operators {
  display: flex;
  justify-content: space-evenly;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}
.op img {
  display: block;
  width: 22px;
  height: 22px;
  padding: 6px;
  background: #fff;
  border: 2px solid #000;
}
/*
Features
*/
#features {
  background: var(--background-inverted);
  color: var(--primary-inverted);
}
#features p.lead {
  color: var(--primary-inverted);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
  margin-top: 3rem;
}
.feature {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  border-radius: 4px;
}
.feature-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 1rem;
}
.feature-icon svg {
  width: 28px;
  height: 28px;
}
.feature h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}
.feature p {
  font-size: 0.8em;
  line-height: 1.45em;
  opacity: 0.78;
}
/*
Themes
*/
#themes {
  background: var(--background);
  color: var(--primary-color);
  min-height: 0;
}
#themes .container {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.theme-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}
.theme {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.theme-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  position: relative;
  overflow: hidden;
}
.theme-swatch::before,
.theme-swatch::after {
  content: '';
  position: absolute;
  inset: 0;
}
/* Split-swatch: bottom-right wedge = dark variant */
.theme-swatch::after {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.theme-name {
  font-family: var(--font-family-bold);
  font-size: 0.85em;
}
/* Mono */
.theme--mono .theme-swatch::before { background: #F2F3F3; }
.theme--mono .theme-swatch::after  { background: #202423; }
/* Sunburst (hue 47) */
.theme--sunburst .theme-swatch::before { background: hsl(47, 63%, 95%); }
.theme--sunburst .theme-swatch::after  { background: hsl(47, 100%, 50%); }
/* Rose (hue 346) */
.theme--rose .theme-swatch::before { background: hsl(346, 63%, 95%); }
.theme--rose .theme-swatch::after  { background: hsl(346, 100%, 50%); }
/* Cobalt */
.theme--cobalt .theme-swatch::before { background: #F9FAFB; }
.theme--cobalt .theme-swatch::after  { background: #025179; }
/* Apricot (hue 22) */
.theme--apricot .theme-swatch::before { background: hsl(22, 63%, 95%); }
.theme--apricot .theme-swatch::after  { background: hsl(22, 100%, 50%); }
/* Emerald (hue 90) */
.theme--emerald .theme-swatch::before { background: hsl(90, 63%, 95%); }
.theme--emerald .theme-swatch::after  { background: hsl(90, 100%, 50%); }
/* Lavender (hue 270) */
.theme--lavender .theme-swatch::before { background: hsl(270, 63%, 95%); }
.theme--lavender .theme-swatch::after  { background: hsl(270, 100%, 50%); }
/*
CTA
*/
#cta {
  background: var(--background-inverted);
  color: var(--primary-inverted);
  align-items: center;
  text-align: center;
  padding: 1.5em 0 0;
  min-height: 0;
}
#cta .container:not(.support) {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
#cta .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#cta p {
  margin-top: 1rem;
  max-width: 640px;
  opacity: 0.85;
}
.cta-link {
  display: inline-block;
  border: none;
  margin-top: 1.5rem;
}
.cta-badge {
  margin-top: 1.5rem;
  width: 160px;
}
/*
Footer. Link color is set here because the global link color is #222,
which disappears on this dark band.
*/
.site-footer {
  background: var(--background-inverted);
  color: #e7e8e7;
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
.footer-nav a {
  color: #fff;
  border-bottom: 2px solid var(--accent);
  font-family: var(--font-family-bold);
}
.footer-logo {
  display: block;
  line-height: 0;
  color: #fff;
  border: none;
}
.footer-logo svg {
  width: 44px;
  height: 44px;
  fill: currentColor;
}
/*
Share page bits. The site footer is not rendered here, so the column keeps
its own bottom padding and the page clears the iPhone home indicator.
viewport-fit=cover (share.html) makes these insets non-zero on notched phones.
*/
body.share-page {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}
#puzzleCanvas {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  height: auto;
  display: block;
  margin: 1.5em auto 0;
}
.container:has(#puzzleCanvas) {
  text-align: center;
}
.container:has(#puzzleCanvas) .share-header {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.container:has(#puzzleCanvas) #appLink {
  display: block;
  margin-top: 1.5em;
}
.open-in-app {
  margin: 1.25em 0 0;
  font-family: var(--font-family-bold);
}
.share-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.share-header h1 {
  margin: 0;
}
.share-header svg {
  height: 2em;
  width: auto;
  flex-shrink: 0;
}
/*
Images
*/
img.overflowImage {
  position: absolute;
  bottom: -35vh;
  left: 50%;
  transform: translateX(-50%);
  height: 70vh;
  z-index: 100;
  pointer-events: none;
}
img#appStoreBadge {
  width: 160px;
}
a#appLink {
  border: none;
}
/*
Responsive Styles
*/
/* Tablet */
@media only screen and (max-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .theme-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Mobile */
@media only screen and (min-width:0px) and (max-width:767px) {
  h1 {
    font-size: 1.8em;
    line-height: 120%;
  }
  h2 {
    font-size: 1.3em;
    line-height: 140%;
  }
  h3 {
    font-size: 1.1rem;
    line-height: 120%;
  }
  .container {
    padding: 2rem;
  }
  #themes .container,
  #cta .container:not(.support) {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  #s3 {
    padding: 1rem 0;
  }
  img.overflowImage {
    bottom: -30vh;
    height: 60vh;
  }
  img#appStoreBadge {
    width: 144px;
  }
  .rules-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .rule-visual {
    max-width: 280px;
    margin: 0;
  }
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .theme-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .cta-badge {
    width: 144px;
  }
  .site-footer .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  /* A little more air under the App Store badge once the footer is gone. */
  body.share-page .container {
    padding-bottom: 3rem;
  }
}