/* Math Mingle static pages — the Pingee design system in the game's colours.

   Structurally this is the same stylesheet the Calcora and Carrom Soccer
   pages use, so every page on pingee.app shares one set of components: the
   same header, hero, card grid, prose cards and footer, at the same sizes
   and radii. Only the colour tokens below differ — blue instead of orange —
   plus the short Math-Mingle-only section at the end.

   The blue is the app icon's own (#2f6bff), which measures 4.5:1 on white:
   exactly on the line, so a browser rounding the other way would fail it.
   --primary is therefore pulled to 48% lightness (6.6:1) and carries the
   links, headings and card icons, while the brand blue proper lives in
   --primary-light and is only ever used as a fill or a gradient stop.
   All colors MUST be HSL. */

:root {
  --background: 0 0% 100%;
  /* The app's ink, #1e2733, rather than a neutral grey. */
  --foreground: 214 26% 16%;

  --card: 0 0% 100%;
  --card-foreground: 214 26% 16%;

  /* Math Mingle brand colours — blue.
     --primary is the TEXT blue: 6.6:1 on white. --primary-light is the blue
     off the app icon (#2f6bff) and is only ever a fill. Swapping the two
     would put every link on the page exactly at the 4.5:1 boundary. */
  --primary: 223 88% 48%;
  --primary-foreground: 0 0% 100%;
  --primary-light: 223 100% 59%;
  --primary-dark: 225 85% 32%;

  --secondary: 220 60% 98%;
  --secondary-foreground: 223 88% 48%;

  /* The warm tints are the app's PAPER theme (#f2ecdf), kept as the muted
     and accent tones so the page still reads as the same product even
     though the ground is white like the rest of pingee.app. */
  --muted: 41 42% 96%;
  --muted-foreground: 215 16% 38%;

  --accent: 41 42% 94%;
  --accent-foreground: 223 88% 48%;

  --border: 40 20% 87%;
  --ring: 223 88% 48%;

  --radius: 1rem;

  /* Custom Pingee Design Tokens */
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-light)) 100%);
  /* The hero carries white text, so its stops stay deep: white clears 12:1
     on the first stop and 6.3:1 on the last. Lightening these is what makes
     the sentences under the heading hard to read, not the hue. */
  --gradient-hero: linear-gradient(135deg, hsl(228 75% 26%) 0%, hsl(224 80% 36%) 50%, hsl(220 85% 46%) 100%);
  --gradient-card: linear-gradient(145deg, hsl(var(--background)) 0%, hsl(41 42% 97%) 100%);
  --shadow-primary: 0 10px 40px -10px hsl(var(--primary) / 0.3);
  --shadow-card: 0 4px 20px -4px hsl(var(--primary) / 0.1);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; border-color: hsl(var(--border)); }

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

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a { color: hsl(var(--primary)); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- container
   Mirrors Tailwind's `container mx-auto px-6` with the 1400px 2xl screen
   from tailwind.config.ts. */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1400px) { .container { max-width: 1400px; } }

.container-prose { max-width: 56rem; }

/* ------------------------------------------------------------------- header */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 50;
  background: hsl(0 0% 100% / 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid hsl(var(--border) / 0.5);
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  gap: 1rem;
}
/* Two links, not one: the mark and the name go to Math Mingle, while the
   "by Pingee Nexgen" pill goes up to the parent site — which an anchor
   nested inside another anchor could not do. */
.brandmark { display: flex; align-items: center; gap: 0.75rem; }
.brandmark a, .brandmark a:hover { text-decoration: none; }
.brandmark-mark { display: block; flex: none; }
.brandmark img {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  object-fit: cover;
}
.brandmark-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; }
.brandmark .name {
  display: block;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 700;
  color: hsl(var(--primary));
  margin: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  padding: 0 0.375rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  white-space: nowrap;
}
.badge-glass {
  border-color: hsl(0 0% 100% / 0.3);
  background: hsl(0 0% 100% / 0.2);
  color: #fff;
  padding: 0.25rem 0.75rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* A badge that is also a link up to pingee.app. */
.badge-link {
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.badge-link:hover { color: hsl(var(--primary)); border-color: hsl(var(--primary) / 0.5); text-decoration: none; }
.badge-glass.badge-link:hover { color: #fff; border-color: hsl(0 0% 100% / 0.6); background: hsl(0 0% 100% / 0.3); }

.site-nav { display: none; align-items: center; gap: 2rem; }
.site-nav a {
  color: hsl(var(--muted-foreground));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-nav a:hover { color: hsl(var(--primary)); text-decoration: none; }

.header-actions { display: none; align-items: center; gap: 0.75rem; }

@media (min-width: 768px) {
  .site-nav, .header-actions { display: flex; }
  .menu-toggle { display: none; }
}

/* Pure-CSS mobile menu, mirroring the React header's collapsed state. */
.menu-toggle { position: relative; }
.menu-toggle > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  border-radius: 0.5rem;
}
.menu-toggle > summary::-webkit-details-marker { display: none; }
.menu-toggle > summary svg { width: 1.5rem; height: 1.5rem; }
.menu-toggle > summary:hover { color: hsl(var(--primary)); }
.menu-toggle .close-icon { display: none; }
.menu-toggle[open] .open-icon { display: none; }
.menu-toggle[open] .close-icon { display: block; }
.menu-panel {
  position: fixed;
  top: 4rem;
  inset-inline: 0;
  /* Opaque: a translucent panel let the hero text read through the links. */
  background: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--border) / 0.5);
  box-shadow: 0 10px 15px -3px hsl(var(--primary) / 0.1);
  padding: 1rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.menu-panel a { color: hsl(var(--muted-foreground)); }
.menu-panel a:hover { color: hsl(var(--primary)); text-decoration: none; }

/* The dropdown lists the stores as plain titles — the badge artwork is for
   the pages themselves, where it has room to be read. */
.menu-downloads {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--border) / 0.5);
}
.menu-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
}
.menu-downloads a { color: hsl(var(--primary)); font-weight: 500; }
.menu-downloads a:hover { color: hsl(var(--primary) / 0.8); }

/* ------------------------------------------------------- store download CTAs */
/* Official App Store / Google Play badges, shared with the React site.
   Apple and Google both require clear space of a quarter of the badge height
   around the artwork, which the gap below preserves at either size.

   One --badge-h per size drives both badges, so the pair can never drift apart
   the way two independent height rules did. */
.store-badges {
  --badge-h: 3.5rem;
  /* Google draws its artwork tighter inside the button than Apple does: at a
     matched button height the Play logo and wordmark measure ~8% taller, inside
     a button already 12% wider, so the pair reads lopsided — most obviously on
     a phone, where it fills the row. 0.93 is the ratio of the two artworks and
     lines the wordmarks up optically. */
  --google-scale: 0.93;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.store-badges a {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.store-badges a:hover { transform: scale(1.05); text-decoration: none; }
.store-badges img { height: var(--badge-h); width: auto; display: block; }
.store-badges .store-google img { height: calc(var(--badge-h) * var(--google-scale)); }

.store-badges-sm { --badge-h: 2.25rem; gap: 0.75rem; }

/* Step the full-size pair down on narrow screens so it still fits on one line.
   Scoped away from .store-badges-sm, which already sits at its own height. */
@media (max-width: 639px) {
  .store-badges:not(.store-badges-sm) { --badge-h: 2.75rem; }
}

/* --------------------------------------------------------------------- hero */
.hero {
  position: relative;
  background: var(--gradient-hero);
  overflow: hidden;
  padding: 8.5rem 0 5rem;
}
.hero-glow { position: absolute; inset: 0; pointer-events: none; }
.hero-glow::before, .hero-glow::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  filter: blur(64px);
}
.hero-glow::before {
  top: 5rem; left: 2.5rem;
  width: 16rem; height: 16rem;
  background: hsl(var(--primary-light) / 0.25);
}
.hero-glow::after {
  bottom: 5rem; right: 2.5rem;
  width: 24rem; height: 24rem;
  background: hsl(var(--primary) / 0.2);
}
.hero .container { position: relative; z-index: 10; }
.hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero { padding: 10rem 0 6rem; }
  .hero-grid { grid-template-columns: 1fr 1fr; }
}
.hero-copy { color: #fff; }
.hero-copy h1 {
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 1rem 0 0;
}
@media (min-width: 1024px) { .hero-copy h1 { font-size: 4.5rem; } }
.hero-copy .lede {
  font-size: 1.25rem;
  line-height: 1.625;
  color: hsl(0 0% 100% / 0.9);
  max-width: 32rem;
  margin: 1rem 0 0;
}
.hero-copy .tagline {
  color: hsl(0 0% 100% / 0.8);
  margin: 0.75rem 0 0;
  font-size: 1.0625rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.stats { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.stats > div {
  background: hsl(0 0% 100% / 0.15);
  border: 1px solid hsl(0 0% 100% / 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 1rem;
  padding: 0.875rem 1.25rem;
  color: hsl(0 0% 100% / 0.85);
  font-size: 0.875rem;
}
.stats b { display: block; font-size: 1.875rem; font-weight: 700; color: #fff; line-height: 1.2; }

.hero-art { display: flex; justify-content: center; }
.hero-art .plate-wrap { position: relative; }
.hero-art .plate {
  position: relative;
  width: min(20rem, 70vw);
  aspect-ratio: 1;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px hsl(225 60% 10% / 0.45);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-art .plate:hover { transform: scale(1.05); }
.hero-art .plate img { width: 100%; height: 100%; object-fit: cover; }
.hero-art .chip {
  position: absolute;
  background: hsl(0 0% 100% / 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 1rem;
  padding: 1rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.hero-art .chip svg { width: 1.5rem; height: 1.5rem; }
.hero-art .chip-a { top: -1.5rem; right: -1.5rem; }
.hero-art .chip-b { bottom: -1.5rem; left: -1.5rem; }
@media (max-width: 1023px) {
  .hero-art { display: none; }
}

/* ------------------------------------------------------------ page sections */
main { display: block; }

.section { padding: 5rem 0; }
main.section { padding-top: 7rem; padding-bottom: 4rem; }
.section-muted { background: var(--gradient-card); }
.section-muted + .section-muted { padding-top: 0; }

.section h2 {
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 2.5rem;
}
.section p { color: hsl(var(--muted-foreground)); line-height: 1.75; margin: 0 0 1rem; max-width: 70ch; }
.section p:last-child { margin-bottom: 0; }

.cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: var(--shadow-card);
}
.cards .card b {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(var(--card-foreground));
  margin-bottom: 0.5rem;
}
.cards .card span { color: hsl(var(--muted-foreground)); line-height: 1.7; }
.cards .card .icon {
  display: block;
  color: hsl(var(--primary));
  margin-bottom: 1.25rem;
}
.cards .card .icon svg { width: 2rem; height: 2rem; }

/* ------------------------------------------------------- legal / prose pages */
.page-head { text-align: center; margin-bottom: 3rem; }
.page-head .tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  background: var(--gradient-primary);
  color: #fff;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-primary);
}
.page-head .tile svg { width: 2rem; height: 2rem; }
.page-head h1 {
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
  margin: 0 0 1rem;
}
.page-head .meta { color: hsl(var(--muted-foreground)); margin: 0; }
.page-head .lede {
  color: hsl(var(--muted-foreground));
  font-size: 1.125rem;
  line-height: 1.7;
  max-width: 60ch;
  margin: 1rem auto 0;
}

.prose { display: flex; flex-direction: column; gap: 2rem; }

.prose .card h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0 0 1rem;
}
.prose .card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 2rem 0 0.75rem;
}
.prose .card > :first-child { margin-top: 0; }
.prose .card p,
.prose .card li { color: hsl(var(--muted-foreground)); line-height: 1.75; }
.prose .card p { margin: 0 0 1rem; }
.prose .card p:last-child { margin-bottom: 0; }
.prose .card ul { margin: 0 0 1rem; padding-inline-start: 1.25rem; }
.prose .card li { margin-bottom: 0.5rem; }
.prose .card strong { color: hsl(var(--foreground)); font-weight: 600; }

.note {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border) / 0.5);
  border-inline-start: 4px solid hsl(var(--primary));
  border-radius: 1rem;
  padding: 1.5rem 2rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  box-shadow: var(--shadow-card);
}
.note strong { color: hsl(var(--foreground)); font-weight: 600; }


.table-wrap { overflow-x: auto; margin: 1.25rem 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th {
  text-align: start;
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  padding: 0.75rem 1rem;
  background: hsl(var(--muted));
  border-bottom: 1px solid hsl(var(--border));
}
th:first-child { border-start-start-radius: 0.5rem; }
th:last-child { border-start-end-radius: 0.5rem; }
td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid hsl(var(--border) / 0.6);
  vertical-align: top;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
}
td:first-child { color: hsl(var(--foreground)); font-weight: 500; width: 34%; }
tr:last-child td { border-bottom: 0; }

code {
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: 0.375rem;
  padding: 0.0625rem 0.3125rem;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: hsl(var(--foreground));
}

.seealso {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid hsl(var(--border) / 0.5);
  color: hsl(var(--muted-foreground));
}

/* ------------------------------------------------------------------- footer */
.site-footer {
  background: linear-gradient(135deg, hsl(var(--background)) 0%, hsl(var(--muted) / 0.3) 100%);
  border-top: 1px solid hsl(var(--border) / 0.5);
}
.footer-main { padding: 4rem 0; display: grid; gap: 3rem; }
@media (min-width: 1024px) { .footer-main { grid-template-columns: 2fr 1fr 1fr; } }

.footer-brand .brandmark img { width: 3rem; height: 3rem; }
.footer-brand .brandmark .name { font-size: 1.5rem; }
.footer-brand p {
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  max-width: 40ch;
  margin: 1.5rem 0 0;
}
.footer-col h3 {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0 0 1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.footer-col a { color: hsl(var(--muted-foreground)); transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.footer-col a:hover { color: hsl(var(--primary)); text-decoration: none; }

.footer-bottom {
  border-top: 1px solid hsl(var(--border) / 0.5);
  padding: 1.5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}
.footer-bottom p { margin: 0; }
.footer-bottom .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-inline-start: auto; }
.footer-bottom a { color: inherit; }
.footer-bottom a:hover { color: hsl(var(--primary)); text-decoration: none; }
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .store-badges a:hover, .hero-art .plate:hover { transform: none; }
}

/* --------------------------------------------------------- Math Mingle only */

/* White on the gradient's lighter end is about 6.3:1 — comfortable for the
   display type, and the shadow keeps the sentences under it crisp against
   the blur behind them. */
.hero-copy .lede,
.hero-copy .tagline { text-shadow: 0 1px 4px hsl(225 70% 10% / 0.4); }

/* The plate holds the app icon, which is artwork rather than a photograph:
   contain keeps its rounded corners intact instead of cropping them, and the
   paper tone behind it is the app's own PAPER ground. */
.hero-art .plate { background: hsl(41 42% 91%); }
.hero-art .plate img { object-fit: contain; }

/* The feature grid holds six cards here. Three columns divide six evenly;
   auto-fit's four would strand two on the last row. */
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* One group of the game, drawn as a single SVG. It costs no image and says
   what the app is faster than a paragraph does. The pentagon is a polygon
   rather than a clip-path on a div, because a clipped box loses its own
   border along every diagonal. */
.demo { display: flex; justify-content: center; margin: 0 0 1.25rem; }
.demo .pent { width: 13rem; height: auto; overflow: visible; }
.demo .pent polygon {
  fill: hsl(41 42% 94%);
  stroke: hsl(var(--foreground));
  stroke-width: 4;
  stroke-linejoin: round;
}
.demo .pent text {
  fill: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
}
/* The pair that solves the group, in the green the app itself uses when a
   pair lands. */
.demo .pent text.op { fill: hsl(151 73% 27%); }
.demo-caption { text-align: center; color: hsl(var(--muted-foreground)); margin: 0; }

/* The three screenshots. Portrait phone art, so the grid is sized by the
   shots rather than by the column: three across on a desktop, one on a
   phone, and never blown up past their own 560px width. */
.shots {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  max-width: 54rem;
  margin-inline: auto;
}
.shots figure { margin: 0; }
.shots img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background: hsl(41 42% 96%);
  box-shadow: var(--shadow-card);
}
.shots figcaption {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  line-height: 1.6;
  margin-top: 0.75rem;
}