/* The look of games.bljeona.com: the same sticker style as Fish Happens.
   Fonts are on this server too (no Google Fonts), so visiting sends nothing to anyone else. */
@font-face { font-family: 'Lilita One'; src: url('fonts/lilita-one.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('fonts/nunito-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root { --ink: #1b1f3b; --sky: #d6edff; --pink: #ff5d8f; --sun: #ffd23f; --muted: #56617f; --paper: #fff; }
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--sky);
  color: var(--ink);
  font: 800 16px/1.55 'Nunito', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
}
main { width: min(680px, calc(100% - 24px)); margin: 24px auto 12px; flex: 1; }
.card {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--ink);
  padding: 22px 22px 18px;
  margin-bottom: 18px;
}
h1, h2.big { font-family: 'Lilita One', 'Nunito', sans-serif; font-weight: 400; margin: 0 0 6px; color: var(--pink); }
h1 { font-size: 40px; line-height: 1.1; }
h2.big { font-size: 30px; margin-top: 26px; }
h2 { font-size: 19px; margin: 22px 0 4px; }
p, li { margin: 0 0 8px; font-weight: 700; }
ul { padding-left: 22px; margin: 0 0 8px; }
a { color: var(--ink); font-weight: 900; }
.short { font-weight: 900; font-size: 17px; }
.date { color: var(--muted); font-size: 14px; margin-top: 18px; }
.back { display: inline-block; margin-bottom: 12px; text-decoration: none; }

/* Home page */
.hello { text-align: center; }
.hello p { color: var(--muted); }
.games { display: grid; gap: 18px; }
.game { display: grid; grid-template-columns: 1fr; padding: 0; overflow: hidden; }
.game img { width: 100%; height: auto; aspect-ratio: 1024 / 500; object-fit: cover; display: block; border-bottom: 3px solid var(--ink); background: var(--sun); }
.game .txt { padding: 16px 20px 20px; }
.game h2 { font-family: 'Lilita One', 'Nunito', sans-serif; font-weight: 400; font-size: 30px; margin: 0 0 4px; }
.tags { color: var(--muted); font-size: 14px; }
.play {
  display: inline-block;
  margin-top: 6px;
  padding: 12px 26px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--sun);
  box-shadow: 0 4px 0 var(--ink);
  text-decoration: none;
  font-size: 20px;
  font-weight: 900;
}
.play:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

footer { text-align: center; padding: 12px 12px 28px; font-size: 14px; color: var(--muted); }
footer a { margin: 0 8px; }