:root{
  --paper:#efe5ce; --paper-deep:#e2d4b4; --card:#f6efdd;
  --ink:#33261c; --ink-soft:#5f4c3b;
  --red:#9c3325; --ochre:#c6892c; --teal:#1e5a5c; --teal-lift:#2b7a7c;
  --rule:#c3b087;
  --display:Georgia,'Iowan Old Style','Palatino Linotype',Palatino,'Times New Roman',serif;
  --body:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'Cascadia Mono',Consolas,'SF Mono','DejaVu Sans Mono',ui-monospace,monospace;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background-color:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:18px; line-height:1.55; overflow-wrap:anywhere;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)' opacity='0.055'/%3E%3C/svg%3E");
}
a{ color:var(--teal); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--teal-lift); }
:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; border-radius:2px; }
[hidden]{ display:none !important; }
.shell{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }

/* masthead (same as the other momatio pages) */
.masthead{ padding:26px 0 0; }
.masthead__inner{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.wordmark{ font-family:var(--display); font-weight:700; font-size:clamp(2.4rem,7vw,4rem); letter-spacing:-0.02em; line-height:.9; margin:0; }
.wordmark a{ color:var(--ink); text-decoration:none; }
.wordmark span{ color:var(--red); }
.masthead__tag{ font-family:var(--display); font-style:italic; font-size:18px; color:var(--ink-soft); margin:0; }
.rules{ margin:16px 0 0; }
.rules hr{ border:0; border-top:2px solid var(--ink); margin:0; }
.rules hr + hr{ border-top-width:1px; margin-top:3px; }
.masthead nav.mo-nav{
  --mo-ink:var(--ink); --mo-soft:var(--ink-soft); --mo-accent:var(--red);
  --mo-line:var(--rule); --mo-card:var(--card); --mo-hover:rgba(158,50,37,.08);
  max-width:none; margin:0; padding:13px 0 0; gap:8px 20px; min-height:44px;
  font-family:var(--mono); font-size:17px; font-weight:400; line-height:1.35;
  letter-spacing:.06em; text-transform:uppercase;
}
.masthead nav[data-mo-nav]{ min-height:44px; }
.masthead nav.mo-nav .mo-nav__brand{ display:none; }
.masthead nav.mo-nav .mo-nav__menu{ border-radius:0; padding:6px; box-shadow:0 2px 0 rgba(51,38,28,.07),0 16px 28px -18px rgba(51,38,28,.6); }
.masthead nav.mo-nav .mo-nav__menu a{ letter-spacing:.09em; }
.masthead nav.mo-nav .mo-nav__menu i{ font-family:var(--body); font-size:17px; letter-spacing:0; text-transform:none; color:#665545; }

/* hero */
.hero{ padding:40px 0 8px; }
.kicker{ font-family:var(--mono); font-size:17px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin:0 0 10px; }
h1{ font-family:var(--display); font-weight:700; font-size:clamp(2.1rem,5.4vw,3.3rem); line-height:1.1; letter-spacing:-0.015em; margin:0 0 16px; }
.tagline{ font-family:var(--display); font-style:italic; font-size:clamp(1.25rem,3vw,1.7rem); line-height:1.3; color:var(--ink-soft); margin:0 0 20px; }
.lede{ font-size:1.2rem; color:var(--ink); margin:0 0 14px; }
.lede b{ font-weight:700; }
.honest{ color:var(--ink-soft); margin:0 0 10px; }
.honest b{ color:var(--ink); }
/* Dave 10/11: the intro runs the full column on a computer, so the games start higher on the page */

h2{ font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,3.6vw,2.1rem); line-height:1.15; margin:0 0 18px; padding-bottom:10px; border-bottom:2px solid var(--ochre); }
section.band{ padding:34px 0 8px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  font-family:var(--body); font-size:18px; font-weight:600; line-height:1.3;
  padding:11px 24px; border:1.5px solid var(--teal); text-decoration:none; cursor:pointer;
  background:transparent; color:var(--teal); border-radius:0;
}
.btn:hover{ background:rgba(30,90,92,.09); }
.btn--go{ background:var(--teal); color:var(--card); }
.btn--go:hover{ background:var(--teal-lift); color:var(--card); }

/* featured: From Momatio. Dave 10/11: "make the Dispersed card a slim banner", so the games start higher */
.feature{
  display:grid; grid-template-columns:168px minmax(0,1fr) auto; align-items:center; gap:0 22px; background:var(--card);
  border:1px solid var(--rule); border-left:4px solid var(--red); padding:0 22px 0 0;
  box-shadow:0 2px 0 rgba(51,38,28,.07);
}
.feature__pic{ display:block; align-self:stretch; background:var(--paper-deep); }
.feature__pic img{ display:block; width:100%; height:100%; min-height:96px; object-fit:cover; object-position:57% 50%; }   /* camper + fire */
.feature__body{ padding:12px 0; min-width:0; }
.feature__label{ font-family:var(--mono); font-size:17px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin:0; font-weight:700; }
.feature h2{ border:0; padding:0; margin:0; font-size:1.4rem; line-height:1.2; }
.feature p{ margin:2px 0 0; }
.feature__go{ white-space:nowrap; }

/* controls */
.controls{ background:var(--card); border:1px solid var(--rule); padding:16px 18px 14px; margin:0 0 22px;
  box-shadow:0 2px 0 rgba(51,38,28,.07); }
.ctl-row{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:0 0 12px; }
.ctl-row:last-child{ margin-bottom:0; }
.search{ flex:1 1 260px; min-width:0; }
.search input{
  width:100%; min-height:48px; font:inherit; font-size:18px; color:var(--ink); background:#fffdf7;
  border:1.5px solid #6b5a46; padding:9px 12px; border-radius:2px;
}
.seg{ display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.seg__label{ margin-right:10px; color:var(--ink-soft); font-weight:600; }
.pill{
  min-height:44px; font:inherit; font-size:17px; font-weight:600; line-height:1.2; color:var(--ink);
  background:#fffdf7; border:1.5px solid #6b5a46; padding:8px 16px; cursor:pointer; border-radius:0;
  display:inline-flex; align-items:center; gap:8px;
}
.pill + .pill{ margin-left:-1.5px; }
.pill:hover{ background:#fff7e0; }
.pill[aria-pressed="true"]{ background:var(--teal); border-color:var(--teal); color:#fff; }
.pill .n{ font-weight:400; opacity:1; }
.pill[aria-pressed="true"] .n{ color:#e6f2f2; }
.pill.is-empty{ color:#6d5d4c; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips .pill{ border-radius:22px; margin-left:0; padding:8px 14px; }
.toggles{ display:flex; flex-wrap:wrap; gap:8px; }
.toggles .pill{ border-radius:22px; margin-left:0; }
.toggles .pill::before{ content:""; width:16px; height:16px; border:2px solid currentColor; border-radius:3px; flex:none; }
.toggles .pill[aria-pressed="true"]::before{ background:currentColor; box-shadow:inset 0 0 0 2px var(--teal); }
.status{ margin:0; color:var(--ink-soft); font-weight:600; min-height:28px; }
.nojs-note{ margin:0 0 18px; color:var(--ink-soft); }

/* cards */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px 22px; }
.game{
  background:var(--card); border:1px solid var(--rule); display:flex; flex-direction:column; min-width:0;
  box-shadow:0 2px 0 rgba(51,38,28,.07),0 14px 24px -20px rgba(51,38,28,.6);
}
.game__pic{ display:block; aspect-ratio:16/9; background:var(--paper-deep); overflow:hidden; border-bottom:1px solid var(--rule); }
.game__pic img{ display:block; width:100%; height:100%; object-fit:cover; }
.game__pic.ph{
  display:flex; align-items:center; justify-content:center; text-align:center; padding:14px;
  background:hsl(var(--h) 38% 82%); color:var(--ink); text-decoration:none;
  font-family:var(--display); font-size:1.5rem; font-weight:700; line-height:1.15;
}
.game__body{ padding:14px 16px 10px; display:flex; flex-direction:column; flex:1; min-width:0; }
.game__cat{ font-family:var(--mono); font-size:17px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); margin:0 0 4px; font-weight:700; }
.game__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:0 0 4px; }
.game__meta .game__cat{ margin:0; }
.game__mw{ font-size:17px; line-height:1.2; padding:2px 10px; color:var(--ink-soft); background:var(--paper); border:1px solid var(--rule); border-radius:14px; white-space:nowrap; }   /* "Made with Claude": small and quiet, 6:1 on the card */
.game__title{ font-family:var(--display); font-size:1.3rem; line-height:1.2; margin:0 0 6px; }
.game__title a{ color:var(--ink); text-decoration-color:var(--ochre); text-decoration-thickness:2px; display:inline-block; min-height:44px; padding:8px 0 0; }
.game__title a:hover{ color:var(--teal); }
.game__desc{ margin:0 0 10px; color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:17px; line-height:1.45; }
.game__tags{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.game__tags li{ font-size:17px; line-height:1.2; padding:4px 10px; background:var(--paper); border:1px solid var(--rule); border-radius:14px; color:var(--ink); }
.game__built{ margin:0 0 4px; font-size:17px; font-weight:600; color:var(--ink); }
.game__built::before{ content:"\2726\00a0"; color:var(--red); }
.game__credit, .game__post{ margin:0; font-size:17px; color:var(--ink-soft); display:flex; flex-wrap:wrap; align-items:center; column-gap:6px; }
.game__credit a, .game__post a{ display:inline-flex; align-items:center; min-height:44px; padding:0 2px; font-weight:600; }
.game__credit .cr{ display:inline-flex; align-items:center; column-gap:6px; }
.game__post{ margin-top:auto; border-top:1px solid var(--rule); }
.game__more{ color:var(--ink-soft); }
.game__post .cr{ display:inline-flex; align-items:center; column-gap:6px; min-height:44px; }
.addlink{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; }

.pl-short{ display:none; }
/* hearts: a thumbs-up, nothing else.  Added by the page script only (so none without JavaScript). */
.game__foot{ margin-top:auto; border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.game__foot .game__post{ margin:0; border-top:0; flex:1 1 auto; min-width:0; }
.love{
  flex:none; min-height:44px; min-width:44px; font:inherit; font-size:17px; font-weight:700; line-height:1.2; color:var(--ink);
  background:#fffdf7; border:1.5px solid #6b5a46; border-radius:22px; padding:6px 14px; margin:2px 0;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
}
.love:hover{ background:#fff7e0; }
.love[aria-pressed="true"]{ background:var(--red); border-color:var(--red); color:#fff; }
.love__h{ font-size:21px; line-height:1; }
.love__n{ min-width:1ch; }
.love__n:empty{ display:none; }
.love-note{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:20; margin:0; max-width:min(92vw,520px);
  background:var(--ink); color:#fff; font-weight:600; padding:12px 18px; border-radius:6px; box-shadow:0 8px 24px rgba(51,38,28,.35);
}

/* Compact view: the same markup as the cards with no pictures and no description, in tighter tiles.
   Line 1 is the title with its heart; line 2 is the category, the credit and the post link; "Built with" only if stated. */
.grid--compact{ grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:10px 14px; }
.grid--compact .game__pic, .grid--compact .game__desc, .grid--compact .game__tags, .grid--compact .game__more{ display:none; }
.grid--compact .game{ box-shadow:0 1px 0 rgba(51,38,28,.07); }
.grid--compact .game__body{ flex-direction:row; flex-wrap:wrap; align-items:center; align-content:flex-start; column-gap:10px; row-gap:0; padding:2px 12px 4px 14px; }
.grid--compact .game__body::before{ content:""; order:3; flex:0 0 100%; height:0; }
.grid--compact .game__title{ order:1; flex:1 1 0; min-width:0; margin:0; font-size:1.15rem; }
.grid--compact .game__title a{ display:flex; align-items:center; min-height:44px; padding:0; line-height:1.25; }
.grid--compact .gt{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; min-width:0; }
.grid--compact .pl-full{ display:none; }
.grid--compact .pl-short{ display:inline; }
.grid--compact .game__foot{ display:contents; }
.grid--compact .love{ order:2; }
.grid--compact .game__meta{ display:contents; }   /* the category and its "Made with" chip are two items of the row */
.grid--compact .game__cat, .grid--compact .game__mw{ order:4; margin:0; }
.grid--compact .game__credit{ order:5; }
.grid--compact .game__post{ order:6; margin:0; border:0; }
.grid--compact .game__built{ order:7; flex:0 0 100%; margin:0 0 6px; }

.more{ text-align:center; padding:28px 0 6px; }
.more .btn{ min-width:240px; }
.empty{ padding:24px 0; text-align:center; color:var(--ink-soft); }

/* plain links under the list: every numbered page of games and the developers' A-to-Z page (the buttons above are for people with scripts) */
.pager{ padding:22px 0 4px; text-align:center; }
.pager__lead{ margin:0 0 8px; color:var(--ink-soft); font-weight:600; }
.pager__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 16px; margin:0 0 14px; }
.pager__row .here{ font-weight:700; }
.pager__nums{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.pager__nums a, .pager__nums span{
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 8px;
  font-weight:600; border:1.5px solid var(--rule); border-radius:22px; background:var(--card); color:var(--teal); text-decoration:none;
}
.pager__nums a:hover{ background:rgba(30,90,92,.09); }
.pager__nums [aria-current]{ background:var(--ink); color:var(--card); border-color:var(--ink); }
.pager__more{ margin:10px 0 0; }

/* footer */
.foot{ padding:36px 0 64px; color:var(--ink-soft); }
.foot p{ margin:0 0 12px; max-width:66ch; }
.foot .ask{ color:var(--ink); font-weight:600; font-size:1.1rem; }
.foot a{ display:inline-flex; align-items:center; min-height:44px; }

@media (max-width:760px){
  .feature{ grid-template-columns:104px minmax(0,1fr); padding:0; }
  .feature__body{ padding:10px 14px 10px 0; }
  .feature__body br{ display:none; }   /* the two sentences run together here, so "game." is not left alone on a line */
  .feature__go{ grid-column:1 / -1; justify-content:center; border-radius:0; }
}
@media (max-width:600px){
  body{ font-size:19px; }
  .shell{ padding:0 18px; }
  .hero{ padding-top:28px; }
  .masthead nav.mo-nav{ gap:12px 20px; font-size:18px; }
  .masthead nav.mo-nav .mo-nav__menu i{ font-size:18px; }
  .controls{ padding:14px 14px 12px; }
  .chips{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .chips .pill{ flex:none; scroll-snap-align:start; white-space:nowrap; }
  .chips.more-right{ -webkit-mask-image:linear-gradient(to right,#000 86%,transparent); mask-image:linear-gradient(to right,#000 86%,transparent); }

  .grid{ grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition-duration:.001ms !important; scroll-behavior:auto !important; } }

/* Spotlight: a paid row, marked as paid.  Its own band, heading and label; it never shares a list with the hearts. */
.spot{ margin-top:14px; }
.spot > .shell{ background:#f1e6c8; border:1px solid var(--rule); border-left:4px solid var(--ochre); padding-top:18px; padding-bottom:22px; }
.spot h2{ border-bottom-color:var(--ink-soft); }
.spot__tag{ font-family:var(--mono); font-size:.62em; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); white-space:nowrap; }
.spot__note{ margin:0 0 18px; color:var(--ink); }
.game__ad{
  align-self:flex-start; margin:0 0 8px; padding:3px 10px; font-family:var(--mono); font-size:17px; line-height:1.2; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:#fffdf7; border:1.5px solid var(--ink-soft);
}
.game--spot{ border-top:4px solid var(--ochre); }
#spot-foot{ margin:0 0 10px; }
/* the badge page (badge.html): everything above is the main page's own CSS; these rules are the only additions */
.shell--badge{ max-width:760px; }
.kicker a{ display:inline-flex; align-items:center; min-height:44px; letter-spacing:.04em; }
.panel{
  background:var(--card); border:1px solid var(--rule); border-top:4px solid var(--red);
  padding:24px 24px 26px; margin:0 0 24px; box-shadow:0 2px 0 rgba(51,38,28,.07),0 16px 26px -20px rgba(51,38,28,.6);
}
.field{ margin:0 0 22px; padding:0; border:0; min-width:0; }
.field > label{ display:block; font-weight:700; font-size:18px; line-height:1.35; margin:0 0 7px; padding:0; }
.field input[type="text"]{
  display:block; width:100%; min-height:48px; font:inherit; font-size:18px; line-height:1.4; color:var(--ink);
  background:#fffdf7; border:1.5px solid #6b5a46; padding:9px 12px; border-radius:2px;
}
.field input::placeholder{ color:#6d5d4c; opacity:1; }
.field [aria-invalid="true"]{ border:2px solid var(--red); }
.hint{ margin:7px 0 0; color:var(--ink-soft); font-size:17px; line-height:1.45; }
.err{ margin:7px 0 0; color:var(--red); font-weight:600; font-size:17px; line-height:1.4; }
.make{ min-width:220px; min-height:52px; font-size:19px; }
.pick__h{ margin:0 0 12px; font-weight:700; }
.pick__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.pick__list .pill{ border-radius:22px; margin-left:0; text-align:left; max-width:100%; }
.result h2{ margin-top:0; }
.preview{ background:var(--paper-deep); border:1px solid var(--rule); padding:18px 10px; margin:0 0 20px; display:flex; justify-content:center; }
.preview img{ display:block; width:320px; height:80px; max-width:none; }   /* drawn at its own size: its words are 17px or more only at 1x */
.result__label{ display:block; font-weight:700; font-size:18px; line-height:1.35; margin:0 0 7px; }
#snippet{
  display:block; width:100%; font-family:var(--mono); font-size:17px; line-height:1.45; color:var(--ink); background:#fffdf7;
  border:1.5px solid #6b5a46; padding:10px 12px; border-radius:2px; resize:vertical; overflow-wrap:anywhere; white-space:pre-wrap;
}
.copyrow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:14px 0 0; }
.copyrow .btn{ min-width:200px; min-height:52px; font-size:19px; }
.copied{ margin:0; font-weight:600; color:var(--teal); }
.copied:empty{ display:none; }
@media (max-width:600px){
  .panel{ padding:18px 12px 20px; }
  .make, .copyrow .btn{ width:100%; }
  .preview{ padding:14px 0; }
}