:root{--bg:#0d0b08;--fg:#d9cfc0;--red:#c8402f;--gold:#e0b64a;--dim:#8a7658;--card:#17120a;--line:#2a2216}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.65 "Trebuchet MS",Verdana,system-ui,sans-serif;
  background-image:radial-gradient(circle at 50% -10%,rgba(200,64,47,.16),transparent 55%),
    radial-gradient(circle at 90% 110%,rgba(224,182,74,.08),transparent 45%)}
a{color:var(--gold)}
.wrap{max-width:980px;margin:0 auto;padding:44px 20px}
.title{font-size:46px;margin:0;color:var(--red);letter-spacing:2px;font-weight:900;
  text-shadow:0 0 20px rgba(200,64,47,.5),2px 2px 0 #000}
.sub{color:var(--gold);margin:6px 0 28px;letter-spacing:1px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.g{display:block;text-decoration:none;color:var(--fg);background:var(--card);
  border:1px solid var(--line);border-top:3px solid var(--red);border-radius:8px;
  padding:18px 16px;transition:.15s}
.g:hover{border-top-color:var(--gold);box-shadow:0 0 22px rgba(224,182,74,.22);transform:translateY(-3px)}
.g b{color:var(--gold);font-size:20px;display:block;text-transform:capitalize}
.g span{color:var(--dim);font-size:12px;display:block;margin-top:6px}
.empty{color:var(--dim);padding:56px 0;text-align:center;font-size:16px}
.foot{color:var(--dim);margin-top:38px;font-size:13px;border-top:1px solid var(--line);padding-top:14px}
.foot a{color:var(--dim)}.foot a:hover{color:var(--gold)}