/* Shared look for the home page and category pages */
  :root{
    color-scheme: light;
    --sky:#CDEBF5;
    --sky2:#F7DDEB;
    --hedge:#2E6E61;
    --pink:#F2559B;
    --gold:#FFC23D;
    --ink:#23413B;
    --card:#FFFFFF;
    --muted:#557A72;
  }
  *{box-sizing:border-box}
  [hidden]{display:none!important}
  html,body{min-height:100%}
  body{
    margin:0;
    background:linear-gradient(170deg,var(--sky) 0%,var(--sky2) 100%) fixed;
    background-color:var(--sky);
    color:var(--ink);
    font-family:"Nunito",system-ui,sans-serif;
    padding-inline:16px;
    padding-block:max(24px, env(safe-area-inset-top)) 40px;
  }
  .wrap{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
  header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:12px}
  .rainbow{display:flex;gap:4px}
  .rainbow span{width:28px;height:8px;border-radius:4px}
  .brand{
    font-family:"Chewy","Comic Sans MS",cursive;font-weight:400;
    font-size:clamp(44px,10vw,80px);line-height:1;margin:8px 0 0;
    color:var(--pink);text-shadow:3px 3px 0 #fff;text-wrap:balance;
  }
  .tag{margin:0;font-size:clamp(16px,3.5vw,20px);font-weight:800;color:var(--muted)}
  main{display:flex;flex-direction:column;gap:18px}
  .filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
  .filters a{
    font:inherit;text-decoration:none;font-weight:800;font-size:17px;cursor:pointer;
    background:var(--card);color:var(--ink);border:3px solid transparent;
    padding:10px 18px;border-radius:999px;box-shadow:0 4px 12px #2E6E6118;
    display:inline-flex;align-items:center;gap:8px;min-height:48px;
    transition:transform .12s ease;
  }
  .filters a:hover{transform:translateY(-2px)}
  .filters a[aria-current="page"]{background:var(--pink);color:#fff;box-shadow:0 6px 16px #F2559B55}
  .filters a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  .filters .count{font-size:13px;background:#0000000F;border-radius:999px;padding:1px 8px}
  .filters a[aria-current="page"] .count{background:#FFFFFF33}
  .filters a.clear{background:transparent;box-shadow:none;border:3px dashed #2E6E6155;color:var(--muted)}
  .filters a.clear:hover{background:#FFFFFF99}
  .section-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .badge{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:32px;flex:none}
  .section-head h2{font-family:"Chewy","Comic Sans MS",cursive;font-weight:400;font-size:clamp(30px,6vw,40px);margin:0;line-height:1;color:var(--ink)}
  .section-head p{margin:2px 0 0;font-size:15px;color:var(--muted)}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
  .game{
    display:flex;flex-direction:column;background:var(--card);border-radius:22px;overflow:hidden;
    text-decoration:none;color:inherit;box-shadow:0 8px 24px #2E6E6122;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .game:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:0 14px 30px #2E6E6133}
  .game:focus-visible{outline:4px solid var(--gold);outline-offset:3px}
  .art{aspect-ratio:4/3;display:grid;place-items:center;font-size:clamp(72px,18vw,96px);position:relative}
  .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
  .game:hover .art img{transform:scale(1.05)}
  .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
  .game h3{font-family:"Chewy",cursive;font-weight:400;font-size:28px;margin:0;line-height:1.1}
  .game p{margin:0;font-size:15px;color:var(--muted)}
  .meta{display:flex;gap:6px;flex-wrap:wrap}
  .chip{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:#EAF7EC;color:var(--ink)}
  .controls{font-size:13px!important;font-weight:700}
  .play{
    margin-top:auto;align-self:flex-start;background:var(--pink);color:#fff;font-weight:800;
    font-size:18px;padding:10px 22px;border-radius:14px;
  }
  .soon{background:transparent;border:3px dashed #2E6E6155;box-shadow:none}
  .soon:hover{transform:none;box-shadow:none}
  .soon .art{filter:grayscale(.3);opacity:.7}
  footer{text-align:center;font-size:13px;color:var(--muted)}
  @media (prefers-reduced-motion: reduce){.game,.art img,.filters a{transition:none}.filters a:hover{transform:none}.game:hover,.game:hover .art img{transform:none}}
  .brand a{color:inherit;text-decoration:none}
  .brand a:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:8px}
  .crumbs{font-size:15px;font-weight:800;color:var(--muted)}
  .crumbs a{color:var(--ink);text-decoration:none;background:var(--card);padding:6px 12px;border-radius:999px;box-shadow:0 4px 12px #2E6E6118;display:inline-block}
  .crumbs a:hover{background:#FDE2EC}
  .crumbs a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  .section-head h1{font-family:"Chewy","Comic Sans MS",cursive;font-weight:400;font-size:clamp(30px,6vw,40px);margin:0;line-height:1;color:var(--ink)}