/* Portal: the games as cards on the same cobalt felt as the games themselves */
:root{--felt:#1A2466;--felt-2:#222E7C;--felt-3:#2D3A92;--line:#3B4AA6;--fg:#F4F2FF;--muted:#AEB5E6;--sun:#FFC53D;--sun-ink:#2B1F00;--sun-edge:#C8901A;
  --body:"Rubik",system-ui,-apple-system,"Segoe UI","Noto Sans",Arial,sans-serif;--display:"Rubik",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--display-weight:800;color-scheme:dark}
:root[lang="he"]{--display:"Secular One","Rubik","Arial Hebrew",Arial,sans-serif;--display-weight:400}
*{box-sizing:border-box}
body{margin:0;background:var(--felt);color:var(--fg);font-family:var(--body);line-height:1.5}
main{max-width:880px;margin:0 auto;padding:24px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:24px}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
h1,h2{font-family:var(--display);font-weight:var(--display-weight);margin:0;line-height:1.1}
h1{font-size:clamp(32px,7vw,48px);color:var(--sun)}
a{color:var(--muted)}
.tagline{font-size:19px;margin:0;max-width:40em}
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:12px;background:var(--felt-2);border:1.5px solid var(--line);border-radius:22px;padding:20px;text-decoration:none;color:var(--fg)}
.card:hover,.card:focus-visible{border-color:var(--sun)}
.card:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.card svg{width:64px;height:64px}
.card h2{font-size:28px}
.card p{margin:0;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.tags li{font-size:13px;padding:3px 10px;border-radius:999px;background:var(--felt-3)}
.play{margin-top:auto;align-self:flex-start;padding:10px 22px;border-radius:14px;background:var(--sun);color:var(--sun-ink);font-weight:700;box-shadow:0 4px 0 var(--sun-edge)}
footer{color:var(--muted);font-size:14px}