/* layout + components shared by all three portals; each site's css sets the tokens */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 var(--font);min-height:100vh}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;z-index:99;background:var(--card);padding:8px 12px;border-radius:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:12px max(16px,env(safe-area-inset-left));background:var(--top-bg);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:var(--top-border)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:var(--brand-font);white-space:nowrap}
.logo{width:36px;height:36px;border-radius:var(--logo-r);background:var(--logo-bg);display:grid;place-items:center;font-size:20px;flex:none;box-shadow:var(--logo-shadow)}
.logo::after{content:var(--logo-glyph)}
.search{flex:1;max-width:560px;margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--field);border:var(--field-border);border-radius:var(--pill);padding:0 12px;height:42px}
.search svg{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;flex:none}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;color:var(--ink);height:100%}
.search input::placeholder{color:var(--muted)}
.search kbd{font:12px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:1px 6px}

.layout{display:grid;grid-template-columns:minmax(0,1fr);max-width:1480px;margin:0 auto}
main{padding:0 16px 48px;min-width:0}
.side{padding:12px 16px 0;min-width:0}
.side-h{display:none}
.chiprow{margin-top:18px}
.cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 0 8px;margin:0 -16px;padding-inline:16px;scroll-snap-type:x proximity}
.cats::-webkit-scrollbar{display:none}
.cats button{display:flex;align-items:center;gap:8px;flex:none;border:var(--chip-border);background:var(--chip);border-radius:var(--pill);padding:7px 14px 7px 8px;white-space:nowrap;scroll-snap-align:start;transition:transform .15s,background .15s}
.cats button:hover{transform:translateY(-1px)}
.cats .ci{width:26px;height:26px;border-radius:var(--chip-icon-r);display:grid;place-items:center;background:var(--chip-icon);font-size:15px}
.cats .cc{font:12px var(--mono);color:var(--muted)}
.cats button.on{background:var(--chip-on);color:var(--chip-on-ink);border-color:var(--chip-on)}
.cats button.on .cc{color:inherit;opacity:.75}

.hero{padding:20px 0 8px}
.hero h1{font:var(--h1-font);margin:0;letter-spacing:-.02em}
.tagline{margin:6px 0 0;color:var(--muted);max-width:60ch;font-size:1.05rem}
.note{margin:16px 0 0;padding:14px 16px;border-radius:var(--radius);background:var(--note-bg);border:var(--note-border);max-width:80ch}

.row-h{font:var(--h2-font);margin:22px 0 12px}
.featured-wrap{transition:opacity .2s}
.featured-wrap.dim{display:none}
.featured{display:grid;grid-auto-flow:column;grid-auto-columns:min(86vw,420px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin;margin:0 -16px;padding-inline:16px}
.feat{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;scroll-snap-align:start;background:var(--card);border:var(--card-border);box-shadow:var(--shadow)}
.feat .thumb{aspect-ratio:16/9}
.feat-meta{position:absolute;inset:auto 0 0 0;padding:44px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff}
.feat-meta h3{margin:0;font:var(--h3-font);font-size:1.25rem}
.feat-meta p{margin:4px 0 8px;font-size:.88rem;opacity:.9;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.cta{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:.85rem;padding:5px 12px;border-radius:var(--pill)}

.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 14px;padding:6px 6px 6px 14px;background:var(--bar-bg);border:var(--bar-border);border-radius:var(--pill)}
.count{font:13px var(--mono);color:var(--muted);white-space:nowrap}
.sort{margin-left:auto;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.sort button{border:0;background:none;padding:7px 13px;border-radius:var(--pill);white-space:nowrap;font-size:.92rem}
.sort button.on{background:var(--chip-on);color:var(--chip-on-ink)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr));gap:18px}
.card{display:flex;flex-direction:column;text-decoration:none;background:var(--card);border:var(--card-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.card:hover{transform:var(--hover-t);box-shadow:var(--shadow-hover)}
.thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--thumb-bg)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.card:hover .thumb img{transform:scale(1.04)}
.fallback{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,hsl(calc(var(--h) + 40) 90% 72%),transparent 60%),linear-gradient(135deg,hsl(var(--h) 75% 58%),hsl(calc(var(--h) + 60) 70% 42%))}
.fallback span{font-size:clamp(40px,8vw,64px);filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.play{position:absolute;right:10px;bottom:10px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:.82rem;padding:5px 11px;border-radius:var(--pill);opacity:0;transform:translateY(6px);transition:.18s}
.card:hover .play,.card:focus-visible .play{opacity:1;transform:none}
.badge{position:absolute;left:10px;top:10px;font-size:.75rem;font-weight:700;padding:4px 9px;border-radius:var(--pill)}
.badge.cam{background:var(--cam-bg);color:var(--cam-ink)}
.meta{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.meta h3{margin:0;font:var(--h3-font)}
.meta p{margin:0;font-size:.88rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.tags span{font-size:.72rem;padding:2px 8px;border-radius:var(--pill);background:var(--tag);color:var(--tag-ink)}
.empty{text-align:center;color:var(--muted);padding:48px 0}
.foot{text-align:center;color:var(--muted);font-size:.85rem;padding:24px 16px 40px;border-top:1px solid var(--line)}

@media (min-width:1024px){
  [data-site=games] .layout{grid-template-columns:240px minmax(0,1fr)}
  [data-site=games] .side{position:sticky;top:67px;align-self:start;height:calc(100vh - 67px);overflow-y:auto;padding:16px 8px 24px 16px}
  [data-site=games] .side-h{display:block;font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:8px 10px}
  [data-site=games] .cats{flex-direction:column;overflow:visible;margin:0;padding:0;gap:2px}
  [data-site=games] .cats button{border:0;background:none;border-radius:12px;padding:6px 10px 6px 6px}
  [data-site=games] .cats button .cc{margin-left:auto}
  [data-site=games] .cats button:hover{background:var(--chip);transform:none}
  [data-site=games] .cats button.on{background:var(--chip-on)}
  main{padding:0 28px 64px}
  .featured{grid-auto-columns:minmax(380px,1fr);margin:0;padding-inline:0}
}
@media (max-width:560px){
  .brand-name{display:none}
  .search kbd{display:none}
  .bar{flex-wrap:nowrap;padding-left:12px}
  .count{font-size:12px}
  .sort button{padding:7px 10px}
  .grid{gap:14px}
  .hero{padding-top:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}