@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700&family=Source+Sans+3:wght@400;600&display=swap');
:root{--bg:#191919;--panel:#262626;--panel2:#1f3d4a;--line:#2d5262;--text:#e8efe9;--muted:#9db5b9;--accent:#f2b84b;--good:#7fd1a0;--bad:#ef7d6a;--r:10px;
--head:'Bricolage Grotesque','Trebuchet MS',sans-serif;--body:'Source Sans 3','Segoe UI',Helvetica,Arial,sans-serif;--nav:64px}
*{box-sizing:border-box}
html{scroll-padding-top:var(--nav)}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.6 var(--body)}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--head);line-height:1.15;margin:0}
/* navbar */
.navbar{position:sticky;top:0;z-index:50;height:var(--nav);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 clamp(.75rem,3vw,2rem);background:var(--panel);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);font:700 1.3rem var(--head)}
.navbar input,.navsearch input{width:min(320px,48vw);padding:.5rem .9rem;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
/* home */
main{max-width:1280px;margin:0 auto;padding:1.5rem clamp(.75rem,3vw,2rem) 4rem}
.intro{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.5rem;margin-bottom:1.5rem}
.intro p{margin:0 0 1rem;max-width:1000ch;font-size:1.1rem}
.tabs{display:flex;flex-wrap:wrap;gap:.35rem}
.tabs button{font:600 .9rem var(--body);color:var(--muted);background:none;border:1px solid transparent;border-radius:6px;padding:.35rem .8rem;cursor:pointer}
.tabs button:hover{color:var(--text)}
.tabs button.on{color:var(--bg);background:var(--accent)}
.tabs button.filters{margin-left:auto;border-color:var(--line)}
.tabs button.filters.on{background:var(--panel2);color:var(--accent);border-color:var(--accent)}
.filter-panel{margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--line)}
.filter-panel small{display:block;color:var(--muted);margin-bottom:.6rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{display:inline-block;font-size:.82rem;padding:.1rem .6rem;border-radius:999px;background:var(--panel2);color:var(--text);border:1px solid var(--line)}
button.chip{cursor:pointer;font-family:inherit}
button.chip.inc{border-color:var(--good);color:var(--good)}
button.chip.inc::before{content:"+ "}
button.chip.exc{border-color:var(--bad);color:var(--bad);text-decoration:line-through}
button.chip.exc::before{content:"− ";text-decoration:none;display:inline-block}
.fsec{margin-bottom:1rem}
.fsec h3{font-size:.95rem;color:var(--muted);margin-bottom:.4rem}
.checks{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.filter-actions{display:flex;gap:1rem;align-items:center;margin-top:.9rem;font-size:.9rem}
.filter-actions button{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;text-decoration:underline}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.25rem}
.card{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--text)}
.card:hover{border-color:var(--accent)}
.thumb{position:relative;aspect-ratio:16/10;background:var(--panel2) center/cover no-repeat}
.thumb.none::after{content:"No image";position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}
.played{position:absolute;top:.5rem;right:.5rem;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--good);color:var(--bg);display:grid;place-items:center;font-weight:700;font-size:.95rem}
.card .body{padding:.8rem 1rem 1rem;display:flex;flex-direction:column;gap:.5rem}
.card h3{font-size:1.15rem}
.card .sum{color:var(--muted);font-size:.9rem;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{font-size:.88rem}
.meta span{color:var(--muted);margin-right:.35rem}
.meta span.boxed{border:1px solid var(--line);border-radius:4px;padding:0 .4rem;font-size:.8rem}
.meta.split{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.meta span.engine{background:#c0392b;color:#fff;font-weight:600;font-size:.8rem;padding:.05rem .55rem;border-radius:4px;margin:0}
.flags{display:inline-flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.flags img{display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.flag{position:absolute;top:.5rem;left:.5rem;background:var(--accent);color:var(--bg);font:600 1.1rem var(--body);padding:.1rem .55rem;border-radius:999px}
.flag.score{background:var(--good);font-weight:700;letter-spacing:.02em}
.empty{text-align:center;color:var(--muted);padding:3rem 0}
/* ratings */
.bar{display:inline-flex;gap:3px;vertical-align:middle}
.bar i{width:16px;height:8px;border-radius:2px;background:var(--line)}
.bar i.f{background:var(--accent)}
.ring{vertical-align:middle}
.ring circle{fill:none;stroke:var(--line);stroke-width:5}
.ring circle.f{stroke:var(--accent)}
.rate{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font-size:.9rem;color:var(--muted)}
.rate span{display:inline-flex;align-items:center;gap:.5rem}
/* game page */
.game .top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;margin-bottom:1.25rem}
.game h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.orig{color:var(--muted);font-size:1.1rem}
.layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:2rem}
@media(max-width:820px){.layout{grid-template-columns:1fr}}
.stage{aspect-ratio:16/10;background:var(--panel) center/contain no-repeat;border:1px solid var(--line);border-radius:var(--r)}
.strip{display:flex;gap:.5rem;margin-top:.6rem}
.strip button{width:80px;aspect-ratio:16/10;border:2px solid var(--line);border-radius:6px;background:var(--panel) center/cover;cursor:pointer;padding:0}
.strip button.on{border-color:var(--accent)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.25rem;margin-bottom:1rem}
.panel h2{font-size:1.05rem;margin-bottom:.5rem}
.panel p{margin:.3rem 0;white-space:pre-line}
dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1rem;margin:0}
dt{color:var(--muted)}dd{margin:0}
.links{display:flex;flex-wrap:wrap;gap:.5rem}
.btn{display:inline-block;padding:.45rem 1rem;border-radius:6px;background:var(--accent);color:var(--bg);font-weight:600;text-decoration:none}
.btn.alt{background:none;color:var(--accent);border:1px solid var(--accent)}
.check{display:flex;align-items:center;gap:.6rem;font-weight:600;cursor:pointer}
.check input{width:1.2rem;height:1.2rem;accent-color:var(--good)}
.back{display:inline-block;margin-bottom:1rem}
@media(prefers-reduced-motion:no-preference){.card{transition:border-color .15s}}