@font-face { font-family: "Alegreya Sans"; font-weight: 400; font-display: swap; src: url(fonts/AlegreyaSans-400.woff2) format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-weight: 500; font-display: swap; src: url(fonts/AlegreyaSans-500.woff2) format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-weight: 700; font-display: swap; src: url(fonts/AlegreyaSans-700.woff2) format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-weight: 800; font-display: swap; src: url(fonts/AlegreyaSans-800.woff2) format("woff2"); }
@font-face { font-family: "Courier Prime"; font-weight: 400; font-display: swap; src: url(fonts/CourierPrime-400.woff2) format("woff2"); }
@font-face { font-family: "Courier Prime"; font-weight: 700; font-display: swap; src: url(fonts/CourierPrime-700.woff2) format("woff2"); }

:root {
  color-scheme: dark;
  --wood: #2b1c13;
  --wood-raised: #3b2819;
  --wood-line: #5a4330;
  --seam: #150d08;
  --ink: #f1e8d7;
  --ink-soft: #cfc2aa;
  --focus: #f0c674;
  --bar-height: 64px;

  --stock: #3d2d22;
  --stock-raised: #4b382b;
  --stock-line: #54433a;
  --stock-ink: #d6c9b2;
  --tab: #c9b48c;
  --tab-ink: #21150e;

  --words: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --typed: "Courier Prime", "Courier New", monospace;
}

[data-kind="m"] { --stock: #3a1c19; --stock-raised: #4b2621; --stock-line: #6d3b32; --stock-ink: #e3c4b7; --tab: #e08a72; }
[data-kind="i"] { --stock: #1d3126; --stock-raised: #284233; --stock-line: #41644f; --stock-ink: #c1d6bf; --tab: #9cc276; }
[data-kind="n"] { --stock: #1d2a3b; --stock-raised: #293a50; --stock-line: #435c7c; --stock-ink: #bfd0e2; --tab: #8db3e2; }
[data-kind="q"] { --stock: #372a12; --stock-raised: #4a391b; --stock-line: #6f5a30; --stock-ink: #e0d0a4; --tab: #e2b95c; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--wood);
  color: var(--ink);
  font: 400 16px/1.4 var(--words);
  overflow: hidden;
}
::selection { background: var(--focus); color: var(--wood); }
* { scrollbar-color: var(--wood-line) transparent; scrollbar-width: thin; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--tab); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
button { font: inherit; color: inherit; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.num { font-family: var(--typed); font-size: .94em; font-variant-numeric: tabular-nums; }

/* The drawer's front */
.bar {
  height: var(--bar-height);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  background: var(--wood-raised);
  border-bottom: 1px solid var(--seam);
}
.brand { font-weight: 800; font-size: 20px; text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--focus); }
.finder-link { color: var(--ink-soft); font-weight: 700; white-space: nowrap; text-decoration: none; }
.finder-link:hover { color: var(--focus); }
.search { position: relative; flex: 1 1 auto; max-width: 620px; }
.search-icon { position: absolute; left: 12px; top: 11px; width: 20px; height: 20px; fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
#q {
  width: 100%;
  height: 42px;
  padding: 0 12px 0 40px;
  border: 1px solid var(--wood-line);
  border-radius: 6px;
  background: var(--wood);
  color: var(--ink);
  font: 500 18px var(--words);
  caret-color: var(--focus);
}
#q::placeholder { color: var(--ink-soft); }
#q::-webkit-search-cancel-button { appearance: none; }
.q-clear { position: absolute; right: 8px; top: 7px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; }
.q-clear[hidden] { display: none; }
.q-clear:hover { background: var(--wood-raised); }
.q-clear svg { width: 14px; height: 14px; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; }
.kinds { display: flex; gap: 2px; }
.kinds button {
  height: 36px;
  padding: 0 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  font-weight: 500;
  white-space: nowrap;
}
.kinds button:hover { color: var(--ink); background: var(--wood); }
.kinds button[aria-pressed="true"] { background: var(--tab); color: var(--tab-ink); font-weight: 700; }
.lang { height: 36px; padding: 0 12px; border: 1px solid var(--wood-line); border-radius: 6px; background: transparent; font-weight: 700; }
.lang:hover { border-color: var(--focus); color: var(--focus); }

/* The panes keep their place; only what's in them changes */
.desk {
  height: calc(100% - var(--bar-height));
  display: grid;
  grid-template-columns: minmax(260px, 310px) minmax(0, 1fr) minmax(320px, 38%);
}
.results { overflow-y: auto; padding: 10px 8px; border-right: 1px solid var(--seam); }
.results-count { margin: 2px 10px 8px; color: var(--ink-soft); font-size: 15px; }
.results-empty { margin: 10px; color: var(--ink-soft); }
.results ol { list-style: none; margin: 0; padding: 0; }
.results ol.under-way { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--wood-line); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 8px;
  padding: 6px 10px;
  border-radius: 5px;
  text-decoration: none;
}
.row:hover, .row:focus-visible { background: var(--wood-raised); color: inherit; }
.row[aria-current="true"] { background: var(--stock-raised); }
.row-name { font-weight: 500; overflow-wrap: anywhere; }
.row-meta { font-family: var(--typed); color: var(--ink-soft); font-size: 14px; white-space: nowrap; align-self: center; }
.row-kind { grid-column: 1 / -1; font-size: 14px; color: var(--tab); }

/* The open card, with the guide tabs of the way here behind it */
.slot { min-width: 0; display: flex; flex-direction: column; padding: 14px 18px 0; overflow: hidden; }
.trail { display: flex; align-items: flex-end; min-height: 32px; padding-left: 10px; flex: none; overflow: hidden; }
.tab {
  position: relative;
  max-width: 190px;
  padding: 6px 14px 8px;
  margin: 0 -6px -4px 0;
  border-radius: 7px 7px 0 0;
  background: var(--tab);
  color: var(--tab-ink);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 -2px 6px rgb(0 0 0 / .35);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}
.tab:hover { transform: translateY(-3px); color: var(--tab-ink); }
.tab[aria-current="page"] { padding-bottom: 12px; margin-bottom: -4px; }
.tab.new { animation: tab-up .34s cubic-bezier(.16, 1, .3, 1); }
@keyframes tab-up { from { transform: translateY(14px); } to { transform: none; } }
.card {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 26px 32px;
  background: var(--stock);
  color: var(--ink);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -3px 14px rgb(0 0 0 / .4);
  outline: none;
}
.card.rise { animation: rise .32s cubic-bezier(.16, 1, .3, 1); }
@keyframes rise { from { transform: translateY(18px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .card.rise, .tab.new { animation: none; } .tab, .stage.fly { transition: none !important; } }

.call { position: absolute; top: 22px; right: 26px; font-family: var(--typed); color: var(--stock-ink); font-size: 15px; }
.card-head { padding-bottom: 12px; border-bottom: 1px solid var(--stock-line); }
.card h1 { margin: 0 80px 0 0; font-size: 32px; font-weight: 800; line-height: 1.1; text-wrap: balance; }
.alt-name { margin: 3px 0 0; color: var(--stock-ink); font-size: 17px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 14px 0 0; }
.facts div { min-width: 0; }
.facts dt { color: var(--stock-ink); font-size: 15px; }
.facts dt .num { line-height: 0; }
.facts dd { margin: 0; font-family: var(--typed); font-size: 18px; font-weight: 700; }
.facts dd.word { font-family: var(--words); font-size: 18px; }
.card h2 { margin: 30px 0 6px; font-size: 20px; font-weight: 700; }
.note { margin: 8px 0 0; color: var(--stock-ink); font-size: 15px; max-width: 70ch; }

table { width: 100%; border-collapse: collapse; font-size: 16px; }
th { text-align: left; font-weight: 500; color: var(--stock-ink); padding: 3px 10px 3px 0; border-bottom: 1px solid var(--stock-line); }
td { padding: 4px 10px 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--stock-line) 45%, transparent); vertical-align: top; }
th.r, td.r { text-align: right; padding-right: 0; padding-left: 12px; white-space: nowrap; }
td.n { font-family: var(--typed); font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--stock-raised); }
.chance { display: inline-block; min-width: 76px; padding: 0 5px; text-align: right; background: color-mix(in srgb, var(--tab) var(--tone), transparent); border-radius: 2px; }
.more { margin-top: 8px; padding: 5px 12px; border: 1px solid var(--stock-line); border-radius: 5px; background: transparent; }
.more:hover { background: var(--stock-raised); }
.links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.takes { color: var(--stock-ink); }
.takes a { color: var(--ink); }

/* The home card */
.home p { max-width: 62ch; }
.home .lead { font-size: 19px; }
.home h1 { margin-bottom: 10px; }
.home kbd { font-family: var(--typed); padding: 0 5px; border: 1px solid var(--stock-line); border-radius: 3px; }

/* The quest finder */
.finder { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 14px; }
.field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.field[hidden] { display: none; }
.field.grow { flex: 1 1 150px; }
.field-name { color: var(--stock-ink); font-size: 15px; }
.finder input:not([type="checkbox"]), .finder select {
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--stock-line);
  border-radius: 5px;
  background: var(--stock-raised);
  color: var(--ink);
  font: 500 16px var(--words);
}
.finder input[type="number"] { width: 76px; font-family: var(--typed); }
.finder select { max-width: 200px; }
.finder option, .finder optgroup { background: var(--stock); color: var(--ink); }
.seg { display: flex; gap: 2px; }
.seg button { height: 36px; padding: 0 11px; border: 0; border-radius: 5px; background: transparent; color: var(--stock-ink); font-weight: 500; white-space: nowrap; }
.seg button:hover { background: var(--stock-raised); color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--tab); color: var(--tab-ink); font-weight: 700; }
.finder-count { margin: 16px 0 6px; font-size: 18px; font-weight: 700; }
#finder-list th:nth-child(3), #finder-list td:nth-child(3) { padding-right: 14px; }
td.tick { width: 26px; padding-right: 4px; }
td.tick input, .done-toggle input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--tab); cursor: pointer; }
.needs { font-size: 15px; }
tr.is-done td:not(.tick) { color: var(--stock-ink); }
.done-toggle { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; cursor: pointer; }
.done-toggle input { margin: 0; }
.plain { margin: 0; padding: 0; list-style: none; }
.home-finder { font-weight: 700; }
.talk { margin-top: 8px; border-top: 1px solid var(--stock-line); }
.talk summary { padding: 7px 0; font-weight: 700; cursor: pointer; }
.page { padding: 8px 0 10px; border-top: 1px solid color-mix(in srgb, var(--stock-line) 45%, transparent); max-width: 70ch; }
.page p { margin: 0 0 6px; }
.page .speaker { font-weight: 700; color: var(--stock-ink); }
.page .choice { padding-left: 10px; border-left: 2px solid var(--tab); color: var(--stock-ink); }
.here { fill: var(--focus); stroke: #21150e; stroke-width: 2.5px; vector-effect: non-scaling-stroke; }

/* The world map */
.map { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--seam); }
.map-view { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #6e6a56; touch-action: none; cursor: grab; }
.map-view.dragging { cursor: grabbing; }
.stage { position: absolute; left: 0; top: 0; width: 1812px; height: 2620px; transform-origin: 0 0; will-change: transform; }
.stage.fly { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.stage img, .stage svg { position: absolute; left: 0; top: 0; user-select: none; }
.areas { opacity: .52; }
.area { fill: var(--c); stroke: var(--c); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.pin { fill: var(--c); stroke: #fff7e2; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.layer-m { --c: #b5121b; }
.layer-n { --c: #123fa8; }
.layer-q { --c: #6d2fa8; }
#overlay.has-hot > g:not(.hot) { opacity: .25; }
g.hot .areas { opacity: .85; }
.map-tools { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 8px rgb(0 0 0 / .5); }
.map-tools button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-bottom: 1px solid var(--seam); background: var(--wood-raised); }
.map-tools button:last-child { border-bottom: 0; }
.map-tools button:hover { background: var(--wood-line); }
.map-tools svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.map-note { flex: none; display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0; padding: 7px 12px; background: var(--wood-raised); border-top: 1px solid var(--seam); font-size: 15px; }
.map-note:empty { display: none; }
.key { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 12px; height: 12px; border-radius: 2px; background: var(--c); }
.to-map { display: none; }

@media (max-width: 1180px) {
  .kinds button { padding: 0 8px; }
  .desk { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 42%; }
  .results { grid-row: 1 / -1; }
  .map { grid-column: 2; border-left: 0; border-top: 1px solid var(--seam); }
}
@media (max-width: 760px) {
  html, body { height: auto; }
  body { overflow: visible; }
  :root { --bar-height: auto; }
  .bar { height: auto; flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; position: sticky; top: 0; z-index: 5; }
  .brand { font-size: 18px; order: 1; flex: 1; }
  .lang { order: 2; }
  .search { order: 3; flex: 1 0 100%; max-width: none; }
  .kinds { order: 4; flex: 1 0 100%; overflow-x: auto; }
  .finder-link { order: 5; }
  .finder select { max-width: none; }
  .field { flex: 1 1 130px; }
  .seg-field { flex: 1 0 100%; }
  .seg { flex-wrap: wrap; }
  .finder input[type="number"] { width: 100%; }
  .desk { display: block; height: auto; }
  .results { display: none; border: 0; }
  body.searching .results, body.home .results { display: block; }
  body.searching .slot, body.searching .map { display: none; }
  .facts { display: grid; grid-template-columns: repeat(3, 1fr); }
  .slot { padding: 10px 0 0; overflow: visible; }
  .card { overflow: visible; padding: 18px 16px 24px; border-radius: 0; }
  .call { top: 18px; right: 16px; }
  .card h1 { font-size: 27px; }
  .map { border: 0; }
  .map-view { height: 66vh; flex: none; touch-action: pan-y; }
  .to-map { display: inline-block; margin-top: 12px; padding: 6px 14px; border: 1px solid var(--stock-line); border-radius: 5px; background: var(--stock-raised); font-weight: 700; }
  td, th { padding-right: 6px; }
}