/* SnackTurn platform: shared layout for catalog, overviews and editorial pages. */
:root {
  color-scheme:light;
  --background:#f5f5ef;
  --surface:#fcfcf7;
  --ink:#292e28;
  --muted:#60665d;
  --line:#d9ddd2;
  --accent:#b54129;
  --accent-hover:#99331f;
  --accent-text:#fffaf4;
  --soft:#ebece3;
  --radius:18px;
  --shadow:0 14px 36px #363e2710;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif
}
:root[data-theme=dark] {
  color-scheme:dark;
  --background:#20251f;
  --surface:#2b3129;
  --ink:#f3f2e8;
  --muted:#b9c0b2;
  --line:#454d3e;
  --accent:#f49b78;
  --accent-hover:#ffc0a4;
  --accent-text:#29251e;
  --soft:#30382c;
  --shadow:0 14px 36px #13171030
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme=light]) {
    color-scheme:dark;
    --background:#20251f;
    --surface:#2b3129;
    --ink:#f3f2e8;
    --muted:#b9c0b2;
    --line:#454d3e;
    --accent:#f49b78;
    --accent-hover:#ffc0a4;
    --accent-text:#29251e;
    --soft:#30382c;
    --shadow:0 14px 36px #13171030
  }
}
* {
  box-sizing:border-box
}
html {
  scroll-padding-top:24px
}
body {
  margin:0;
  background:var(--background);
  color:var(--ink);
  font-size:16px;
  line-height:1.65;
  min-height:100dvh
}
body {
  --ui-bg:var(--surface);
  --ui-ink:var(--ink);
  --ui-line:var(--line);
  --ui-hover:var(--soft);
  --ui-accent:var(--accent)
}
a {
  color:inherit;
  text-decoration:none
}
button,input {
  font:inherit;
  color:inherit
}
button,summary {
  cursor:pointer
}
button,a,input,summary {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}
button {
  border:1px solid var(--line)
}
img {
  max-width:100%;
  display:block
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  line-height:1.15;
  letter-spacing:-.035em
}
p {
  color:var(--muted)
}
[hidden] {
  display:none!important
}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:4px
}
.wrap {
  width:var(--ui-content-width);
  margin-inline:auto
}
.skip-link {
  position:absolute;
  left:18px;
  top:-100px;
  background:var(--surface);
  padding:12px 20px;
  z-index:100
}
.skip-link:focus {
  top:12px
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:80px;
  border-bottom:1px solid var(--line)
}
.brand {
  display:flex;
  align-items:center;
  font-size:25px;
  letter-spacing:-1px;
  font-weight:750;
  line-height:1
}
.brand-mark {
  display:grid;
  place-items:center;
  width:34px;
  height:36px;
  background:var(--accent);
  color:var(--accent-text);
  font-size:26px;
  margin-right:10px;
  border-radius:10px
}
.brand-period {
  color:var(--accent)
}
.site-header nav {
  display:flex;
  align-items:center;
  gap:12px
}
.site-header nav>a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 16px;
  font-size:14px;
  border-radius:12px;
  font-weight:600
}
.site-header nav>a[aria-current],.site-header nav>a:hover {
  background:var(--soft);
  color:var(--accent)
}
.eyebrow {
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.5
}
.home-hero {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
  padding-block:48px 36px
}
.hero-copy h1 {
  font-size:clamp(34px,4vw,52px);
  font-weight:700;
  margin:14px 0 16px
}
.hero-description {
  font-size:16px;
  max-width:60ch
}
.home-promise {
  font-size:12px;
  max-width:21ch;
  border-left:2px solid var(--line);
  padding-left:20px;
  margin-bottom:4px
}
.button,.play-link {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  min-height:48px;
  padding:12px 20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  font-size:14px;
  font-weight:650;
  line-height:1.4;
  text-decoration:none
}
.primary,.play-link {
  background:var(--accent);
  color:var(--accent-text);
  border-color:transparent
}
.primary:hover,.play-link:hover {
  background:var(--accent-hover)
}
.button span,.play-link>span {
  font-size:20px;
  line-height:1
}
.text-link:not(.play-link),.back-link {
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:44px;
  font-size:14px;
  font-weight:600
}
.text-link:not(.play-link):hover,.back-link:hover {
  color:var(--accent)
}
.more-games {
  padding-block:8px 52px
}
.catalog-tools {
  display:flex;
  flex-direction:column;
  gap:22px
}
.catalog-search {
  display:flex;
  align-items:center;
  gap:20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px 18px
}
.catalog-search>span {
  font-size:14px;
  font-weight:600;
  flex-shrink:0
}
.catalog-search input {
  width:100%;
  min-width:0;
  height:44px;
  background:transparent;
  border:0;
  padding:6px 0;
  outline-offset:0;
  font-size:14px
}
.catalog-search input::placeholder {
  color:var(--muted)
}
.catalog-filters {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.catalog-filters button {
  background:transparent;
  border-color:transparent;
  border-radius:10px;
  padding:10px 16px;
  min-height:44px;
  font-size:13px
}
.catalog-filters button[aria-pressed=true] {
  background:var(--ink);
  color:var(--background)
}
.catalog-filters button:hover {
  border-color:var(--line)
}
.catalog-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin:0 0 18px
}
.catalog-tools+.catalog-heading {
  margin-top:28px
}
.catalog-heading h2 {
  font-size:21px;
  letter-spacing:-.025em
}
.catalog-heading p {
  font-size:13px
}
.game-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px
}
.game-card {
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden
}
.game-cover {
  display:block;
  background:var(--soft);
  overflow:hidden
}
.game-cover img {
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover
}
.game-card-body {
  padding:24px;
  display:flex;
  flex:1;
  flex-direction:column
}
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:11px;
  color:var(--muted)
}
.tags span+span:before {
  content:"/";
  padding-right:8px;
  color:var(--line)
}
.game-card-title {
  margin-top:10px
}
.game-card-title h2 {
  font-size:30px
}
.game-card-title a:hover {
  color:var(--accent)
}
.game-card-tagline {
  font-size:15px;
  margin-top:10px;
  margin-bottom:22px
}
.game-card-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid var(--line)
}
.game-card-meta>div {
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:12px;
  color:var(--muted)
}
.round-link {
  white-space:nowrap
}
.catalog-empty {
  padding:64px 20px;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius)
}
.catalog-empty h3 {
  font-size:26px
}
.catalog-empty p {
  margin:12px 0 24px
}
.about-strip {
  display:flex;
  justify-content:space-between;
  gap:32px;
  align-items:center;
  border-top:1px solid var(--line);
  padding-block:40px
}
.about-strip h2 {
  font-size:24px
}
.about-strip p {
  font-size:14px;
  max-width:65ch;
  margin-top:12px
}
.about-strip a {
  flex:none
}
.site-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-block:30px 38px;
  margin-top:24px
}
.footer-brand {
  font-size:20px;
  font-weight:750;
  letter-spacing:-.04em
}
.site-footer p,.site-footer small {
  font-size:12px
}
.site-footer nav {
  display:flex;
  gap:24px;
  margin-left:auto
}
.site-footer nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:13px
}
.site-footer small {
  width:100%;
  color:var(--muted)
}
.game-intro {
  padding-block:24px 48px
}
.back-link {
  color:var(--muted)
}
.game-heading {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:32px;
  margin:24px 0 32px
}
.game-heading>div:first-child {
  min-width:0
}
.game-heading h1 {
  font-size:clamp(34px,4.4vw,54px);
  margin:12px 0
}
.game-heading p {
  font-size:17px
}
.player-actions {
  display:flex;
  align-self:flex-start;
  flex:none
}
.overview-grid {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:40px;
  align-items:center
}
.overview-cover {
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  border-radius:var(--radius);
  object-fit:cover
}
.overview-copy h2 {
  font-size:22px
}
.game-summary {
  margin:16px 0 22px;
  font-size:14px;
  line-height:1.85;
  max-width:72ch
}
.overview-facts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:0
}
.overview-facts dt {
  color:var(--muted);
  font-size:12px
}
.overview-facts dd {
  font-size:13px;
  margin:3px 0 0
}
.game-facts {
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px
}
.game-facts a {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:var(--accent);
  font-weight:600;
  font-size:14px
}
.game-information,.tiny-how {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:60px;
  padding-block:44px 54px;
  border-top:1px solid var(--line)
}
.rules-intro h2,.tiny-how h2 {
  font-size:32px;
  margin:14px 0 18px
}
.rules-intro>p:last-child,.tiny-how>div>p:last-child {
  max-width:44ch;
  font-size:14px
}
.rules-list,.tiny-how ol {
  padding-left:24px;
  margin:0;
  display:grid;
  gap:24px
}
.rules-list li,.tiny-how li {
  padding-left:8px
}
.rules-list li::marker,.tiny-how li::marker {
  color:var(--accent);
  font-size:13px
}
.rules-list h3,.tiny-how h3 {
  font-size:20px
}
.rules-list p,.tiny-how li p {
  font-size:14px;
  margin-top:9px
}
.questions {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:48px;
  padding-block:48px;
  border-top:1px solid var(--line)
}
.questions>h2 {
  font-size:30px
}
.questions details {
  border-bottom:1px solid var(--line)
}
.questions summary {
  list-style:none;
  min-height:60px;
  padding:18px 0;
  display:flex;
  justify-content:space-between;
  gap:22px;
  font-weight:600;
  font-size:15px;
  line-height:1.5
}
.questions summary::-webkit-details-marker {
  display:none
}
.questions summary span {
  color:var(--muted)
}
.questions details[open] summary span {
  transform:rotate(45deg)
}
.questions details p {
  padding:0 24px 22px 0;
  font-size:14px;
  line-height:1.85
}
.tiny-collection {
  border-top:1px solid var(--line);
  padding-block:44px
}
.tiny-section-heading h2 {
  font-size:30px
}
.tiny-section-heading p {
  font-size:14px;
  max-width:64ch;
  margin-top:12px
}
.level-overviews {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:26px
}
.level-overview {
  min-width:0;
  padding:24px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface)
}
.level-overview h3 {
  font-size:24px
}
.level-overview>p {
  font-size:13px;
  margin-top:12px
}
.level-overview .level-meta {
  font-size:12px;
  color:var(--accent)
}
.level-overview ul {
  padding:0;
  margin:18px 0 0;
  list-style:none
}
.level-overview li {
  padding-block:12px;
  scroll-margin-top:24px
}
.level-overview li+li {
  border-top:1px solid var(--line)
}
.level-overview .case-preview {
  margin:0 0 8px;
  font-size:13px;
  color:var(--muted)
}
.level-overview .case-kind {
  font-size:11px;
  color:var(--muted)
}
.level-overview li>a {
  font-size:13px;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px
}
.level-overview li>a:hover {
  color:var(--accent)
}
.level-overview li>a>span {
  color:var(--muted);
  font-size:11px
}
.tiny-final {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  padding-block:32px 48px
}
.tiny-final h2 {
  font-size:28px
}
.about-content {
  padding-block:56px 40px
}
.about-hero {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(32px,6vw,88px);
  padding-bottom:64px
}
.about-intro h1 {
  font-size:clamp(40px,4.6vw,66px);
  margin:20px 0 24px;
  line-height:1.08
}
.about-intro h1 span {
  color:var(--accent)
}
.about-lead {
  max-width:49ch;
  font-size:17px;
  line-height:1.8;
  text-wrap:pretty
}
.about-intro .button {
  margin-top:28px
}
.about-shelf {
  padding:28px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.about-shelf h2 {
  font-size:21px
}
.about-shelf>p {
  font-size:13px;
  margin-top:8px
}
.about-shelf ul,.about-principles ol {
  list-style:none;
  padding:0;
  margin:24px 0 0
}
.about-shelf li+li {
  border-top:1px solid var(--line)
}
.about-game {
  display:grid;
  grid-template-columns:116px minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding-block:20px;
  border-radius:6px
}
.about-shelf li:last-child .about-game {
  padding-bottom:4px
}
.about-game img {
  width:116px;
  height:auto;
  aspect-ratio:16/9;
  border-radius:8px;
  object-fit:cover;
  background:var(--soft)
}
.about-game h3 {
  font-size:23px
}
.about-game p {
  margin-top:6px;
  font-size:12px;
  line-height:1.5
}
.about-game>span {
  color:var(--accent);
  font-size:22px
}
.about-game:hover h3 {
  color:var(--accent)
}
.about-principles {
  border-top:1px solid var(--line);
  padding-block:40px 56px
}
.about-principles h2,.about-editorial h2 {
  font-size:clamp(26px,2.5vw,34px)
}
.about-principles li {
  display:grid;
  grid-template-columns:40px minmax(0,1fr) minmax(0,1.4fr);
  gap:24px;
  padding-block:28px;
  border-bottom:1px solid var(--line);
  align-items:baseline
}
.about-number {
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--accent)
}
.about-principles h3 {
  font-size:21px;
  line-height:1.4
}
.about-principles li p,.about-editorial p:not(.eyebrow) {
  font-size:15px;
  line-height:1.85;
  text-wrap:pretty
}
.about-editorial {
  padding:36px;
  background:var(--soft);
  border-radius:var(--radius)
}
.about-story {
  max-width:78ch
}
.about-editorial h2 {
  margin:12px 0 20px
}
.about-editorial p+p {
  margin-top:14px
}
.about-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:start;
  gap:20px 40px;
  border-top:1px solid var(--line);
  margin-top:24px;
  padding-top:16px
}
.about-contact .text-link {
  overflow-wrap:anywhere
}
.about-rules {
  padding-bottom:56px
}
.about-rules h2 {
  font-size:clamp(26px,2.5vw,34px)
}
.about-rules header p {
  max-width:70ch;
  margin-top:14px;
  font-size:15px;
  line-height:1.8
}
.rules-directory {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  padding:0;
  margin:26px 0 0;
  list-style:none
}
.rules-directory-link {
  display:grid;
  grid-template-columns:88px minmax(0,1fr) auto;
  align-items:center;
  gap:20px;
  height:100%;
  padding:24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius)
}
.rules-directory-link:hover {
  border-color:var(--accent)
}
.rules-directory-link img {
  width:88px;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:6px;
  background:var(--soft)
}
.rules-directory-link h3 {
  font-size:22px
}
.rules-directory-link p {
  margin-top:7px;
  font-size:13px;
  line-height:1.5
}
.rule-link-action {
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--accent);
  font-size:13px;
  font-weight:600
}
.rule-link-action>span:last-child {
  font-size:22px
}
.prose {
  max-width:820px;
  padding-block:48px 64px
}
.prose h1 {
  font-size:clamp(34px,5vw,56px);
  margin:18px 0 26px
}
.prose .lead {
  font-size:19px
}
.prose h2 {
  font-size:25px;
  margin:36px 0 14px
}
.prose p {
  margin-top:14px;
  line-height:1.85
}
.prose p a {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:4px
}
.prose .button {
  margin-top:24px
}
.prose>.text-link {
  margin-top:32px
}
.not-found {
  min-height:65vh
}
.guide-links, .game-details  {
  padding-block: 48px;
  border-top: 1px solid var(--line);
}
.guide-links h2, .game-details h2  {
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -.035em;
  margin-bottom: 14px;
}
.guide-link-list  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 24px;
}
.guide-link-list a  {
  display: block;
  padding-block: 16px;
  border-top: 1px solid var(--line);
}
.guide-link-list a:hover h3  {
  color: var(--accent);
}
.guide-link-list h3  {
  font-size: 21px;
  letter-spacing: -.025em;
  line-height: 1.4;
  margin-bottom: 8px;
}
.guide-link-list p  {
  max-width: 52ch;
  font-size: 15px;
}
.game-details dl  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 40px;
  margin: 25px 0;
}
.game-details dt  {
  font-size: 13px;
  color: var(--muted);
}
.game-details dd  {
  margin: 3px 0 0;
  font-weight: 600;
}
.game-details > p  {
  max-width: 75ch;
  font-size: 14px;
}
.guide-article  {
  max-width: 960px;
  padding-top: 30px;
  padding-bottom: 64px;
}
.breadcrumbs  {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.breadcrumbs a:hover, .guide-byline a:hover, .guide-toc a:hover  {
  color: var(--accent);
}
.guide-header  {
  margin-top: 30px;
  max-width: 760px;
}
.guide-header h1  {
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.12;
  letter-spacing: -.045em;
}
.guide-header .lead  {
  font-size: 19px;
  margin-top: 20px;
  max-width: 65ch;
}
.guide-byline  {
  font-size: 13px;
  margin-top: 20px;
}
.guide-toc  {
  padding: 24px 28px;
  background: var(--soft);
  border-radius: 16px;
  margin-top: 32px;
}
.guide-toc strong  {
  font-size: 15px;
}
.guide-toc ol  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 32px;
  padding-left: 20px;
  margin: 10px 0 0;
}
.guide-toc a  {
  display: inline-block;
  padding-block: 5px;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 14px;
}
.guide-body section  {
  padding-top: 44px;
}
.guide-body h2  {
  font-size: clamp(25px, 3vw, 32px);
  letter-spacing: -.035em;
  line-height: 1.25;
  margin-bottom: 18px;
}
.guide-body p  {
  margin-top: 14px;
  max-width: 76ch;
  line-height: 1.85;
}
.guide-figure  {
  margin: 28px 0;
}
.guide-figure img  {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--soft);
}
.guide-figure figcaption  {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}
.table-scroll  {
  overflow-x: auto;
  margin-block: 22px;
}
.table-scroll table  {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.table-scroll caption  {
  text-align: left;
  color: var(--muted);
  font-size: 13px;
  padding-bottom: 10px;
}
.table-scroll th, .table-scroll td  {
  padding: 12px 14px;
  text-align: left;
}
.table-scroll thead  {
  background: var(--soft);
}
.table-scroll tbody tr + tr  {
  border-top: 1px solid var(--line);
}
.example-pair  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 24px;
}
.example-pair article  {
  border-left: 3px solid var(--accent);
  padding-left: 18px;
}
.example-pair h3  {
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.025em;
}
.example-pair p  {
  margin-top: 10px;
  font-size: 15px;
}
.guide-next  {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
[data-analytics-toggle]  {
  margin-block: 16px 0;
}
[data-analytics-status]  {
  font-size: 14px;
}
@media (max-width: 767px)  {
  .guide-link-list, .game-details dl, .guide-toc ol, .example-pair  {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .guide-toc ol  {
    gap: 2px;
  }
  .guide-toc  {
    padding: 20px;
  }
  .guide-header .lead  {
    font-size: 17px;
  }
  .guide-links, .game-details  {
    padding-block: 32px;
  }
  .guide-body section  {
    padding-top: 32px;
  }
  .table-scroll th, .table-scroll td  {
    padding: 10px 8px;
    font-size: 13px;
  }
}
@media(min-width:1100px) {
  .game-grid:has(>.game-card:nth-child(3)) {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .game-grid:has(>.game-card:nth-child(3)) .game-card-meta {
    align-items:start;
    flex-direction:column
  }
}
@media(max-width:900px) {
  .rules-directory {
    grid-template-columns:1fr
  }
  .about-hero {
    gap:28px
  }
  .about-shelf {
    padding:22px
  }
  .about-game {
    grid-template-columns:80px minmax(0,1fr) auto;
    gap:12px
  }
  .about-game img {
    width:80px
  }
  .about-game h3 {
    font-size:20px
  }
  .overview-grid {
    gap:28px;
    grid-template-columns:1fr 1fr
  }
  .game-information,.tiny-how,.questions {
    gap:32px
  }
  .level-overviews {
    gap:14px
  }
  .level-overview {
    padding:18px
  }
  .game-card-body {
    padding:22px
  }
  .game-card-meta {
    flex-wrap:wrap
  }
  .home-promise {
    display:none
  }
}
@media(max-width:640px) {
  .about-content {
    padding-block:30px 20px
  }
  .about-hero {
    grid-template-columns:1fr;
    gap:36px;
    padding-bottom:36px
  }
  .about-intro h1 {
    font-size:clamp(34px,9vw,48px);
    margin:16px 0 20px
  }
  .about-lead {
    font-size:16px
  }
  .about-shelf ul {
    margin-top:12px
  }
  .about-principles {
    padding-block:32px 36px
  }
  .about-principles li {
    grid-template-columns:24px minmax(0,1fr);
    gap:12px;
    padding-block:24px
  }
  .about-principles li p {
    grid-column:2
  }
  .about-principles h3 {
    font-size:19px
  }
  .about-editorial {
    padding:24px
  }
  .about-rules {
    padding-bottom:36px
  }
  .rules-directory-link {
    grid-template-columns:64px minmax(0,1fr) auto;
    padding:18px;
    gap:12px
  }
  .rules-directory-link img {
    width:64px
  }
  .rule-link-label {
    display:none
  }
  .site-header {
    min-height:70px;
    gap:12px;
    flex-wrap:wrap;
    padding-block:14px
  }
  .brand {
    font-size:23px
  }
  .site-header nav {
    gap:4px;
    justify-content:space-between;
    width:100%
  }
  .site-header nav>a {
    padding-inline:12px
  }
  .home-hero {
    padding-block:30px 26px
  }
  .hero-copy h1 {
    font-size:36px;
    margin-top:12px
  }
  .hero-description {
    font-size:14px
  }
  .catalog-search {
    padding:6px 12px;
    gap:10px
  }
  .catalog-search>span {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%)
  }
  .catalog-filters {
    gap:4px
  }
  .catalog-filters button {
    padding-inline:12px
  }
  .catalog-heading {
    margin-top:22px
  }
  .game-grid {
    grid-template-columns:1fr;
    gap:22px
  }
  .game-card-title h2 {
    font-size:29px
  }
  .game-card-body {
    padding:22px
  }
  .game-card-meta {
    gap:14px
  }
  .game-card-meta .button {
    font-size:14px;
    padding-inline:16px
  }
  .about-strip {
    align-items:start;
    flex-direction:column;
    gap:16px;
    padding-block:28px
  }
  .site-footer {
    gap:16px
  }
  .site-footer nav {
    width:100%;
    margin:0;
    gap:24px
  }
  .game-heading {
    flex-direction:column;
    gap:20px;
    margin-block:18px 26px
  }
  .game-heading p {
    font-size:15px
  }
  .player-actions {
    align-self:stretch
  }
  .player-actions .play-link {
    width:100%;
    justify-content:space-between
  }
  .overview-grid {
    grid-template-columns:1fr;
    gap:28px
  }
  .game-intro {
    padding-bottom:32px
  }
  .game-information,.tiny-how,.questions {
    grid-template-columns:1fr;
    gap:28px;
    padding-block:32px
  }
  .rules-intro h2,.tiny-how h2,.questions>h2 {
    font-size:28px
  }
  .level-overviews {
    grid-template-columns:1fr
  }
  .level-overview {
    padding:22px
  }
  .tiny-final {
    flex-direction:column;
    align-items:start
  }
  .prose {
    padding-block:30px 48px
  }
  .prose .lead {
    font-size:17px
  }
}
@media(prefers-reduced-motion:no-preference) {
  .button,.play-link {
    transition:background-color .16s
  }
  .game-cover img {
    transition:transform .25s
  }
  .game-cover:hover img {
    transform:scale(1.025)
  }
}
html:lang(zh-CN) h1,html:lang(zh-CN) h2,html:lang(zh-CN) h3 {
  letter-spacing:-.015em;
  line-height:1.3
}
.brand {
  min-height:44px
}
/* A shared puzzle stays on the canonical overview until its recipient starts. */
.challenge-notice{padding:16px 20px;border:1px solid currentColor;border-radius:12px;font-size:15px;line-height:1.6;margin:0 0 28px}