/* Dark-first games directory. Tokens on :root; light theme for people who ask for it. */
:root{--bg:#0d0e14;--bg2:#13141c;--card:#181a24;--card2:#1f2130;--ink:#f1f2f7;--muted:#9a9db2;--line:#262838;
--accent:#9b8cff;--play:#3ee6a0;--play-ink:#06140e;--up:#3ee6a0;--down:#ff7a66;--gold:#ffd15c;--shadow:0 10px 30px rgba(0,0,0,.35);
--display:"Bricolage Grotesque",system-ui,sans-serif;--body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#f5f5fa;--bg2:#ececf4;--card:#fff;--card2:#f3f3f9;--ink:#15151d;--muted:#5f6275;--line:#e2e2ec;
--accent:#5b4ff0;--play:#12b57a;--play-ink:#fff;--up:#0c8f5f;--down:#c8402b;--gold:#b88300;--shadow:0 8px 24px rgba(20,20,40,.08);color-scheme:light}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,.logo{font-family:var(--display);letter-spacing:-.02em}
h1{font-size:clamp(30px,5vw,52px);line-height:1.02;font-weight:800;margin:6px 0 12px}
h2{font-size:22px;font-weight:800;margin:40px 0 14px}
.lede{color:var(--muted);font-size:17px;max-width:680px;margin:0 0 6px}
.kicker{margin:0;color:var(--play);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.muted{color:var(--muted)}.small{font-size:13px}

/* header */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar{max-width:1240px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:21px;color:var(--ink)}.logo:hover{text-decoration:none}
.mark{width:28px;height:28px;flex:none;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--accent) 45%,transparent))}
.top nav{display:flex;gap:16px}.top nav a{color:var(--muted);font-weight:600;font-size:14px}.top nav a:hover{color:var(--ink);text-decoration:none}
.search{margin-left:auto;position:relative;width:min(340px,100%)}
.search input{width:100%;background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:11px;padding:9px 12px;font:inherit;outline:none}
.search input:focus{border-color:var(--accent)}
.qr{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;max-height:420px;overflow-y:auto}
.qr a{display:flex;align-items:center;gap:10px;padding:8px 12px;color:var(--ink)}.qr a:hover,.qr a.sel{background:var(--card2);text-decoration:none}
.qr img,.qr .noic{width:30px;height:30px;border-radius:8px;background:var(--card2)}.qr small{color:var(--muted);margin-left:auto;white-space:nowrap}
.qr p{margin:0;padding:12px;color:var(--muted)}

main{max-width:1240px;margin:0 auto;padding:18px 16px 56px}
.crumbs{font-size:13px;color:var(--muted);margin:4px 0 6px}.crumbs a{color:var(--muted)}

/* hub hero + ecosystem stats */
.hero{padding:22px 0 8px}
.eco{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:10px;margin:22px 0 6px}
.eco div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.eco b{display:block;font:800 28px/1.1 var(--display)}.eco span{color:var(--muted);font-size:13px}
.sec{display:flex;align-items:baseline;justify-content:space-between;margin:40px 0 14px}.sec h2{margin:0}.sec a{font-weight:600;font-size:14px}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.chips a{white-space:nowrap;flex:none;padding:7px 13px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--muted);font-weight:600;font-size:13px}
.chips a:hover{color:var(--ink);text-decoration:none;border-color:var(--muted)}.chips a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* tiles */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.tile{display:block;color:var(--ink);border-radius:16px;background:var(--card);border:1px solid var(--line);overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .15s}
.tile:hover{text-decoration:none;transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 60%,var(--line));box-shadow:var(--shadow)}
.media{position:relative}
.art{aspect-ratio:16/9;overflow:hidden;background:var(--card2);position:relative}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.iconart::before{content:"";position:absolute;inset:-20%;background:var(--i) center/cover;filter:blur(26px) saturate(1.5) brightness(.75);transform:scale(1.2)}
.iconart img{position:relative;width:38%;height:auto;aspect-ratio:1;margin:auto;top:50%;transform:translateY(-50%);border-radius:22%;box-shadow:0 8px 24px rgba(0,0,0,.45);object-fit:cover}
.iconart.blank{display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--play))}.iconart.blank span{font:800 44px var(--display);color:#fff}
.rank{position:absolute;top:9px;left:9px;background:rgba(0,0,0,.62);color:#fff;font:800 13px var(--display);padding:3px 8px;border-radius:8px;backdrop-filter:blur(6px)}
.shelf{position:absolute;top:9px;right:9px;background:var(--gold);color:#1d1600;font-size:11px;font-weight:700;padding:3px 7px;border-radius:7px}
.pills{position:absolute;left:9px;bottom:9px;display:flex;gap:6px}
.pill{background:rgba(0,0,0,.66);color:#fff;font-size:12px;font-weight:600;padding:3px 8px;border-radius:7px;backdrop-filter:blur(6px)}
.tb{display:flex;gap:10px;align-items:center;padding:11px 12px 13px}
.ic{width:32px;height:32px;border-radius:9px;flex:none}
.tb h3{margin:0;font-size:15.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.tb>div{min-width:0}.meta{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.up{color:var(--up);font-weight:700}.down{color:var(--down);font-weight:700}

/* genre + player grid */
.genres{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.genres a{padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px;color:var(--ink);display:flex;flex-direction:column;gap:2px}
.genres a:hover{border-color:var(--accent);text-decoration:none}.genres b{font-family:var(--display);font-size:17px}.genres span{font-size:13px;color:var(--muted)}

/* table */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--card);margin-top:14px}
.t{width:100%;border-collapse:collapse;font-size:14.5px}
.t th,.t td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.t th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);position:sticky;top:0;background:var(--card);user-select:none}
.sortable th{cursor:pointer}.sortable th:hover{color:var(--ink)}.t th[aria-sort]::after{content:" ↓";color:var(--accent)}.t th[aria-sort=ascending]::after{content:" ↑"}
.t tr:last-child td{border-bottom:0}.t tbody tr:hover{background:var(--card2)}
.t .n{text-align:right;font-variant-numeric:tabular-nums}.t td.n:first-child{color:var(--muted);width:44px}
.row{display:flex;align-items:center;gap:12px;color:var(--ink)}.row:hover{text-decoration:none}.row:hover b{color:var(--accent)}
.row img,.row .noic{width:36px;height:36px;border-radius:10px;flex:none;background:var(--card2)}
.row span{display:flex;flex-direction:column;min-width:0}.row small{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:380px}

/* activity page */
.actHero{position:relative;margin:4px -16px 0;padding:44px 16px 34px;overflow:hidden;border-radius:0 0 22px 22px}
.actHero::before{content:"";position:absolute;inset:-30%;background:var(--hero) center/cover;filter:blur(60px) saturate(1.6) brightness(.55);opacity:.9}
.actHero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--bg))}
.actHero .inner{position:relative;z-index:1;display:flex;gap:22px;align-items:flex-end;max-width:1240px}
.big{border-radius:24px;flex:none;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.ah h1{margin:0 0 8px;color:#fff}.actHero .lede{color:rgba(255,255,255,.82)}
.cta{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;padding:10px 16px;border-radius:12px;font-weight:700}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn.play{background:var(--play);color:var(--play-ink);font-size:16px;padding:12px 22px;box-shadow:0 8px 26px color-mix(in srgb,var(--play) 40%,transparent)}
.btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18)}
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 4px}
.st{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;position:relative}
.st b{display:block;font:800 34px/1.05 var(--display)}.st>span{color:var(--muted);font-size:13px}.st b span{font:inherit}
.st .badge{position:absolute;top:14px;right:14px;background:var(--gold);color:#1d1600;font:800 12px var(--display);padding:3px 8px;border-radius:7px}
.two{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:30px;margin-top:10px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:4px 18px 16px;margin-top:20px}.panel h2{margin:16px 0 10px}
aside{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;align-self:start;position:sticky;top:80px;margin-top:20px}
.art.side{border-radius:12px;margin-bottom:14px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;margin:0;font-size:14px}.facts dt{color:var(--muted)}.facts dd{margin:0;font-weight:500}
.claim{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--accent) 14%,transparent);font-size:13px}
.tag{display:inline-block;font-size:12px;padding:3px 10px;border-radius:99px;background:var(--card2);color:var(--muted);margin:0 6px 6px 0;border:1px solid var(--line)}
.chart{width:100%;display:block}
.chart .line{fill:none;stroke:var(--play);stroke-width:2.5}.chart .area{fill:color-mix(in srgb,var(--play) 16%,transparent)}
.chart circle{fill:var(--play)}.chart text{fill:var(--muted);font-size:11px}
.how li{margin-bottom:6px}

/* data page */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:18px 0}
.stats div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}.stats b{display:block;font:800 28px var(--display)}.stats span{color:var(--muted);font-size:13px}

footer{border-top:1px solid var(--line);background:var(--bg2);color:var(--muted);font-size:14px;padding:40px 16px 28px}
.fcols{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
.fcols h4{margin:0 0 10px;color:var(--ink);font:700 13px var(--body);text-transform:uppercase;letter-spacing:.06em}
.fcols a{display:block;color:var(--muted);padding:3px 0}.fcols a:hover{color:var(--ink);text-decoration:none}
.fbrand p{margin:10px 0 0;max-width:280px}.fbrand .logo{color:var(--ink)}
.fine{max-width:1240px;margin:28px auto 0;padding-top:18px;border-top:1px solid var(--line);font-size:12px}
@media (max-width:700px){.fcols{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}}

@media (max-width:900px){.two{grid-template-columns:1fr}aside{position:static}.top nav{display:none}}
@media (max-width:600px){.bar{gap:12px}.search{width:auto;flex:1}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tb{padding:9px 10px 11px}.tb h3{font-size:14px;max-width:110px}.ic{width:26px;height:26px}.pills .pill+.pill{display:none}
.statrow{grid-template-columns:1fr 1fr}.statrow .st:last-child{grid-column:span 2}.st b{font-size:26px}
.actHero .inner{flex-direction:column;align-items:flex-start}.big{width:72px;height:72px}
.t th,.t td{padding:8px 8px;font-size:13.5px}.t td:nth-child(3),.t th:nth-child(3),.t td:nth-child(4),.t th:nth-child(4){display:none}.row small{max-width:150px}}

/* home filters: genre + players as wrapping chip clouds */
.filters{display:grid;gap:4px;margin:22px 0 0}
.filters>div{display:flex;align-items:baseline;gap:14px}
.filters .chips{margin:6px 0}
.flabel{flex:none;width:64px;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
@media (max-width:600px){.filters>div{flex-direction:column;gap:0}}

/* votes + claim */
.btn.vote{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);cursor:pointer;font:inherit;font-weight:700}
.btn.vote b:empty{display:none}.btn.vote b{background:rgba(255,255,255,.16);padding:1px 8px;border-radius:7px;font-size:13px}
.btn.vote.voted{background:color-mix(in srgb,var(--accent) 45%,transparent);border-color:var(--accent)}
.vnote{margin:8px 0 0;font-size:13px;color:#fff;opacity:.85}
.claimf{display:grid;gap:14px;max-width:560px;margin-top:18px}
.claimf label{display:grid;gap:6px;font-weight:600;font-size:14px}.claimf small{font-weight:400;color:var(--muted)}
.claimf input,.claimf textarea{background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:10px 12px;font:inherit}
.claimf input:focus,.claimf textarea:focus{outline:none;border-color:var(--accent)}
.claimf .btn{justify-self:start;border:0;cursor:pointer;font:inherit;font-weight:700}
.hp{position:absolute;left:-9999px}.formmsg{margin:0;color:var(--play)}

/* rendered Discord Markdown in game descriptions */
.md{max-width:760px}.md p{margin:0 0 12px}.md h3{font-size:18px;margin:22px 0 8px}.md h4{font-size:16px;margin:18px 0 6px}
.md ul,.md ol{margin:0 0 14px;padding-left:22px}.md li{margin:3px 0}
.md blockquote{margin:0 0 10px;padding:4px 0 4px 12px;border-left:3px solid var(--line);color:var(--muted)}
.md code{background:var(--card2);padding:1px 6px;border-radius:6px;font-size:.92em}
.md .sub{font-size:13px;color:var(--muted)}.md .spoiler{background:var(--ink);color:var(--ink);border-radius:4px;cursor:pointer}.md .spoiler:hover{color:var(--bg)}
.md a{word-break:break-word}
.md hr{border:0;border-top:1px solid var(--line);margin:18px 0}