/* Arcade -- the games page. A way back to Wordrush, tiles, and nothing else. */

.hero{max-width:620px;margin:22px 0 30px}
.hero h1{font-size:38px;margin:0 0 10px;letter-spacing:-.02em;font-weight:680}
.hero p{color:var(--muted);font-size:16.5px;margin:0;line-height:1.6}

.tiles{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.tile{
  display:flex;gap:18px;align-items:flex-start;text-align:left;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;cursor:pointer;
  text-decoration:none;color:inherit;font:inherit;
  transition:border-color .14s, transform .14s, box-shadow .14s;
}
.tile:hover{
  border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow);
}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tileicon{
  width:74px;height:74px;flex:none;color:var(--accent);
  border-radius:var(--radius-sm);background:var(--panel-2);
  border:1px solid var(--line);padding:5px;
}
.tileicon svg{width:100%;height:100%;display:block}
.tilebody{min-width:0;flex:1}
.tilebody h2{margin:0 0 4px;font-size:18.5px;font-weight:650;letter-spacing:-.01em}
.tilebody .tag{color:var(--muted);font-size:14px;margin:0 0 10px;line-height:1.45}
.facts{display:flex;gap:7px;flex-wrap:wrap}

.foot{color:var(--muted);font-size:13px;margin-top:28px}
.broken{
  border:1px solid var(--warn);color:var(--warn);border-radius:var(--radius-sm);
  padding:10px 12px;margin-bottom:14px;font-size:13.5px;
  font-family:ui-monospace,monospace;white-space:pre-wrap;
}
.empty{color:var(--muted);font-style:italic;padding:30px 0}