/*
 * The website's look (web/templates/website/nf_base.html and every page that extends it): the
 * front page, log in and sign up, password resets, My account and the guide.
 */
:root {
  --bg: #07060d;
  --bg-2: #0e0c19;
  --panel: rgba(20, 17, 36, 0.78);
  --line: rgba(120, 110, 200, 0.22);
  --text: #e9e6ff;
  --text-2: #a9a3cc;
  --text-3: #6f6a92;
  --cyan: #5ee7ff;
  --pink: #ff4fb3;
  --amber: #ffc857;
  --green: #6dffa8;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(94, 231, 255, 0.12), transparent 60%),
    radial-gradient(900px 500px at 95% 10%, rgba(255, 79, 179, 0.14), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
  background-color: var(--bg);
  color: var(--text);
  font: 17px/1.6 "Rajdhani", system-ui, sans-serif;
  min-height: 100vh;
}
/* Faint scanlines over everything, for the CRT feel. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
}
a { color: var(--cyan); }
a:hover { color: #fff; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* ---------------------------------------------------------- top bar */
.top { display: flex; align-items: center; gap: 16px; padding: 14px 0; font-weight: 600; }
.top .brand { letter-spacing: 0.18em; text-transform: uppercase; font-size: 14px; color: var(--text-2); text-decoration: none; }
.top .brand b { color: var(--cyan); font-weight: 700; }
.top .brand i { color: var(--pink); font-style: normal; font-weight: 700; }
.top .grow { flex: 1; }
.top a.link { color: var(--text-2); text-decoration: none; font-size: 15px; }
.top a.link:hover { color: var(--text); }
.top form.logout { display: inline; margin: 0; }
.top button.link { background: none; border: 0; padding: 0; font: inherit; font-size: 15px; color: var(--text-2); cursor: pointer; }
.top button.link:hover { color: var(--text); }
.who { color: var(--text-3); font-size: 15px; }
.who b { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------- hero */
.hero { text-align: center; padding: 36px 0 28px; }
.sign {
  width: min(100%, 720px); height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 0 28px rgba(255, 79, 179, 0.25)) drop-shadow(0 0 40px rgba(94, 231, 255, 0.18));
}
.tagline {
  font-size: clamp(22px, 3.4vw, 30px); font-weight: 600; margin: 18px auto 6px; max-width: 760px; line-height: 1.25;
}
.tagline em { font-style: normal; color: var(--pink); }
.sub { color: var(--text-2); margin: 0 auto 26px; max-width: 640px; }
.actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 12px 26px; font-size: 17px;
  border: 1px solid var(--line); color: var(--text); background: rgba(255, 255, 255, 0.03);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn:hover { color: #fff; background: rgba(255, 255, 255, 0.07); transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.btn.play {
  font-size: 22px; padding: 16px 44px; border: none; color: #0b0614;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  box-shadow: 0 0 22px rgba(94, 231, 255, 0.45), 0 0 44px rgba(255, 79, 179, 0.35);
  animation: hum 3.2s ease-in-out infinite;
}
.btn.play:hover { color: #0b0614; box-shadow: 0 0 30px rgba(94, 231, 255, 0.7), 0 0 60px rgba(255, 79, 179, 0.55); }
.btn.play svg { width: 18px; height: 18px; }
@keyframes hum { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce) { .btn.play { animation: none; } .btn { transition: none; } }
.status { margin-top: 18px; color: var(--text-3); font-size: 15px; }
.status .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green); margin-right: 6px; vertical-align: 1px;
}

/* ---------------------------------------------------------- features */
h2 {
  font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3);
  margin: 44px 0 14px; font-weight: 700;
}
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.card .pic {
  background: #05040a; aspect-ratio: 12 / 7; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line);
}
.card .pic img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.card .body { padding: 14px 16px 16px; }
.card h3 { margin: 0 0 4px; font-size: 21px; line-height: 1.2; }
.card p { margin: 0; color: var(--text-2); font-size: 16px; line-height: 1.45; }
.card code, .how code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.86em; color: var(--amber); }

/* ---------------------------------------------------------- terminal sample */
.term {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 14px; line-height: 1.55;
  background: #05040a; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
  white-space: pre-wrap; color: #cfcbe9; overflow-x: auto;
}
.term .y { color: var(--amber); } .term .c { color: var(--cyan); } .term .p { color: var(--pink); }
.term .g { color: var(--green); } .term .d { color: var(--text-3); } .term .w { color: #fff; font-weight: 600; }

/* ---------------------------------------------------------- lower row */
.row2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
@media (max-width: 760px) { .row2 { grid-template-columns: 1fr; } }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.changes { list-style: none; margin: 0; padding: 0; }
.changes li { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.changes li:first-child { border-top: none; padding-top: 0; }
.tag {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 1px 9px; align-self: start; margin-top: 3px;
}
.tag.add { color: var(--green); border: 1px solid rgba(109, 255, 168, 0.4); }
.tag.change { color: var(--amber); border: 1px solid rgba(255, 200, 87, 0.4); }
.tag.remove { color: var(--pink); border: 1px solid rgba(255, 79, 179, 0.4); }
.changes .when { grid-column: 2; color: var(--text-3); font-size: 13px; margin-top: -4px; }
.changes .text { line-height: 1.4; }
.how p { margin: 0 0 10px; color: var(--text-2); }
.how .addr { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--text); background: #05040a; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: block; margin: 6px 0 12px; overflow-wrap: anywhere; }

footer { color: var(--text-3); font-size: 14px; text-align: center; padding: 40px 0 32px; }
footer a { color: var(--text-2); }
  

/* ---------------------------------------------------------- the pages besides the front page */
.top nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.top a.link.on { color: var(--cyan); }
.page { padding: 18px 0 8px; }
.page h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.15; margin: 0 0 6px; }
.page .lede { color: var(--text-2); margin: 0 0 22px; max-width: 680px; }
.page h2:first-child { margin-top: 0; }
code, kbd { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.86em; color: var(--amber); }

/* messages from the server ("Your password was changed.") */
.notes { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.note { border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: 10px; padding: 9px 14px; background: var(--panel); }
.note.success { border-left-color: var(--green); }
.note.error, .note.danger { border-left-color: var(--pink); }
.note.warning { border-left-color: var(--amber); }

/* ---------------------------------------------------------- forms (log in, sign up, password, email) */
.auth { max-width: 460px; margin: 10px auto 0; }
.auth .panel { padding: 22px 24px 24px; }
.auth h1 { margin-bottom: 4px; }
.auth .lede { margin-bottom: 18px; }
.field { display: grid; gap: 5px; margin: 0 0 16px; }
.field label { font-weight: 700; letter-spacing: 0.04em; }
.field input {
  font: 16px/1.4 "JetBrains Mono", ui-monospace, monospace; color: var(--text); background: #05040a;
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; width: 100%;
}
.field input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: transparent; }
.field .hint { color: var(--text-3); font-size: 14px; line-height: 1.4; }
.field .hint ul { margin: 2px 0 0; padding-left: 18px; }
.field .err, .form-err { color: var(--pink); font-size: 15px; line-height: 1.4; }
.form-err { margin: 0 0 14px; }
button.btn { cursor: pointer; font-family: inherit; }
.btn.wide { width: 100%; justify-content: center; }
.btn.go { border: none; color: #0b0614; background: linear-gradient(90deg, var(--cyan), var(--pink)); }
.btn.go:hover { color: #0b0614; filter: brightness(1.1); }
.btn.small { font-size: 14px; padding: 8px 16px; }
.alt { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-size: 15px; }
.alt a { color: var(--text-2); }
.alt a:hover { color: var(--text); }

/* ---------------------------------------------------------- my account */
.acct { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 760px) { .acct { grid-template-columns: 1fr; } }
.acct h3 { margin: 0 0 10px; font-size: 20px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.facts dt { color: var(--text-3); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.runner { border-top: 1px solid var(--line); padding: 14px 0 4px; }
.runner:first-of-type { border-top: none; padding-top: 0; }
.runner .name { font-size: 24px; font-weight: 700; line-height: 1.2; }
.runner .facts { margin: 8px 0 12px; }
.panel + .panel { margin-top: 14px; }
.panel p { color: var(--text-2); margin: 0 0 10px; }

/* ---------------------------------------------------------- the guide */
.guide { display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: start; }
.guide > main { min-width: 0; }
@media (max-width: 760px) { .guide { grid-template-columns: 1fr; } .guide .side { order: 2; } }
.side { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; padding: 14px; }
@media (max-width: 760px) { .side { position: static; max-height: none; } }
.side input {
  width: 100%; font: 15px "Rajdhani", system-ui, sans-serif; color: var(--text); background: #05040a;
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; margin-bottom: 10px;
}
.side input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.side details { border-top: 1px solid var(--line); padding: 6px 0; }
.side details:first-of-type { border-top: none; }
.side summary { cursor: pointer; font-weight: 700; display: flex; justify-content: space-between; gap: 8px; }
.side summary small { color: var(--text-3); font-weight: 600; }
.side ul { list-style: none; margin: 4px 0 2px; padding: 0; }
.side li a { display: block; padding: 2px 8px; border-radius: 7px; color: var(--text-2); text-decoration: none; }
.side li a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.side li a.on { color: var(--cyan); background: rgba(94, 231, 255, 0.08); }
.side li a.guide-topic::before, .topic-list a.guide-topic::before { content: "★ "; color: var(--amber); }
.side .none { color: var(--text-3); font-size: 15px; display: none; }
.kind { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.aliases { color: var(--text-3); margin: -2px 0 12px; }
.helptext {
  font: 14px/1.6 "JetBrains Mono", ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
  color: #cfcbe9; margin: 0;
}
.helptext b { color: #fff; font-weight: 600; }
.helptext a { color: var(--cyan); text-decoration: none; border-bottom: 1px dotted rgba(94, 231, 255, 0.5); }
.helptext a:hover { color: #fff; }
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.cats .panel { margin: 0; }
.cats h3 { margin: 0 0 2px; font-size: 20px; }
.cats h3 a { color: var(--text); text-decoration: none; }
.cats h3 a:hover { color: var(--cyan); }
.cats small { color: var(--text-3); display: block; margin-bottom: 6px; }
.topic-list { list-style: none; margin: 0; padding: 0; columns: 2 160px; }
.topic-list.one { columns: 1; }
.topic-list a { color: var(--text-2); text-decoration: none; }
.topic-list a:hover { color: var(--cyan); }
.steps { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 15px; flex-wrap: wrap; }
.steps a { color: var(--text-2); text-decoration: none; }
.steps a:hover { color: var(--cyan); }

/* ---------------------------------------------------------- changes, bestiary, items, map */
.none { color: var(--text-3); display: none; }
.staffnote { color: var(--amber); font-size: 15px; margin: -10px 0 18px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.chip {
  font: 600 15px "Rajdhani", system-ui, sans-serif; color: var(--text-2); background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; cursor: pointer;
}
.chip small { color: var(--text-3); margin-left: 4px; }
.chip:hover { color: var(--text); }
.chip.on { color: var(--text); border-color: var(--cyan); background: rgba(94, 231, 255, 0.08); }
.chip.add.on { border-color: var(--green); } .chip.change.on { border-color: var(--amber); } .chip.remove.on { border-color: var(--pink); }
.filters input {
  flex: 1 1 200px; font: 15px "Rajdhani", system-ui, sans-serif; color: var(--text); background: #05040a;
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px;
}
.filters input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.day { margin-bottom: 14px; }
.day h3 { margin: 0 0 8px; font-size: 18px; color: var(--text-2); }

.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tabs a { text-decoration: none; color: var(--text-2); font-weight: 700; padding: 4px 14px; border-radius: 999px; border: 1px solid transparent; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--cyan); border-color: var(--line); background: rgba(94, 231, 255, 0.06); }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 8px; }
.badge { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; border: 1px solid var(--line); border-radius: 999px; padding: 0 9px; color: var(--text-2); }
.badge.boss { color: var(--pink); border-color: rgba(255, 79, 179, 0.45); }
.badge.dim { color: var(--text-3); border-style: dashed; }
.badge.src { color: var(--amber); border-color: rgba(255, 200, 87, 0.35); }
.unfound { opacity: 0.6; }
.more { color: var(--text-3); margin: 12px 0 0; }
.more b { color: var(--text-2); }

.beasts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.beast { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.beast .pic { background: #05040a; aspect-ratio: 4 / 3; border-bottom: 1px solid var(--line); }
.beast .pic img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.beast .body { padding: 12px 16px 14px; }
.beast h3, .thing h3 { margin: 0; font-size: 21px; line-height: 1.2; }
.beast p, .thing p { color: var(--text-2); font-size: 15px; line-height: 1.45; margin: 0 0 8px; }
.beast .facts, .thing .facts { font-size: 15px; gap: 2px 12px; }

.kindgroup h2 small { letter-spacing: 0.05em; text-transform: none; font-weight: 600; margin-left: 6px; }
.things { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.thing { padding: 12px 14px; }
.thing .head { display: flex; gap: 12px; align-items: flex-start; }
.thing .head img { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; background: #05040a; border: 1px solid var(--line); border-radius: 8px; flex: none; }
.thing .facts { margin: 4px 0 8px; }

.mapbox { padding: 12px; }
.maptools { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.maptools .btn { padding: 4px 14px; min-width: 40px; justify-content: center; }
.maptools .where { color: var(--text-2); font-size: 15px; margin-left: 6px; }
.mapscroll { overflow: auto; max-height: 70vh; border-radius: 10px; background: #03070c; border: 1px solid var(--line); }
.mapscroll canvas { display: block; image-rendering: pixelated; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; padding: 0; color: var(--text-2); font-size: 14px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.area { display: grid; gap: 2px; padding: 12px 16px; }
.area b { font-size: 19px; }
.area span { color: var(--amber); }
.area small { color: var(--text-3); }

/* Item names in their rarity's color (world/rarity.py), on the Items page. */
.nf-r-junk { color: #8a8a8a; }
.nf-r-common { color: #f2f2f2; }
.nf-r-uncommon { color: #5fd75f; }
.nf-r-rare { color: #5fafff; }
.nf-r-epic { color: #d787ff; }
.nf-r-legendary { color: #ffaf00; text-shadow: 0 0 6px rgba(255, 175, 0, 0.45); }
.badge.tier { border-color: currentColor; }