@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/rubik.woff) format('woff')}
@font-face{font-family:'Rubik Mono One';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/rubik-mono-one.woff) format('woff')}
/* Layout: a toy shelf. A sun-yellow band holds the name, the line and all the games' icons standing on one shelf;
   below it, four aisles of games, one row each, with where to get each game at the end of its row. */
:root{
  --bg:#fffdf6; --fg:#1b1a33; --muted:#5f5b74; --line:#ece4c8; --card:#ffffff;
  --band:#ffd23f; --on-band:#1b1a33; --band-muted:#5a4a12; --ledge:#d9a40f; --ledge-shade:rgba(90,60,0,.28);
  --btn:#1b1a33; --on-btn:#fff4cc; --soon:#857f9a; --soon-line:#d6cfb4;
  --foot:#1b1a33; --on-foot:#fff4cc; --foot-muted:#b9b4d4;
  --mark-bg:#1b1a33; --mark-fg:#ffd23f; --focus:#e8492b;
  --display:'Rubik Mono One','Arial Black',Impact,sans-serif;
  --body:'Rubik',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#131329; --fg:#f3efe0; --muted:#aaa6c4; --line:#29294a; --card:#1a1a37;
  --band:#1d1c42; --on-band:#ffd23f; --band-muted:#c9c3e8; --ledge:#3a3870; --ledge-shade:rgba(0,0,0,.45);
  --btn:#ffd23f; --on-btn:#1b1a33; --soon:#8d89ab; --soon-line:#3a3a62;
  --foot:#0d0d1f; --on-foot:#fff4cc; --foot-muted:#9e9abf;
  --mark-bg:#ffd23f; --mark-fg:#1b1a33; --focus:#ff8a6b; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#131329; --fg:#f3efe0; --muted:#aaa6c4; --line:#29294a; --card:#1a1a37;
  --band:#1d1c42; --on-band:#ffd23f; --band-muted:#c9c3e8; --ledge:#3a3870; --ledge-shade:rgba(0,0,0,.45);
  --btn:#ffd23f; --on-btn:#1b1a33; --soon:#8d89ab; --soon-line:#3a3a62;
  --foot:#0d0d1f; --on-foot:#fff4cc; --foot-muted:#9e9abf;
  --mark-bg:#ffd23f; --mark-fg:#1b1a33; --focus:#ff8a6b; color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.55 var(--body);-webkit-text-size-adjust:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.in{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* the band */
.band{background:var(--band);color:var(--on-band)}
.band .in{padding-block:22px 0;display:flex;flex-direction:column;gap:26px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:15px;letter-spacing:.06em;word-spacing:-.3em;text-transform:uppercase}
.mark{width:34px;height:34px;flex:none}
nav{display:flex;gap:18px;flex-wrap:wrap}
nav a{font-weight:600;font-size:15px;text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
nav a:hover{border-bottom-color:currentColor}
h1{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(32px,6.4vw,68px);line-height:1.02;letter-spacing:-.01em;word-spacing:-.28em;max-width:15ch;text-wrap:balance}
.ap{margin-inline:-.3em -.22em}
.lede{margin:0;font-size:clamp(17px,2.1vw,20px);line-height:1.5;max-width:44ch;color:var(--on-band)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.facts li{font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:999px;border:1.5px solid currentColor;color:var(--band-muted)}

/* the shelf: every icon stands on a ledge, a row at a time */
.shelf-wrap{container-type:inline-size}
.shelf{--cols:14;--gap:14px;--rg:24px;--s:min(64px,calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols)));display:grid;grid-template-columns:repeat(var(--cols),var(--s));gap:var(--rg) var(--gap);padding:6px 0 14px;margin:6px 0 0;list-style:none;
  background:repeating-linear-gradient(to bottom,transparent 0 calc(var(--s) + 12px),var(--ledge) calc(var(--s) + 12px) calc(var(--s) + 21px),var(--ledge-shade) calc(var(--s) + 21px) calc(var(--s) + 24px),transparent calc(var(--s) + 24px) calc(var(--s) + 6px + var(--rg)))}
.shelf li{width:var(--s);height:calc(var(--s) + 6px);display:flex;align-items:flex-end}
.shelf a{display:block;width:var(--s);height:var(--s);border-radius:22%;transform:rotate(var(--r,0deg));transition:transform .18s cubic-bezier(.3,1.5,.5,1);
  animation:land .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i) * 45ms)}
.shelf img{width:100%;height:100%;border-radius:22%;display:block;box-shadow:0 6px 10px -4px rgba(0,0,0,.35)}
.shelf a:hover,.shelf a:focus-visible{transform:translateY(-8px) rotate(0deg)}
@container (max-width:1077px){.shelf{--cols:7}}
@keyframes land{from{transform:translateY(-14px) rotate(var(--r,0deg))}to{transform:translateY(0) rotate(var(--r,0deg))}}
@media (prefers-reduced-motion: reduce){.shelf a{animation:none;transition:none}}
.band .in > :last-child{margin-bottom:0}
.shelf-wrap{padding-bottom:10px}

/* aisles */
main .in{padding-block:44px 64px;display:flex;flex-direction:column;gap:52px}
.aisle{display:flex;flex-direction:column;gap:6px}
.aisle h2{margin:0;font-family:var(--display);font-weight:400;word-spacing:-.28em;font-size:clamp(20px,2.6vw,26px);line-height:1.15;text-wrap:balance}
.aisle .line{margin:0 0 10px;color:var(--muted);max-width:60ch}
.rows{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--line)}
.game{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:6px 20px;align-items:center;padding:18px 0;border-bottom:1.5px solid var(--line);scroll-margin-top:16px}
.game img{width:76px;height:76px;border-radius:22%;display:block;box-shadow:0 5px 12px -6px rgba(0,0,0,.4)}
.what{min-width:0;display:flex;flex-direction:column;gap:2px}
.what h3{margin:0;font-size:20px;font-weight:700;line-height:1.25}
.what .sub{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.what p{margin:4px 0 0;max-width:58ch}
.get{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 15px;border-radius:999px;font:600 14px/1.1 var(--body);text-decoration:none;white-space:nowrap;background:var(--btn);color:var(--on-btn);border:1.5px solid var(--btn)}
.btn:hover{filter:brightness(1.12)}
.btn.soon{background:transparent;color:var(--soon);border:1.5px dashed var(--soon-line);cursor:default}
.btn.soon:hover{filter:none}
.btn.soon i{font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:760px){
  .shelf{--gap:8px;--rg:20px}
  .game{grid-template-columns:60px minmax(0,1fr)}
  .game img{width:60px;height:60px}
  .get{grid-column:1 / -1;justify-content:flex-start}
}

/* text pages */
.page .in{padding-block:40px 64px}
.doc{max-width:68ch;display:flex;flex-direction:column;gap:6px}
.doc h1{font-size:clamp(28px,5vw,44px);max-width:none;margin-bottom:6px}
.doc h2{margin:22px 0 2px;font-size:19px;font-weight:700}
.doc p,.doc li{margin:0}
.doc ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:4px}
.doc .meta{color:var(--muted);font-size:14px;margin-bottom:10px}
.doc a{color:var(--fg);text-decoration-thickness:2px;text-underline-offset:3px}
.band.slim .in{padding-block:18px}

/* footer */
footer{background:var(--foot);color:var(--on-foot)}
footer .in{padding-block:34px 40px;display:flex;flex-wrap:wrap;gap:22px 40px;align-items:flex-end;justify-content:space-between}
.ask{display:flex;flex-direction:column;gap:8px}
.ask b{font-family:var(--display);font-weight:400;font-size:18px;word-spacing:-.28em}
.mail{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mail a{font-size:17px;font-weight:600;color:var(--on-foot);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.copy{font:600 13px var(--body);color:var(--on-foot);background:transparent;border:1.5px solid var(--foot-muted);border-radius:999px;padding:6px 12px;cursor:pointer}
.small{display:flex;flex-direction:column;gap:6px;color:var(--foot-muted);font-size:14px}
.small nav a{font-size:14px;color:var(--on-foot)}

/* promise box in the band */
.promise{margin:0;padding:14px 18px;border-radius:16px;background:var(--mark-bg);color:var(--mark-fg);max-width:62ch;font-size:16px;line-height:1.45}
.promise b{font-family:var(--display);font-weight:400;word-spacing:-.28em;display:block;font-size:17px;margin-bottom:4px}
.promise a{color:inherit;font-weight:600;text-decoration-thickness:2px;text-underline-offset:3px}
/* no-hassle page */
.doc ul.promises{list-style:none;padding:0;margin:8px 0 14px;display:grid;gap:8px}
.doc ul.promises li{padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--card)}
.doc ul.promises b{display:block;font-size:17px}
.doc ul.games{display:block;columns:2;column-gap:28px;padding-left:20px}
.doc ul.games li{break-inside:avoid;margin:0 0 4px}
@media (max-width:560px){.doc ul.games{columns:1}}
/* about + 404 */
.about p:not(.line){max-width:68ch;margin:0}
.about p+p{margin-top:12px}
.doc .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.doc .btn{color:var(--on-btn);text-decoration:none}
.doc .btn.ghost,.btn.ghost{background:transparent;color:var(--fg);border-color:var(--fg)}