/* Shared by every page. Anything here was duplicated across all of them and had
   already started to drift, which is how one page ended up without the tokens
   another page's rules referenced. */

:root {
  --paper:#faf7f2; --ink:#1f1924; --pop:#f59e0b; --line:#1f1924;
  --amber:#f59e0b; --indigo:#6366f1; --rose:#f43f5e;
  --mute:#4a4450; --faint:#8a8290;
  --display:"Fredoka",system-ui,-apple-system,sans-serif;
  --body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --hand:"Caveat",ui-rounded,cursive;

  /* Hard offset shadows, not blurs. The whole look rests on these. */
  --chunky-sm:0 3px 0 var(--ink); --chunky:0 6px 0 var(--ink);
  --chunky-lg:0 9px 0 var(--ink); --tactile:0 5px 0 #d97706;
  --dot:#e2d9ce; --hair:#e7e0d6;

  /* The crayon box, for card edges and section marks. */
  --c-red:#e8452b; --c-orange:#f5821f; --c-yellow:#ffd447; --c-green:#37a05f;
  --c-teal:#1f9b8e; --c-blue:#2f7fd1; --c-violet:#8e44ad; --c-pink:#d81b60;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent }

body {
  margin:0; padding:0 0 70px;
  background:var(--paper); color:var(--ink);
  background-image:radial-gradient(var(--dot) 1.2px, transparent 1.2px);
  background-size:24px 24px;
  font-family:var(--body); font-weight:500;
  -webkit-font-smoothing:antialiased;
}

a { color:inherit }
h1, h2 { font-family:var(--body); font-weight:800; letter-spacing:-.02em }
h3, .big { font-family:var(--display); font-weight:600 }

.wrap { max-width:1120px; margin:0 auto; padding:0 24px }
@media (max-width:640px) { .wrap { padding:0 18px } }

.hide { display:none !important }
.center { text-align:center }

/* The like button, on the gallery, a profile, and a game page. */
.like {
  font:inherit; font-family:var(--display); font-weight:600; font-size:13px;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:5px 11px; border-radius:99px; border:2px solid var(--ink); background:#fff;
  color:var(--ink); box-shadow:0 2px 0 var(--ink);
  transition:transform .1s, background .2s;
}
.like:hover { background:#fff1f2 }
.like:active { transform:translateY(2px); box-shadow:none }
.like.on { background:#ffe4e6; border-color:var(--ink) }
.like.on .h { color:#e11d48 }
.like .h { font-size:14px; line-height:1 }
.like.pop .h { animation:likepop .32s cubic-bezier(.2,1.5,.4,1) }
@keyframes likepop { 50% { transform:scale(1.5) } }