:root { --bg:#120b08; --panel:#1f1410; --line:#6e5228; --gold:#d6b062; --text:#eadcc0; --muted:#a8977a; --red:#b3261e; --green:#4caf50; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg) radial-gradient(ellipse at top, #2a1610 0%, var(--bg) 60%); color:var(--text);
       font:16px/1.55 Georgia, "Times New Roman", serif; }
a { color:var(--gold); }
.wrap { max-width:1040px; margin:0 auto; padding:0 16px 48px; }
header.hero { position:relative; overflow:hidden; border-bottom:2px solid var(--line); background:#000; }
header.hero .art { position:absolute; inset:0; display:flex; opacity:.45; }
header.hero .art img { flex:1; min-width:0; object-fit:cover; height:100%; }
header.hero .inner { position:relative; max-width:1040px; margin:0 auto; padding:48px 16px 40px; text-align:center; }
header.hero img.logo { width:min(420px, 80vw); height:auto; filter:drop-shadow(0 4px 12px #000); }
header.hero p { margin:8px 0 0; color:var(--text); text-shadow:0 2px 6px #000; font-size:18px; }
.pill { display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:8px 18px; border:1px solid var(--line);
        border-radius:999px; background:#000a; font-weight:bold; }
.dot { width:12px; height:12px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red); }
.dot.on { background:var(--green); box-shadow:0 0 8px var(--green); }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-top:28px; }
.card { background:linear-gradient(#24170f, #180f0b); border:1px solid var(--line); border-radius:6px; padding:18px 20px;
        box-shadow:inset 0 0 0 1px #000, 0 6px 18px #0008; }
.card h3 { margin:0 0 6px; font-size:15px; letter-spacing:.04em; font-weight:normal; color:var(--muted); }
.card .big { font-size:30px; color:var(--gold); }
.card .sub { color:var(--muted); font-size:14px; }
section { margin-top:36px; }
section h2 { color:var(--gold); border-bottom:1px solid var(--line); padding-bottom:6px; font-weight:normal; letter-spacing:.04em; }
.download { display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.btn { display:inline-block; padding:14px 30px; border:1px solid var(--gold); border-radius:4px; color:#fff3d6;
       background:linear-gradient(#7a2c1c, #43140c); text-decoration:none; font-size:20px; box-shadow:0 4px 14px #000a; }
.btn:hover { background:linear-gradient(#9a3a24, #5a1a10); }
.btn.off { opacity:.5; pointer-events:none; }
code, .mono { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:13px; word-break:break-all; color:var(--muted); }
ol li, ul li { margin:6px 0; }
.two { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:24px; }
.note { border-left:3px solid var(--gold); padding:8px 14px; background:#0006; color:var(--muted); }
footer { margin-top:48px; color:var(--muted); font-size:13px; text-align:center; }
form.reg { display:grid; gap:14px; max-width:420px; }
form.reg label { display:grid; gap:4px; color:var(--muted); font-size:15px; }
form.reg input { font:inherit; color:var(--text); background:#0d0806; border:1px solid var(--line); border-radius:4px; padding:10px 12px; }
form.reg input:focus { outline:1px solid var(--gold); }
form.reg button { font:inherit; font-size:18px; cursor:pointer; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.msg { padding:12px 16px; border:1px solid var(--line); border-radius:4px; background:#0008; }
.msg.ok { border-color:var(--green); }
.msg.err { border-color:var(--red); }
header.small .inner { padding:24px 16px 20px; }
header.small img.logo { width:min(260px, 60vw); }
.tabs { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.tabs a { padding:8px 14px; border:1px solid var(--line); border-radius:4px; text-decoration:none; background:#0006; }
.tabs a.on { background:linear-gradient(#7a2c1c, #43140c); color:#fff3d6; border-color:var(--gold); }
form.search { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0; }
form.search input { font:inherit; color:var(--text); background:#0d0806; border:1px solid var(--line); border-radius:4px; padding:8px 10px; min-width:260px; flex:1; max-width:420px; }
.btn.small { padding:8px 16px; font-size:16px; cursor:pointer; font-family:inherit; }
.sub { color:var(--muted); font-size:14px; }
.monsters { display:grid; grid-template-columns:minmax(260px, 440px) minmax(0, 1fr); gap:24px; align-items:start; }
@media (max-width: 900px) { .monsters { grid-template-columns:1fr; } }
.map { position:sticky; top:12px; }
.map svg { width:100%; height:auto; border:1px solid var(--line); border-radius:4px; background:#000; display:block; }
.map rect { stroke-width:3; }
.map rect.dim { fill-opacity:.25; stroke-opacity:.35; }
.map rect.sel { fill:rgba(255, 40, 30, .55); stroke:#ff4030; stroke-width:6; }
.map a:hover rect { stroke:#fff; }
.list { overflow-x:auto; }
table.mtable { width:100%; border-collapse:collapse; font-size:14px; }
table.mtable th { text-align:left; color:var(--muted); font-weight:normal; border-bottom:1px solid var(--line); padding:6px 8px; position:sticky; top:0; background:var(--bg); }
table.mtable td { border-bottom:1px solid #3a2a1a; padding:6px 8px; vertical-align:top; }
table.mtable td:last-child { min-width:170px; }
table.mtable tr.sel td { background:#4a1a10; }
.pct { color:var(--gold); }
article.bug { border:1px solid var(--line); border-radius:6px; background:linear-gradient(#24170f, #180f0b); padding:14px 18px; margin:14px 0; }
article.bug header { display:flex; flex-wrap:wrap; gap:12px; align-items:center; font-size:14px; color:var(--muted); }
article.bug .text { margin:10px 0; white-space:normal; overflow-wrap:anywhere; }
article.bug .answer { margin:8px 0; padding:8px 12px; border-left:3px solid var(--gold); background:#0006; }
article.bug .meta { margin:6px 0 0; font-size:13px; color:var(--muted); }
.state { padding:2px 10px; border-radius:999px; border:1px solid var(--line); color:var(--text); }
.state.open { border-color:#c9a227; } .state.investigating { border-color:#4a90d9; }
.state.fixed { border-color:var(--green); } .state.not-a-bug, .state.duplicate { border-color:#888; }
code { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.9em; }
article.bug header a { color:var(--gold); }
article.bug img.shot { display:block; max-width:min(480px, 100%); margin-top:10px; border:1px solid var(--line); border-radius:4px; }
