/* The overview. Same vocabulary as the games it links to: dark ground, cyan
   light, one mono face, and nothing that needs a build step. */
:root{--cyan:#38e8ff;--hot:#ff2e88;--bg:#03060a;--ink:#cbf6ff;--faint:#3f7c8c;
  --mono:"SF Mono",ui-monospace,"Cascadia Mono","JetBrains Mono",Menlo,Consolas,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(rgba(56,232,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,232,255,.045) 1px,transparent 1px),
    radial-gradient(ellipse at 50% 0%,rgba(56,232,255,.10),transparent 60%);
  background-size:44px 44px,44px 44px,100% 900px}

header{text-align:center;padding:86px 24px 54px}
h1{font-size:clamp(38px,9vw,86px);letter-spacing:.30em;font-weight:400;color:#fff;text-indent:.30em;
  text-shadow:0 0 10px var(--cyan),0 0 40px var(--cyan),0 0 90px rgba(56,232,255,.55)}
header .tag{margin-top:18px;font-size:12px;letter-spacing:.20em;color:#4d8494}

main{max-width:1360px;margin:0 auto;padding:0 24px 20px}
section{margin-bottom:64px}
section.last{margin-bottom:34px}
h2{font-size:13px;letter-spacing:.34em;color:var(--cyan);font-weight:400;text-indent:.34em;
  padding-bottom:12px;border-bottom:1px solid rgba(56,232,255,.20);text-shadow:0 0 18px rgba(56,232,255,.6)}
.lede{margin-top:14px;font-size:11.5px;line-height:1.8;letter-spacing:.04em;color:#6ea3b4;max-width:760px}

.grid{display:grid;gap:18px;margin-top:22px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.grid.one{grid-template-columns:minmax(310px,640px)}

.card{display:block;text-decoration:none;color:inherit;border:1px solid rgba(56,232,255,.16);
  background:linear-gradient(180deg,rgba(56,232,255,.05),rgba(56,232,255,.015));
  padding:0 0 16px;transition:border-color .16s,box-shadow .16s,transform .16s}
.card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-bottom:1px solid rgba(56,232,255,.16);filter:saturate(.92) brightness(.94);transition:filter .16s}
.card h3{font-size:14px;letter-spacing:.26em;font-weight:400;color:#fff;text-indent:.26em;margin:15px 16px 0;
  text-shadow:0 0 16px rgba(56,232,255,.5)}
.card p{margin:9px 16px 0;font-size:11px;line-height:1.75;letter-spacing:.02em;color:#7fb3c2}
.card:hover,.card:focus-visible{border-color:var(--cyan);box-shadow:0 0 30px rgba(56,232,255,.20);transform:translateY(-2px);outline:none}
.card:hover img,.card:focus-visible img{filter:saturate(1.05) brightness(1.06)}
.card:hover h3,.card:focus-visible h3{color:var(--cyan)}

footer{max-width:1360px;margin:0 auto;padding:26px 24px 70px;border-top:1px solid rgba(56,232,255,.14)}
footer p{font-size:10.5px;letter-spacing:.10em;line-height:2;color:#33636f}
footer b{color:var(--faint);font-weight:400}

@media (max-width:640px){header{padding:56px 18px 36px}main,footer{padding-left:18px;padding-right:18px}}