/* MKM Games — the main site, in the same Pop Arcade look as the games
   (see mkm-puzzles/shared/pop/pop.css, kept in sync by hand since the two
   deploy separately). Rules: no gradients, no blurred shadows; things get the
   ink outline plus a hard offset shadow. Red, yellow and green are fills only
   (never small text on the light background); green text uses --green-text. */

:root {
  --ink: #17161c;
  --paper: #f6f3ec;
  --card: #ffffff;
  --muted: #4e4a57;
  --muted-2: #5e5a66;
  --blue: #2e47e0;
  --blue-hover: #1c2fa8;
  --red: #ff5a4e;
  --yellow: #ffc93c;
  --green: #2bb673;
  --green-text: #1e7f50;

  --outline: 2px solid var(--ink);
  --shadow-key: 0 4px 0 var(--ink);
  --shadow-key-up: 0 6px 0 var(--ink);
  --shadow-key-down: 0 0 0 var(--ink);
  --shadow-card: 8px 8px 0 var(--ink);
  --r-key: 12px;
  --r-tile: 14px;
  --r-card: 24px;
  --press: 80ms ease-out;

  --font-display: Unbounded, "Arial Black", system-ui, sans-serif;
  --font-body: Outfit, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  touch-action: manipulation; /* no double-tap zoom; pinch zoom still works */
}

a,
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

p {
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 1em;
}

a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--blue-hover);
}

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

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */

.site-header {
  background: var(--paper);
  border-bottom: var(--outline);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.brand:hover {
  color: var(--ink);
}

.brand .dot {
  color: var(--blue);
}

.main-nav {
  display: flex;
  gap: 8px;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid transparent;
  border-radius: var(--r-key);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.98rem;
  transition: background var(--press), color var(--press);
}

.main-nav a:hover {
  background: var(--card);
  border-color: var(--ink);
  color: var(--ink);
}

.main-nav a[aria-current="page"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0;
  background: var(--card);
  border: var(--outline);
  border-radius: var(--r-key);
  box-shadow: var(--shadow-key);
  cursor: pointer;
  transition: transform var(--press), box-shadow var(--press);
}

.nav-toggle:active {
  transform: translateY(4px);
  box-shadow: var(--shadow-key-down);
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2.5px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.is-active .nav-toggle-bar:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.nav-toggle.is-active .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-active .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: var(--blue);
  color: #fff;
  padding: 72px 0 0;
  border-bottom: var(--outline);
  overflow: hidden;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
  padding-bottom: 64px;
}

.hero h1 {
  color: #fff;
  font-weight: 900;
  font-size: clamp(2.2rem, 4.4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.45em;
}

.hero p.lede {
  color: #e6e9ff;
  font-size: 1.1rem;
  max-width: 46ch;
  margin: 0;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.hero :focus-visible {
  outline-color: #fff;
}

/* the games' own boards, solving themselves, fanned out like dealt cards */
.hero-boards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 420px;
  margin-left: auto;
}

.hero-boards .board {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: 10px;
  background: var(--card);
  border: var(--outline);
  border-radius: var(--r-tile);
  box-shadow: 5px 5px 0 var(--ink);
}

/* a slight fan, so they read as a stack of puzzles rather than a grid of icons */
.hero-boards .board-a { transform: rotate(-4deg); }
.hero-boards .board-b { transform: rotate(3deg) translateY(10px); }
.hero-boards .board-c { transform: rotate(2.5deg) translateY(-6px); }
.hero-boards .board-d { transform: rotate(-3deg) translateY(4px); }

/* ---------- Stat strip ---------- */

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 44px;
  margin: 0;
  padding: 16px 24px;
  list-style: none;
  background: var(--ink);
  color: #fff;
  font-size: 1rem;
}

.stat-strip li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.stat-strip b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--yellow);
}

/* ---------- Buttons: the Pop "key" ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: var(--outline);
  border-radius: var(--r-key);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-key);
  font: 700 1rem/1 var(--font-body);
  cursor: pointer;
  transition: transform var(--press), box-shadow var(--press);
}

.btn:hover {
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-key-up);
}

.btn:active {
  transform: translateY(4px);
  box-shadow: var(--shadow-key-down);
}

.btn-primary,
.btn-primary:hover {
  background: var(--yellow);
  color: var(--ink);
}

.btn-outline,
.btn-outline:hover {
  background: var(--card);
  color: var(--ink);
}

.btn-dark,
.btn-dark:hover {
  background: var(--ink);
  color: #fff;
}

.btn-amazon,
.btn-amazon:hover {
  background: #232f3e;
  color: #fff;
}

.btn-etsy,
.btn-etsy:hover {
  background: #f1641e;
  color: var(--ink);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  min-height: 44px;
  padding: 0 16px;
  font-size: 0.92rem;
}

/* ---------- Section scaffolding ---------- */

.section {
  padding: 76px 0;
}

.section-alt {
  background: var(--card);
  border-block: var(--outline);
}

.section-head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 44px;
}

.section-head h2 {
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
}

.eyebrow {
  display: inline-block;
  font: 700 0.82rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.card {
  position: relative;
  background: var(--card);
  border: var(--outline);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform var(--press), box-shadow var(--press);
}

.card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 var(--ink);
}

.card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper);
  border-bottom: var(--outline);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* book covers are portrait, so cover-cropping them to the 4:3 slot would cut the
   title off; show the whole cover on its own dark ground instead */
.card-media.cover {
  background: var(--ink);
  padding: 12px;
}

.card-media.cover img {
  object-fit: contain;
}

.card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.card-body h3 {
  margin-bottom: 0;
  font-weight: 800;
  font-size: 1.3rem;
}

.card-tag {
  display: inline-block;
  font: 700 0.74rem/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-text);
}

.card-actions {
  margin-top: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 6px;
}

/* Whole-card click target, but only where the card offers a single action.
   Cards with two (a book sold on both Amazon and Etsy) keep their separate buttons,
   because there the choice is the point. The real link is still the accessible
   target and keyboard stop; this only widens its hit area. */
.card-actions .btn:only-child::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* the button itself must not be transformed, or it becomes the containing block
   for its own ::after and the stretched area collapses back onto the button */
.card-actions .btn:only-child:hover,
.card-actions .btn:only-child:active {
  transform: none;
}

.card:has(.card-actions .btn:only-child) {
  cursor: pointer;
}

/* ---------- Category tiles (image + label) ---------- */

.category-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

/* a stack, not an overlay: the picture gets its own space above the label, so none of it
   is hidden and none of it has to be cropped */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  overflow: hidden;
  border: var(--outline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--press), box-shadow var(--press);
}

.tile:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 var(--ink);
}

.tile img {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  object-fit: contain;
  padding: 22px;
}

.tile-content {
  flex: 0 0 auto;
  padding: 18px 20px 20px;
  background: var(--card);
  border-top: var(--outline);
  color: var(--ink);
}

.tile-content h3 {
  color: var(--ink);
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.tile-content p {
  color: var(--muted);
  margin-bottom: 14px;
  font-size: 0.92rem;
  line-height: 1.45;
}

.tile-content .btn {
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.92rem;
}

/* ---------- Category accents ---------- */
/* one Pop colour per section, from the homepage tile through to that section's page */

.tile-games    { --accent: var(--blue); }
.tile-puzzles  { --accent: var(--green); }
.tile-coloring { --accent: var(--red); }

.tile[class*="tile-"] { background: var(--accent); }

.page-header-games    { --accent: var(--blue); }
.page-header-puzzles  { --accent: var(--green); }
.page-header-coloring { --accent: var(--red); }

.page-header[class*="page-header-"] {
  border-bottom: 6px solid var(--accent);
}

/* ---------- Page header (sub-pages) ---------- */

.page-header {
  background: var(--paper);
  padding: 56px 0 60px;
  text-align: center;
  border-bottom: var(--outline);
}

.page-header h1 {
  font-weight: 900;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.page-header p {
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.08rem;
}

.page-header .page-header-cta {
  margin-top: 24px;
}

.breadcrumb {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 14px;
}

.breadcrumb a {
  color: var(--blue);
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* ---------- Info strip ---------- */

.info-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 50px;
}

.info-strip .item {
  background: var(--card);
  border: var(--outline);
  border-radius: var(--r-tile);
  padding: 22px;
  box-shadow: var(--shadow-key);
}

.info-strip .item :is(h3, h4) {
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 6px;
}

.info-strip .item p {
  margin: 0;
  font-size: 0.93rem;
}

/* ---------- How-to-play strip (puzzle page) ---------- */

.how-to {
  margin-top: 56px;
  background: var(--card);
  border: var(--outline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-align: center;
}

.how-to img {
  width: 100%;
}

/* ---------- Feature banner (e.g. Mega Bundle) ---------- */

.feature-banner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: center;
  background: var(--blue);
  color: #fff;
  border: var(--outline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 36px;
  margin-bottom: 52px;
}

.feature-banner .eyebrow {
  color: #dce2ff;
}

.feature-banner h2 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.feature-banner p {
  color: #e6e9ff;
}

.feature-banner ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 8px;
}

.feature-banner li {
  color: #eceeff;
  font-size: 0.97rem;
}

/* a lighter yellow than the --yellow fill: that one is only 4.42:1 on blue,
   which is under AA for text this size */
.feature-banner li b {
  color: #ffd45c;
}

.feature-banner-media img {
  width: 100%;
  border: var(--outline);
  border-radius: var(--r-tile);
}

.feature-banner :focus-visible {
  outline-color: #fff;
}

/* ---------- Online Games: filter + search ---------- */

.games-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  max-width: 760px;
  margin: 0 auto 16px;
}

.games-filter input[type="search"] {
  flex: 1 1 260px;
  min-height: 48px;
  padding: 0 18px 0 46px;
  border: var(--outline);
  border-radius: var(--r-key);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2317161c' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center;
  box-shadow: var(--shadow-key);
  color: var(--ink);
  font: 600 1rem/1 var(--font-body); /* 16px+ keeps iOS from zooming into the field */
}

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

.pill {
  min-height: 48px;
  padding: 0 20px;
  border: var(--outline);
  border-radius: var(--r-key);
  background: var(--card);
  box-shadow: var(--shadow-key);
  color: var(--ink);
  font: 700 1rem/1 var(--font-body);
  cursor: pointer;
  transition: transform var(--press), box-shadow var(--press);
}

.pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-key-up);
}

.pill:active {
  transform: translateY(4px);
  box-shadow: var(--shadow-key-down);
}

.pill[aria-pressed="true"],
.pill[aria-pressed="true"]:hover {
  background: var(--ink);
  color: #fff;
}

.games-count {
  text-align: center;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
  margin: 0 0 28px;
}

/* keep card widths steady when a filter leaves only one or two */
.games-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.games-grid .card[hidden],
.games-filter[hidden],
.games-empty[hidden] {
  display: none;
}

.games-empty {
  text-align: center;
  padding: 24px 0 8px;
}

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

.site-footer {
  background: var(--ink);
  color: #d7d4de;
  padding: 54px 0 30px;
  border-top: var(--outline);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.footer-brand .brand {
  color: #fff;
  margin-bottom: 10px;
}

.footer-brand .brand .dot {
  color: var(--yellow);
}

.footer-brand p {
  color: #b4b0bd;
  max-width: 320px;
  font-size: 0.93rem;
}

.footer-col h3 {
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.footer-col a {
  display: block;
  color: #d7d4de;
  padding: 5px 0;
  font-size: 0.93rem;
  transition: color var(--press);
}

.footer-col a:hover {
  color: #fff;
}

.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.86rem;
  color: #b4b0bd;
}

.footer-bottom a {
  color: #d7d4de;
}

.footer-bottom a:hover {
  color: #fff;
}

.site-footer :focus-visible {
  outline-color: #fff;
}

/* ---------- Accessibility ---------- */

.skip-link {
  position: absolute;
  left: 0;
  top: -60px;
  background: var(--ink);
  color: #fff;
  padding: 14px 22px;
  font-weight: 700;
  z-index: 200;
  border-radius: 0 0 var(--r-key) 0;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

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

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .feature-banner {
    grid-template-columns: 1fr;
    padding: 28px;
  }
}

@media (max-width: 900px) {
  /* stack the hero: copy first, boards below */
  .hero .container {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }

  .hero p.lede { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-boards { margin-inline: auto; max-width: 340px; }
}

@media (max-width: 760px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 6px;
    background: var(--paper);
    border: var(--outline);
    border-radius: 0 0 var(--r-card) var(--r-card);
    padding: 14px 16px 18px;
    box-shadow: var(--shadow-card);
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav a {
    border-color: var(--ink);
    background: var(--card);
    box-shadow: var(--shadow-key);
  }

  .card,
  .tile,
  .how-to,
  .feature-banner {
    box-shadow: 5px 5px 0 var(--ink);
  }

  .card:hover,
  .tile:hover {
    transform: none;
    box-shadow: 5px 5px 0 var(--ink);
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 56px 0;
  }

  .stat-strip {
    gap: 6px 24px;
    font-size: 0.92rem;
  }

  .stat-strip b { font-size: 1.15rem; }

  .tile { min-height: 340px; }
}

/* ---------- Reduced motion ---------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}