@font-face { font-family: Naowh; src: url(assets/fonts/Naowh.ttf); }

:root {
  --bg: #191b1d; --panel: #1e2022; --rail: #131516; --field: #0e0f10;
  --line: #373b40; --grey: #3d4146; --fg: #f0f1f3; --muted: #9a9ea6;
  --accent: #0091ed; --accent-soft: #4db5f5; --gold: #ffd100;
  --green: #4dd17a; --up: #1eff00; --orange: #ff8000; --warn: #fb923c; --red: #f87171;
  --silver: #c8d0dc; --look: #66d9ef; --forever: #eed69e;
  --alliance: #4a9eff; --horde: #ff4d4d; --contested: #e6cc80;
  --q1: #ffffff; --q2: #1eff00; --q3: #3d9bff; --q4: #a335ee;
  --card: rgba(240,241,243,.035); --hover: rgba(240,241,243,.06); --sel: rgba(0,145,237,.16);
}

* { box-sizing: border-box; }
html { background: #0b0c0d; color: var(--fg); scrollbar-color: var(--grey) #0b0c0d; }
body { margin: 0; font: 13px/1.4 Naowh, "Segoe UI", system-ui, sans-serif; font-kerning: none; letter-spacing: .01em; }
::selection { background: var(--accent); color: #fff; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible { outline: 1px solid var(--accent-soft); outline-offset: 1px; }
h1, h2, h3, p { margin: 0; font-weight: 400; }

/* page around the windows */
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; max-width: 1160px; margin: 0 auto; padding: 32px 0 20px; }
.page-head h1 { font-size: 26px; font-weight: 600; }
.page-head p { color: var(--muted); max-width: 68ch; margin-top: 6px; font-size: 14px; }
.switch { display: flex; border: 1px solid #000; background: var(--panel); flex: none; }
.switch button { padding: 9px 16px; color: var(--muted); border-right: 1px solid #000; white-space: nowrap; }
.switch button:last-child { border: 0; }
.switch button b { color: var(--fg); margin-right: 6px; font-weight: 600; }
.switch button:hover { color: var(--fg); }
.switch button.on { background: var(--sel); color: #fff; box-shadow: inset 0 0 0 1px var(--accent); }
#stage { max-width: 1160px; margin: 0 auto; }
.pitch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; margin: 8px 0 18px; }
.pitch h2 { font-size: 20px; font-weight: 600; grid-column: 1 / -1; }
.pitch p { color: var(--muted); font-size: 14px; max-width: 62ch; }
.pitch ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; }
.pitch li + li { margin-top: 3px; }
.cap { color: var(--muted); margin: 26px 0 10px; font-size: 14px; }
.cap b { color: var(--fg); font-weight: 600; }
.notes { max-width: 1160px; margin: 48px auto 80px; }
.notes h2 { font-size: 18px; font-weight: 600; margin: 32px 0 12px; }
.notes table { border-collapse: collapse; width: 100%; font-size: 14px; }
.notes th, .notes td { text-align: left; vertical-align: top; padding: 9px 14px 9px 0; border-bottom: 1px solid #26292c; font-weight: 400; }
.notes thead th { color: var(--fg); font-weight: 600; }
.notes tbody th { color: var(--muted); width: 170px; }
.notes ul { margin: 0; padding-left: 18px; font-size: 14px; max-width: 86ch; }
.notes li { margin: 7px 0; color: #c9ccd1; }
.notes li b { color: var(--fg); font-weight: 600; }
.fine { color: var(--muted); margin-top: 18px; font-size: 13px; }

/* the NF window */
.win { width: 1160px; height: 800px; background: var(--bg); border: 1px solid #000; display: grid; grid-template-rows: 52px 1fr 20px; overflow: hidden; position: relative; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.tbar { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 12px; border-bottom: 1px solid #000; background: var(--panel); }
.tbar img { width: 32px; height: 32px; }
.tbar h3 { font-size: 20px; font-weight: 600; }
.tbar .tools { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.tool { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; color: var(--muted); border: 1px solid transparent; }
.tool:hover { color: var(--fg); background: var(--hover); }
.tool.on { color: #fff; border-color: var(--accent); background: var(--sel); }
.xbtn { width: 24px; height: 24px; display: grid; place-items: center; color: var(--muted); margin-left: 10px; }
.xbtn:hover { color: var(--fg); background: #7a1a14; }
.foot { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-size: 11px; color: var(--muted); border-top: 1px solid #000; background: var(--rail); }
.foot b { color: var(--accent); font-weight: 400; }
.body { min-height: 0; display: grid; }
.scroll { overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--grey) transparent; }

/* shared parts */
.ic.s12 { width: 12px; height: 12px; } .ic.s16 { width: 16px; height: 16px; } .ic.s18 { width: 18px; height: 18px; }
.ic.left { transform: rotate(180deg); } .ic.down { transform: rotate(90deg); } .ic.up { transform: rotate(-90deg); }
.muted { color: var(--muted); } .small { font-size: 11px; }
.btn { height: 26px; padding: 0 10px; background: rgba(30,32,34,.9); border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn:hover { border-color: var(--accent); }
.btn.pri { background: var(--accent); border-color: #000; color: #fff; }
.btn.pri:hover { background: #1a9ff0; }
.btn.sq { width: 26px; padding: 0; justify-content: center; }
.seg { display: flex; border: 1px solid #000; background: var(--panel); height: 28px; }
.seg button { flex: 1; padding: 0 12px; color: var(--muted); border-right: 1px solid #000; white-space: nowrap; }
.seg button:last-child { border: 0; }
.seg button:hover { color: var(--fg); }
.seg button.on { color: #fff; background: var(--sel); box-shadow: inset 0 0 0 1px var(--accent); }
.seg button[disabled] { color: #5d6167; cursor: default; }
.seg .n { color: var(--muted); margin-left: 5px; }
.field { height: 28px; background: var(--field); border: 1px solid #000; display: flex; align-items: center; gap: 8px; padding: 0 9px; color: var(--muted); }
.lv { font-weight: 600; }
.lv.g { color: var(--green); } .lv.y { color: var(--gold); } .lv.o { color: var(--warn); } .lv.r { color: var(--red); } .lv.x { color: #7b8087; }
.side-Alliance { color: var(--alliance); } .side-Horde { color: var(--horde); } .side-Contested { color: var(--contested); }
.tag { font-size: 11px; padding: 1px 6px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.tag.rare { color: var(--silver); border-color: var(--silver); }
.tag.fv { color: var(--forever); border-color: #6b5f43; }
.tag.here { color: #fff; border-color: var(--accent); background: var(--sel); }
.bust { background: center bottom / contain no-repeat; flex: none; }
.num { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid #000; background: rgba(25,27,29,.8); font-size: 11px; flex: none; color: var(--muted); }
.num.killed { color: var(--green); } .num.next { border-color: var(--accent); color: #fff; background: var(--sel); }
.num.none { border-color: transparent; background: none; }
.reqs { display: flex; gap: 0; flex-wrap: wrap; }
.req { display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 22px; border-right: 1px solid var(--line); white-space: nowrap; }
.req:first-child { padding-left: 0; } .req:last-child { border: 0; }
.req .ic { color: var(--muted); }
.req .ok { color: var(--green); }
.sec { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.sec .n { color: var(--muted); font-weight: 400; }
.sec .act { margin-left: auto; font-weight: 400; color: var(--accent-soft); }
.tipbox { background: rgba(230,204,128,.07); border: 1px solid #4a422c; padding: 9px 12px; }
.tipbox h4 { margin: 0 0 3px; font-size: 11px; font-weight: 600; color: #e6cc80; }
.tipbox p { color: #e9e4d4; max-width: 70ch; }
.abil { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 22px; padding: 0 8px; border: 1px solid var(--line); background: var(--card); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chip.q { border-color: #5c4d16; color: var(--gold); }

/* loot table */
.loot { width: 100%; border-collapse: collapse; }
.loot th { font-size: 11px; font-weight: 400; color: var(--muted); text-align: left; padding: 0 8px 5px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.loot td { padding: 5px 8px 5px 0; border-bottom: 1px solid #26292c; vertical-align: middle; }
.loot tr:hover td { background: rgba(240,241,243,.04); }
.loot tr.off { opacity: .55; }
.loot .it { display: flex; align-items: center; gap: 9px; min-width: 0; }
.icon { width: 30px; height: 30px; border: 1px solid #000; background: center / 108% no-repeat #000; flex: none; position: relative; }
.icon.q2 { box-shadow: 0 0 0 1px #145a14; } .icon.q3 { box-shadow: 0 0 0 1px #14457a; } .icon.q4 { box-shadow: 0 0 0 1px #5a1f85; }
.icon .inf { position: absolute; left: -3px; top: -4px; width: 14px; height: 9px; color: var(--forever); background-color: var(--forever); }
.nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q1 { color: var(--q1); } .q2 { color: var(--q2); } .q3 { color: var(--q3); } .q4 { color: var(--q4); }
.sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fy { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.fy .bis { color: var(--orange); display: flex; align-items: center; gap: 4px; }
.fy .bis.r2 { color: #c7ccdb; }
.fy .upg { color: var(--up); }
.fy .lk { color: var(--look); display: flex; align-items: center; gap: 4px; }
.fy .no { color: #5d6167; }
.chn { width: 62px; }
.chn .p { text-align: right; }
.chn .bar { height: 4px; background: var(--line); margin-top: 3px; }
.chn .bar i { display: block; height: 100%; background: var(--muted); }
.chn .bar i.hi { background: var(--accent); } .chn .bar i.mid { background: var(--accent-soft); }
.chn .new { color: var(--forever); text-align: right; }
.acts { display: flex; gap: 4px; justify-content: flex-end; }
.ib { width: 24px; height: 24px; display: grid; place-items: center; color: #5d6167; border: 1px solid transparent; }
.ib:hover { color: var(--fg); border-color: var(--line); background: var(--hover); }
.ib.on { color: var(--gold); } .ib.on.b { color: var(--orange); }
.filterline { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; margin-top: 8px; }
.filterline button { color: var(--accent-soft); }

/* quest rows */
.qrow { display: grid; grid-template-columns: 18px 1fr auto; gap: 2px 9px; padding: 7px 10px; border-bottom: 1px solid #26292c; align-items: center; }
.qrow:hover { background: rgba(240,241,243,.04); }
.qrow.on { background: var(--sel); box-shadow: inset 0 0 0 1px var(--accent); }
.qrow .w { grid-column: 2 / 4; font-size: 11px; color: var(--muted); }
.qm { width: 16px; height: 16px; display: grid; place-items: center; font-weight: 600; font-size: 14px; line-height: 1; }
.qs-pickup .qm { color: var(--gold); } .qs-active .qm { color: var(--gold); } .qs-done .qm { color: var(--green); }
.qs-tooHigh .qm { color: var(--red); } .qs-drop .qm { color: var(--warn); }
.qs-done .qn { color: var(--muted); }
.qn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qst { font-size: 11px; white-space: nowrap; }
.qs-pickup .qst { color: #d8dbe0; } .qs-active .qst { color: var(--gold); } .qs-done .qst { color: var(--muted); }
.qs-tooHigh .qst { color: var(--red); } .qs-drop .qst { color: var(--warn); }

/* map */
.map { position: relative; background: #2a2418 center / cover no-repeat; border: 1px solid #000; }
.pinm { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: #16181a; border: 1px solid #000; box-shadow: 0 2px 5px rgba(0,0,0,.6); color: var(--fg); }
.pinm.killed { color: var(--green); background: #14251b; }
.pinm.next, .pinm.on { background: var(--accent); color: #fff; }
.pinm.rare { color: #16181a; background: var(--silver); }
.floors { position: absolute; left: 8px; bottom: 8px; }

/* A: field guide */
.A .body { grid-template-columns: 296px 1fr; }
.A .rail { background: var(--rail); border-right: 1px solid #000; display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.A .railtop { padding: 10px 10px 8px; display: grid; gap: 8px; }
.grp { display: flex; align-items: center; gap: 6px; padding: 9px 10px 5px; font-size: 11px; color: var(--accent-soft); }
.grp .n { color: var(--muted); }
.drow { display: grid; grid-template-columns: 58px 1fr auto; gap: 0 9px; align-items: center; padding: 5px 10px; width: 100%; text-align: left; }
.drow:hover { background: var(--hover); }
.drow.on { background: var(--sel); box-shadow: inset 0 0 0 1px var(--accent); }
.drow .th { width: 58px; height: 30px; background: center / cover #000; border: 1px solid #000; }
.drow .st { text-align: right; font-size: 11px; color: var(--muted); line-height: 1.35; }
.drow .st .b { color: var(--orange); }
.A .main { display: grid; grid-template-rows: auto auto 1fr; min-height: 0; min-width: 0; }
.hero { position: relative; padding: 14px 18px 12px; border-bottom: 1px solid #000; overflow: hidden; background: var(--panel); }
.hero .art { position: absolute; right: 0; top: 0; bottom: 0; width: 440px; background: center 38% / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); opacity: .8; }
.hero > *:not(.art) { position: relative; }
.hero .t { display: flex; align-items: center; gap: 10px; }
.hero h2 { font-size: 20px; font-weight: 600; }
.hero .meta { margin: 2px 0 10px; color: var(--muted); }
.hero .nav { margin-left: auto; display: flex; gap: 6px; }
.A .tabs { padding: 10px 18px 0; display: flex; align-items: center; gap: 12px; }
.A .tabs .seg { width: 450px; }
.A .panes { display: grid; grid-template-columns: 330px 1fr; min-height: 0; margin-top: 10px; border-top: 1px solid #000; }
.A .blist { border-right: 1px solid #000; background: rgba(0,0,0,.14); }
.brow { display: grid; grid-template-columns: 20px 62px 1fr auto; gap: 0 8px; align-items: center; padding: 6px 10px; width: 100%; text-align: left; border-bottom: 1px solid #26292c; }
.brow:hover { background: var(--hover); }
.brow.on { background: var(--sel); box-shadow: inset 0 0 0 1px var(--accent); }
.brow .bust { width: 62px; height: 36px; }
.brow.killed .bn { color: var(--muted); }
.brow .mk { display: flex; flex-direction: column; align-items: flex-end; font-size: 11px; gap: 1px; }
.brow .mk span { display: flex; align-items: center; gap: 3px; }
.divider { padding: 9px 10px 4px; font-size: 11px; color: var(--muted); }
.A .detail { padding: 16px 20px 20px; display: grid; gap: 14px; align-content: start; }
.bhead { display: flex; align-items: center; gap: 14px; }
.bhead .bust { width: 128px; height: 64px; }
.bhead h3 { font-size: 20px; font-weight: 600; }
.bhead .k { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--muted); }
.qpanes { display: grid; grid-template-columns: 400px 1fr; min-height: 0; margin-top: 10px; border-top: 1px solid #000; }
.qdetail { padding: 16px 20px; display: grid; gap: 14px; align-content: start; }
.qdetail h3 { font-size: 20px; font-weight: 600; }
.kv { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px 12px; align-items: center; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.mappane { display: grid; grid-template-columns: 1fr 250px; gap: 0; min-height: 0; margin-top: 10px; border-top: 1px solid #000; }
.mappane .mwrap { padding: 14px; }
.mappane .map { width: 100%; aspect-ratio: 3 / 2; }

/* B: atlas */
.B .body { grid-template-rows: auto 1fr; }
.B .tb2 { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #000; background: var(--panel); }
.B .tb2 .field { width: 300px; }
.B .tb2 .seg { width: 330px; }
.B .tb2 .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.B .home { padding: 4px 14px 18px; }
.B .home h4 { margin: 14px 0 8px; font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.B .home h4 span { color: var(--muted); font-weight: 400; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dcard { position: relative; height: 122px; border: 1px solid #000; background: #000 center / cover no-repeat; text-align: left; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.dcard::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,15,16,.05) 20%, rgba(14,15,16,.94) 78%); }
.dcard:hover { border-color: var(--accent); }
.dcard.here { border-color: var(--accent); }
.dcard > * { position: relative; }
.dcard .top { position: absolute; top: 6px; left: 6px; right: 6px; display: flex; gap: 5px; }
.dcard .top .tag { background: rgba(14,15,16,.86); }
.dcard .top .tag.here { background: var(--accent); }
.dcard .inf { padding: 0 9px 7px; }
.dcard .nm2 { font-size: 15px; font-weight: 600; }
.dcard .ln { display: flex; gap: 10px; font-size: 11px; color: #c9ccd1; align-items: center; }
.dcard .ln .sp { margin-left: auto; display: flex; gap: 9px; }
.dcard .ln .sp span { display: flex; gap: 3px; align-items: center; }
.dcard.far::before { background: linear-gradient(180deg, rgba(14,15,16,.4) 0%, rgba(14,15,16,.95) 75%); }
.B .hero { padding: 12px 16px 12px; }
.B .hero .art { width: 520px; }
.crumb { display: flex; align-items: center; gap: 6px; color: var(--muted); margin-bottom: 4px; }
.crumb button { color: var(--accent-soft); display: flex; align-items: center; gap: 4px; }
.B .split { display: grid; grid-template-columns: 624px 1fr; min-height: 0; }
.B .lpane { padding: 12px 14px; border-right: 1px solid #000; display: grid; gap: 10px; align-content: start; }
.B .lpane .seg { width: 330px; }
.B .lpane .map { width: 594px; height: 396px; }
.strip { display: flex; gap: 4px; }
.strip button { flex: 1; min-width: 0; padding: 4px 2px 5px; border: 1px solid #000; background: var(--card); display: grid; justify-items: center; gap: 1px; }
.strip button:hover { border-color: var(--line); background: var(--hover); }
.strip button.on { border-color: var(--accent); background: var(--sel); }
.strip button.rare { border-color: #6f7680; }
.strip .bust { width: 50px; height: 28px; }
.strip .l { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.strip button.on .l { color: #fff; }
.strip .o { font-size: 11px; color: var(--muted); }
.strip .o.killed { color: var(--green); } .strip .o.next { color: var(--accent-soft); }
.B .rpane { padding: 14px 16px; display: grid; gap: 12px; align-content: start; }
.B .rpane .bhead .bust { width: 112px; height: 56px; }
.qlist { border: 1px solid #000; background: rgba(0,0,0,.14); }

/* C: run sheet */
.C .body { grid-template-columns: 318px 1fr; }
.C .col { background: var(--rail); border-right: 1px solid #000; display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.C .pick { padding: 10px; display: flex; gap: 6px; }
.C .pick .field { flex: 1; color: var(--fg); justify-content: space-between; }
.C .cover { height: 150px; background: center 30% / cover no-repeat; position: relative; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.C .cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(19,21,22,.96)); }
.C .cover div { position: absolute; left: 12px; right: 12px; bottom: 8px; z-index: 1; }
.C .cover h2 { font-size: 20px; font-weight: 600; }
.C .block { padding: 12px 12px 4px; }
.rl { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; padding: 4px 0; }
.rl .ic { color: var(--muted); }
.C .qrow { padding: 6px 12px; }
.C .main { display: grid; grid-template-rows: auto 1fr; min-height: 0; min-width: 0; }
.C .sum { display: flex; align-items: center; gap: 0; padding: 10px 16px; border-bottom: 1px solid #000; background: var(--panel); }
.C .sum .req { height: 28px; }
.C .sum .r { margin-left: auto; display: flex; gap: 8px; }
.prog { width: 120px; height: 4px; background: var(--line); }
.prog i { display: block; height: 100%; background: var(--green); }
.run { padding: 6px 16px 16px; }
.rb { border-bottom: 1px solid #26292c; }
.rb > button { display: grid; grid-template-columns: 20px 80px 1fr auto 14px; gap: 0 11px; align-items: center; width: 100%; text-align: left; padding: 7px 4px; }
.rb > button:hover { background: rgba(240,241,243,.04); }
.rb .bust { width: 80px; height: 44px; }
.rb .bn { font-size: 15px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.rb.killed .bn { color: var(--muted); font-weight: 400; }
.rb .tp { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }
.rb.open > button { background: var(--sel); box-shadow: inset 0 0 0 1px var(--accent); }
.rb.rare > button { box-shadow: inset 0 0 0 1px #6f7680; }
.icons { display: flex; gap: 5px; align-items: center; }
.icons .icon { width: 30px; height: 30px; }
.icons .icon.dim { opacity: .35; }
.icons .icon .m { position: absolute; right: -4px; bottom: -4px; width: 13px; height: 13px; border-radius: 50%; display: grid; place-items: center; background: #101214; border: 1px solid #000; }
.icons .icon .m .ic { width: 9px; height: 9px; }
.icons .icon .m.u { color: var(--up); } .icons .icon .m.b { color: var(--orange); }
.icons .cnt { font-size: 11px; color: var(--muted); width: 96px; white-space: nowrap; text-align: right; }
.icons .cnt b { color: var(--up); font-weight: 400; }
.open-body { display: grid; grid-template-columns: 1fr 270px; gap: 22px; padding: 12px 6px 16px 31px; }
.open-body .rcol { display: grid; gap: 12px; align-content: start; }
.hist { color: var(--muted); font-size: 11px; display: grid; gap: 2px; }