@font-face { font-family:'Monocraft'; src:url('/assets/fonts/Monocraft.woff2') format('woff2'); font-weight:400; font-display:swap; }
:root {
  --bg:#1b1712; --bg-2:#26201a; --panel:#2a241c; --panel-2:#332c22;
  --line:rgba(255,240,210,0.10); --line-2:rgba(255,240,210,0.24);
  --text:#f8f1e4; --muted:#c6bda8;
  --lime:#a7e05a; --teal:#2fbfa0; --orange:#f16436;
  --pixel:'Monocraft', ui-monospace, monospace;
  --body:'Inter', system-ui, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:var(--body); color:var(--text); line-height:1.6; min-height:100vh;
  background:
    radial-gradient(50% 40% at 12% 0%, rgba(167,224,90,0.10), transparent 60%),
    radial-gradient(45% 40% at 90% 6%, rgba(47,191,160,0.10), transparent 60%),
    radial-gradient(60% 45% at 82% 100%, rgba(241,100,54,0.12), transparent 62%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  background-color:var(--bg); background-attachment:fixed; -webkit-font-smoothing:antialiased;
}
a { color:var(--lime); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
kbd, code { font-family:var(--pixel); font-size:.85em; background:var(--panel-2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--text); }
.wrap { max-width:1180px; margin:0 auto; padding:16px clamp(16px,4vw,40px) 40px; }

.top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.home { font-family:var(--pixel); font-size:13px; color:var(--muted); text-decoration:none; }
.home:hover { color:var(--text); }
select, input { font:inherit; color:var(--text); background:rgba(0,0,0,0.34); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
select:hover, input:hover { border-color:var(--line-2); }
select:focus-visible, input:focus-visible, a:focus-visible, button:focus-visible, .card:focus-visible { outline:2px solid var(--lime); outline-offset:2px; }
#langSel { font-family:var(--pixel); font-size:12px; color:var(--muted); }

.hero { text-align:center; margin:clamp(24px,5vw,48px) 0 28px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; font-family:var(--pixel); font-size:13px; color:var(--muted); }
.eyebrow .dot { width:8px; height:8px; background:var(--lime); box-shadow:0 0 10px var(--lime); }
.h1 { font-family:var(--pixel); font-weight:400; font-size:clamp(26px,5vw,42px); margin:10px 0 12px; }
.h1 .em { color:var(--orange); }
.prose { max-width:64ch; margin:0 auto; color:#d9d0ba; font-size:16px; }

.tools { display:flex; flex-wrap:wrap; gap:12px; align-items:end; padding:14px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.tools label { display:flex; flex-direction:column; gap:4px; font-family:var(--pixel); font-size:11px; color:var(--muted); }
.tools .search { flex:1 1 240px; }
.tools input, .tools select { font-family:var(--body); font-size:14px; }
#fPlayers { width:90px; }
.count { font-family:var(--pixel); font-size:12px; color:var(--muted); margin:14px 2px 10px; }

.grid { list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.card { display:block; width:100%; text-align:left; cursor:pointer; color:inherit; font:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  transition:transform .18s, border-color .18s, box-shadow .18s; }
.card:hover { transform:translateY(-3px); border-color:var(--line-2); box-shadow:0 18px 30px -22px #000; }
.thumb { aspect-ratio:16/9; background:var(--panel-2); position:relative; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ph { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--pixel); font-size:28px; color:var(--muted);
  background:repeating-conic-gradient(#2f281f 0 25%, #362e24 0 50%) 0 0/24px 24px; }
.cbody { padding:12px 14px 14px; }
.cname { font-family:var(--pixel); font-size:15px; line-height:1.3; }
.cby { font-size:13px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meta { display:flex; gap:14px; margin-top:8px; font-family:var(--pixel); font-size:11px; color:var(--muted); }
.meta b { color:var(--lime); font-weight:400; }
.empty { grid-column:1/-1; text-align:center; color:var(--muted); padding:40px 0; }

dialog { margin:auto; width:min(860px,calc(100% - 24px)); max-height:calc(100% - 24px); background:var(--panel); color:var(--text);
  border:1px solid var(--line-2); border-radius:14px; padding:0; overflow:auto; }
dialog::backdrop { background:rgba(10,8,6,0.72); backdrop-filter:blur(3px); }
.close { position:absolute; right:10px; top:10px; width:36px; height:36px; border-radius:8px; border:1px solid var(--line-2);
  background:rgba(0,0,0,0.5); color:var(--text); font-size:20px; cursor:pointer; z-index:1; }
.dimg { aspect-ratio:16/9; background:var(--panel-2); position:relative; }
.dimg img { width:100%; height:100%; object-fit:cover; display:block; }
.dbody { padding:18px 20px 22px; }
.dbody h2 { font-family:var(--pixel); font-weight:400; font-size:22px; }
.by { color:var(--muted); }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:14px 0; }
.facts div { background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.facts dt { font-family:var(--pixel); font-size:10px; color:var(--muted); }
.facts dd { font-size:14px; }
.desc { color:#d9d0ba; overflow-wrap:anywhere; margin-bottom:16px; }
.btn { display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-family:var(--pixel); font-size:14px; padding:12px 20px; border-radius:10px; transition:transform .18s, filter .18s; }
.btn:hover { transform:translateY(-2px); filter:brightness(1.1); }
.btn-orange { background:var(--orange); color:#fff; box-shadow:0 12px 26px -16px var(--orange); }
.hint { margin-top:12px; font-size:14px; color:var(--muted); }

.foot { border-top:1px solid var(--line); margin-top:56px; padding-top:20px; font-size:13px; color:var(--muted); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.foot a { color:var(--muted); text-decoration:none; } .foot a:hover { color:var(--text); }

@media (max-width:560px) {
  .tools label:not(.search) { flex:1 1 calc(33% - 8px); }
  #fPlayers { width:100%; }
  .grid { grid-template-columns:1fr 1fr; gap:10px; }
  .cname { font-size:13px; } .meta { flex-wrap:wrap; gap:4px 10px; }
}