:root{
  --bg:#0d1421; --panel:#16202f; --panel2:#101a2a; --line:#5b7089; --line2:#33455e;
  --txt:#d8e1ee; --mut:#94a9c4; --dim:#54677f;
  --amber:#e8b34c; --red:#e06060; --teal:#5bc8af;
}
*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--txt);
  font-family:ui-monospace,'Cascadia Code',Menlo,Consolas,monospace;
  font-size:16.5px; line-height:1.5; margin:0; padding:18px 16px 60px;
}
main{max-width:780px; margin:0 auto}
a{color:var(--teal); text-decoration:none}
h1{font-size:1.5rem; letter-spacing:2px; margin:.6em 0 .1em}
h1 .num{color:var(--dim)}
h2{font-size:.95rem; letter-spacing:3px; color:var(--mut); text-transform:uppercase;
   border-bottom:1px solid var(--line2); padding-bottom:4px; margin-top:1.6em}
.lede{color:var(--mut); font-style:italic; margin-top:.2em}
.topnav{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px}
.chip{display:inline-block; padding:7px 12px; background:var(--panel2); border:1px solid var(--line2);
      border-radius:6px; color:var(--mut); font-size:.85rem}
.chip:active{background:var(--panel)}
.feature,.danger,.gmnote{border-left:3px solid; padding:8px 12px; margin:10px 0; background:var(--panel2); border-radius:0 6px 6px 0}
.feature{border-color:var(--amber)} .feature b{color:var(--amber)}
.danger{border-color:var(--red)} .danger b{color:var(--red)}
.gmnote{border-color:var(--line2); color:var(--mut); font-size:.92rem}
.roll{color:var(--amber)}
.tag{display:inline-block; padding:2px 9px; border:1px solid var(--teal); color:var(--teal);
     border-radius:4px; font-size:.75rem; font-weight:bold; vertical-align:middle; background:#123b32}
.tag.red{border-color:var(--red); color:var(--red); background:#3a1820}
.btns{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin:12px 0}
.btn{display:block; padding:13px 14px; background:var(--panel); border:1px solid var(--line);
     border-radius:8px; color:var(--txt)}
.btn:active{background:#1e2c40}
.btn .k{display:block; font-size:.72rem; letter-spacing:2px; color:var(--dim); text-transform:uppercase}
.btn.npc{border-color:var(--red)} .btn.pc{border-color:var(--teal)}
ul{padding-left:1.2em} li{margin:.45em 0}
table{border-collapse:collapse; width:100%; margin:10px 0}
td,th{border:1px solid var(--line2); padding:6px 10px; text-align:left; font-size:.95rem}
th{color:var(--mut); font-weight:normal; letter-spacing:1px}
.stat{background:var(--panel2)}
.clock{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}
.clock button{flex:1 1 110px; padding:14px 6px; font:inherit; font-size:.85rem; background:var(--panel);
     color:var(--mut); border:1px solid var(--line2); border-radius:8px}
.clock button.on{background:#3a1820; color:var(--red); border-color:var(--red); font-weight:bold}
.clockfx{color:var(--mut); font-size:.92rem; min-height:3em}
.mapwrap{border:1px solid var(--line2); border-radius:8px; overflow:hidden; margin:10px 0}
.mapwrap img{display:block; width:100%; height:auto}
footer{margin-top:40px; color:var(--dim); font-size:.8rem; text-align:center}
hr{border:none; border-top:1px solid var(--line2); margin:1.5em 0}
.small{font-size:.88rem; color:var(--mut)}