/* Martin Silly Games: a crayon-and-paper game menu (one look, light background) */
:root {
  --paper: #fff7e0;
  --ink: #3a2a22;
  --sun: #ffd23a;
  --pink: #ff6fae;
  --card: #fffdf6;
  --muted: #8a6a4a;
  --font: "Gochi Hand", "Comic Sans MS", "Chalkboard SE", cursive;
  --wobble: 255px 15px 225px 15px / 15px 225px 15px 255px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background:
    repeating-linear-gradient(-8deg, rgba(255, 190, 60, 0.18) 0 3px, transparent 3px 26px),
    radial-gradient(circle at 20% 10%, #fff3c4, var(--paper) 60%);
  color: var(--ink); font-family: var(--font);
}
main {
  max-width: 760px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 24px) max(16px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 32px) max(16px, env(safe-area-inset-left));
}
header { text-align: center; }
.logo { width: 108px; height: 108px; animation: wiggle 2.4s ease-in-out infinite; }
h1 {
  font-size: clamp(40px, 11vw, 64px); line-height: 1; margin: 8px 0 4px;
  color: var(--pink); -webkit-text-stroke: 1.5px var(--ink); text-wrap: balance;
}
.tag { font-size: 24px; margin: 0 0 22px; }

.games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.game > a, .game > div {
  display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto 1fr auto; column-gap: 14px; row-gap: 4px;
  padding: 14px; height: 100%; min-width: 0;
  background: var(--card); color: inherit; text-decoration: none;
  border: 4px solid var(--ink); border-radius: var(--wobble);
  box-shadow: 4px 6px 0 rgba(58, 42, 34, 0.35);
  transition: transform 0.15s;
}
.game > a:hover, .game > a:focus-visible { transform: rotate(-1.5deg) scale(1.02); }
.game > a:focus-visible { outline: 4px dashed var(--pink); outline-offset: 4px; }
.game > a:active { transform: translate(2px, 3px); box-shadow: 1px 2px 0 rgba(58, 42, 34, 0.35); }
.art { grid-row: 1 / 4; width: 96px; height: 96px; border-radius: 22px; }
.name { font-size: 30px; line-height: 1.05; }
.about { font-size: 18px; line-height: 1.25; }
.play {
  justify-self: start; font-size: 22px; padding: 4px 18px; margin-top: 4px;
  background: var(--sun); border: 3px solid var(--ink); border-radius: var(--wobble);
}
.soon > div { opacity: 0.7; border-style: dashed; }
.soon-art { display: grid; place-items: center; font-size: 56px; color: var(--muted); background: #f3ead6; border: 3px dashed var(--muted); }

footer { text-align: center; margin-top: 30px; font-size: 18px; color: var(--muted); }

@keyframes wiggle { 50% { transform: rotate(-6deg) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .logo { animation: none; } .game > a { transition: none; } }
@media (max-width: 380px) { .game > a, .game > div { grid-template-columns: 76px 1fr; } .art { width: 76px; height: 76px; } }