/* NWN Revival - the Bladekeep look (harness/bladekeep.py): EGA colours, gold
   bars, green and red gems, a black screen. Fonts are system ones only: no
   third-party requests from a visitor's browser. */
:root { --gold:#f3e38f; --gold-dk:#b9a24a; --green:#00ff00; --text:#ffff85;
        --link:#00ffff; --hot:#ff00ff; --bg:#000; --dim:#8a8a5a; --red:#ff4040; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text);
       font:11pt/1.55 Arial, Helvetica, sans-serif; }
a { color:var(--link); text-decoration:none; }
a:hover, a:focus { color:var(--hot); text-decoration:underline; }
.skip { position:absolute; left:-999px; }
.skip:focus { left:8px; top:8px; background:#000; padding:4px 8px; z-index:9; }

.bar-h { height:16px; background:linear-gradient(var(--gold) 0 30%, #fff6c0 45%, var(--gold) 60%, var(--gold-dk)); }
.bar-v { width:16px; background:linear-gradient(90deg, var(--gold-dk), var(--gold) 35%, #fff6c0 50%, var(--gold) 65%, var(--gold-dk)); }
.cg { width:16px; height:16px; background:radial-gradient(circle at 40% 40%, #7dff7d, #00a000 70%, #004000); }
.cr { width:16px; height:16px; background:radial-gradient(circle at 40% 40%, #ff8a8a, #c00000 70%, #400000); }
.frame { display:grid; grid-template-columns:16px 1fr 16px; }

header .logo { text-align:center; padding:12px 8px 10px; }
.logo .word { font:bold clamp(24px, 4.6vw, 44px)/1.1 "Courier New", Courier, monospace; letter-spacing:.1em;
  background:linear-gradient(#ffffff, #b0b0c8 45%, #6a6a88 50%, #c8c8e0);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(2px 2px 0 #00a0a0) drop-shadow(2px 2px 0 #a00000); padding:0 6px; }
.logo .sub { font:bold 12px "Courier New", Courier, monospace; letter-spacing:4px;
  color:#8080ff; margin-top:8px; }

.wrap { display:flex; gap:14px; align-items:flex-start; padding:12px 10px; max-width:1100px; margin:0 auto; }
nav { width:164px; flex:none; display:grid; grid-template-columns:16px 1fr 16px; position:sticky; top:8px; }
nav .inner { padding:10px 8px; font:11pt "Courier New", Courier, monospace; color:var(--green); }
nav p { margin:0 0 14px; }
nav a { color:var(--green); }
nav a:hover, nav a:focus, nav a.on { color:var(--hot); }

main { flex:1; min-width:0; }
section { margin:0 0 30px; scroll-margin-top:10px; }
.titles { border:1px solid #fff; text-align:center; color:var(--green);
  font:16pt "Courier New", Courier, monospace; letter-spacing:2px; padding:3px; margin-bottom:12px; }
h2 { color:var(--green); font:bold 11pt Arial; margin:20px 0 6px; }
p { margin:0 0 10px; max-width:72ch; }
ul { margin:0 0 10px; padding-left:20px; max-width:72ch; }
li { margin:2px 0; }
.dim { color:var(--dim); }
.lead { font-size:12.5pt; color:#fff6c0; }

.cards { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.card { border:1px solid var(--gold-dk); padding:8px 12px; min-width:170px; flex:1 1 170px; }
.card b { display:block; color:var(--green); font-size:9pt; text-transform:uppercase; letter-spacing:1px; }
.card span { font-size:13pt; }

.screen { border:2px solid var(--gold-dk); background:#050505; padding:18px 16px; margin:12px 0;
  font:11pt/1.5 "Courier New", Courier, monospace; color:var(--green); max-width:72ch; }
.screen .big { color:var(--hot); font-size:14pt; letter-spacing:2px; }
.screen .cursor { display:inline-block; width:9px; height:1em; background:var(--green);
  vertical-align:text-bottom; animation:blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .screen .cursor { animation:none; } html { scroll-behavior:auto; } }

form { max-width:640px; }
label { display:block; color:var(--green); font-weight:bold; font-size:10pt; margin:12px 0 3px; }
input, select, textarea { width:100%; background:#0a0a0a; color:var(--text); border:1px solid var(--gold-dk);
  font:11pt Arial; padding:6px 8px; }
textarea { min-height:150px; resize:vertical; font-family:Arial, Helvetica, sans-serif; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--hot); outline-offset:1px; }
button { background:#101000; color:var(--link); border:1px solid var(--gold-dk); padding:7px 18px;
  font:bold 11pt Arial; cursor:pointer; margin-top:14px; }
button:hover, button:focus { color:var(--hot); border-color:var(--hot); }
button[disabled] { color:var(--dim); cursor:wait; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.flash { border:1px solid var(--green); padding:8px 12px; margin:0 0 14px; color:var(--green); max-width:640px; }
.flash.err { border-color:var(--red); color:var(--red); }
.fine { font-size:9pt; color:var(--dim); max-width:640px; }

.copy { font:9pt "Courier New", Courier, monospace; color:var(--hot); text-align:center;
  margin:16px 10px 30px; }
.copy span { display:block; color:var(--dim); margin-top:6px; }

@media (max-width:760px) {
  .wrap { flex-direction:column; }
  nav { width:100%; position:static; }
  nav .inner { display:flex; flex-wrap:wrap; gap:6px 18px; }
  nav p { margin:0; }
  nav br { display:none; }
  .titles { font-size:13pt; }
}

/* technical page */
table.grid { border-collapse:collapse; width:100%; margin:8px 0 16px; font-size:10pt; }
table.grid td { overflow-wrap:anywhere; }
.grid th { color:var(--green); text-align:left; border-bottom:1px solid var(--gold-dk); padding:5px 8px; }
.grid td { border-bottom:1px solid #222; padding:5px 8px; vertical-align:top; }
.grid tr:hover td { background:#0b0b04; }
.grid td:first-child { min-width:150px; }
.tag { display:inline-block; font:bold 8pt "Courier New", Courier, monospace; letter-spacing:1px; padding:1px 6px;
  border:1px solid; white-space:nowrap; }
.t-live { color:var(--green); } .t-read { color:var(--link); } .t-new { color:var(--hot); }
.t-add { color:var(--gold); } .t-gap { color:var(--red); }
.toc { border:1px solid var(--gold-dk); padding:8px 14px; margin:10px 0 16px; max-width:72ch; }
.toc a { display:inline-block; margin-right:14px; }
.help { border:1px solid var(--hot); padding:8px 14px; margin:14px 0; max-width:72ch; }
code { font:10pt "Courier New", Courier, monospace; color:#d8d8a8; }
@media (max-width:760px) { .grid { display:block; overflow-x:auto; } }