/* ============================================================
   shared/ui.css — shell styling for every page under /games
   ============================================================ */
:root{
  --ink:#241C30; --ink-2:#2E2540; --paper:#FFF8EC;
  --taxi:#FFC629; --stop:#E03A2F; --soon:#6E6383;
}
*{box-sizing:border-box}
body{
  margin:0; padding:26px 18px 70px; min-height:100vh;
  background:var(--ink); color:var(--paper);
  font-family:Nunito,system-ui,sans-serif;
  display:flex; flex-direction:column; align-items:center; gap:26px;
}

/* ---------- back button ---------- */
.topbar{width:100%; max-width:1000px}
.back{
  display:inline-flex; align-items:center; gap:8px;
  font-family:Bungee,cursive; font-size:14px; letter-spacing:.04em;
  color:var(--ink); background:var(--taxi); text-decoration:none;
  border:3px solid var(--ink); border-radius:11px; padding:9px 16px 9px 13px;
  box-shadow:0 4px 0 rgba(0,0,0,.5); transition:transform .08s, box-shadow .08s;
}
.back:hover{transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.5)}
.back:active{transform:translateY(4px); box-shadow:0 0 0 rgba(0,0,0,.5)}
.back:focus-visible{outline:3px solid var(--paper); outline-offset:3px}
.back svg{width:14px; height:14px}

/* ---------- headings ---------- */
.head{width:100%; max-width:1000px}
.head h1{
  font-family:Bungee,cursive; font-weight:400;
  font-size:clamp(28px,5.4vw,46px); margin:0 0 8px; line-height:1.05;
}
.head p{margin:0; font-size:16px; opacity:.72; max-width:60ch; line-height:1.55}

/* ---------- game grid ---------- */
.grid{
  width:100%; max-width:1000px; display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.tile{
  display:flex; flex-direction:column; gap:8px;
  background:var(--ink-2); border-radius:16px; padding:22px 20px 20px;
  border:3px solid transparent; text-decoration:none; color:var(--paper);
  box-shadow:0 7px 0 rgba(0,0,0,.4);
  transition:transform .1s, box-shadow .1s, border-color .1s;
}
.tile:hover{transform:translateY(-3px); box-shadow:0 10px 0 rgba(0,0,0,.4); border-color:var(--taxi)}
.tile:active{transform:translateY(2px); box-shadow:0 4px 0 rgba(0,0,0,.4)}
.tile:focus-visible{outline:3px solid var(--taxi); outline-offset:3px}
.tile h2{font-family:Bungee,cursive; font-weight:400; font-size:19px; margin:0; line-height:1.2}
.tile p{margin:0; font-size:14px; line-height:1.5; opacity:.72}

.tile.soon{
  pointer-events:none; opacity:.42; box-shadow:none;
  border-style:dashed; border-color:var(--soon);
}
.badge{
  align-self:flex-start; margin-top:4px;
  font-family:Bungee,cursive; font-size:11px; letter-spacing:.06em;
  background:var(--taxi); color:var(--ink); border-radius:999px; padding:4px 11px;
}
.tile.soon .badge{background:var(--soon); color:var(--paper)}