/* The way in: every game is a slab in its own colour. */
:root{--bg:#16172b;--fg:#f3efe2;--dim:#b7b4cb}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--fg);font-family:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
main{max-width:560px;margin:0 auto;padding:max(24px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
h1{margin:0;font-size:clamp(30px,9.4vw,54px);font-weight:800;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.lede{margin:10px 0 0;max-width:30em;font-size:16px;line-height:1.45;color:var(--dim)}
h2{margin:22px 0 8px;font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--dim)}
ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.game{display:grid;grid-template-columns:52px minmax(0,1fr) 36px;align-items:center;gap:12px;min-height:76px;padding:12px 14px 12px 12px;border-radius:20px;background:var(--c);color:var(--t);text-decoration:none}
.game img{display:block;border-radius:11px;box-shadow:0 0 0 2px color-mix(in srgb,var(--t) 20%,transparent)}
.name{display:block;font-size:20px;font-weight:700;line-height:1.2}
.what{display:block;margin-top:3px;font-size:15px;line-height:1.3;opacity:.88}
.mark{display:inline-block;margin-top:7px;padding:2px 9px;border-radius:99px;background:color-mix(in srgb,var(--t) 16%,transparent);font-size:13px;font-weight:700;line-height:18px;font-variant-numeric:tabular-nums}
.mark:empty{display:none}
.play{width:36px;height:36px}
.play circle{fill:var(--t);opacity:.16}
.play path{fill:var(--t)}
.game:active{transform:scale(.985)}
.game:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
footer{margin-top:34px;padding-top:18px;border-top:1px solid #ffffff22;font-size:15px;line-height:1.5;color:var(--dim)}
footer p{margin:0 0 6px}
footer a{color:var(--fg);text-underline-offset:3px}
@media(min-width:780px){main{max-width:940px}ul{grid-template-columns:1fr 1fr}}