@charset "UTF-8";
.game-icon,.character-icon { object-fit:contain; }
.game-boss-label { font:11px Georgia,serif; display:inline-flex; align-items:center; justify-content:center; width:28px; }
.map-context { padding:14px 21px; font-size:11px; color:#a4b39c; border-bottom:1px solid #424b382b; }
.original-node-icon { pointer-events:none; }
.original-boss-label { fill:#392a1d; font:bold 13px Georgia,serif; }
:root {
  color-scheme:dark;
  --bg:#101619;
  --panel:#181f22;
  --panel-soft:#151d20;
  --line:#2a3335;
  --line-soft:#242d30;
  --text:#e2e5df;
  --muted:#8d9998;
  --faint:#637270;
  --gold:#d1b37a;
  --gold-hover:#e1c793;
  --green:#83ad97;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;
  --font:"Segoe UI","Microsoft YaHei UI","PingFang SC",sans-serif;
  --mono:"Cascadia Code","Consolas",monospace
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.65 var(--font);
  -webkit-font-smoothing:antialiased
}
body:has(dialog[open]) {
  overflow:hidden
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select {
  font:inherit
}
button,a,input,select {
  -webkit-tap-highlight-color:transparent
}
button {
  color:inherit;
  cursor:pointer
}
button:disabled {
  opacity:.4;
  cursor:default
}
button,a,input,select {
  outline-offset:4px
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[role=button]:focus-visible {
  outline:2px solid var(--gold)
}
::selection {
  background:#d1b37a45;
  color:#fff
}
button {
  border:0;
  background:none
}
input,select {
  min-width:0
}
h1,h2,h3,p {
  margin:0
}
fieldset {
  min-width:0;
  margin:0;
  padding:0;
  border:0
}
legend {
  padding:0
}
svg {
  display:block
}
.icon {
  width:19px;
  height:19px;
  flex-shrink:0
}
main:focus {
  outline:none
}
.muted {
  color:var(--muted)
}
.text-button {
  color:var(--gold);
  font-size:12px;
  padding:4px 0;
  white-space:nowrap
}
.text-button:hover {
  color:var(--gold-hover)
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  font-weight:500;
  letter-spacing:2px;
  color:var(--gold)
}
.gold-line {
  display:inline-block;
  width:26px;
  height:1px;
  background:var(--gold)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:42px;
  padding:10px 20px;
  border-radius:6px;
  border:1px solid transparent;
  white-space:nowrap;
  font-size:13px;
  font-weight:600;
  transition:background .18s,border-color .18s,transform .18s
}
.button:hover:not(:disabled) {
  transform:translateY(-1px)
}
.primary {
  background:var(--gold);
  color:#202622;
  border-color:var(--gold)
}
.primary:hover:not(:disabled) {
  background:var(--gold-hover)
}
.secondary {
  background:#ffffff03;
  border-color:#3b4546;
  color:#c7cfca
}
.secondary:hover:not(:disabled) {
  background:#ffffff08;
  border-color:#70766b
}
.button.small {
  padding:7px 12px;
  min-height:36px;
  font-size:12px
}
.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:32px;
  height:32px;
  border:1px solid transparent;
  border-radius:5px;
  color:var(--muted);
  font-size:22px;
  line-height:1
}
.icon-button:hover {
  color:var(--gold);
  background:#ffffff07;
  border-color:#ffffff10
}
.icon-button .icon {
  width:16px;
  height:16px
}
.skip-link {
  position:fixed;
  top:-60px;
  left:20px;
  padding:12px 22px;
  background:var(--gold);
  color:#111;
  z-index:20
}
.skip-link:focus {
  top:10px
}
.site-header {
  height:88px;
  max-width:1600px;
  margin:auto;
  padding:0 52px;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line-soft);
  gap:70px
}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  flex-shrink:0;
  font-size:18px;
  letter-spacing:2px
}
.brand-mark {
  width:29px;
  height:37px;
  color:var(--gold)
}
.brand small {
  display:block;
  font-size:8px;
  letter-spacing:2.25px;
  color:var(--muted);
  margin-top:2px
}
.site-header nav {
  display:flex;
  gap:34px;
  height:100%;
  align-items:center
}
.site-header nav a {
  height:100%;
  display:flex;
  align-items:center;
  position:relative;
  color:var(--muted);
  font-size:13px
}
.site-header nav a:hover {
  color:var(--text)
}
.site-header nav a.active {
  color:var(--gold)
}
.site-header nav a.active:after {
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  content:"";
  height:2px;
  background:var(--gold)
}
.local-badge {
  margin-left:auto;
  color:#aab6af;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px
}
.local-badge i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px #83ad970b
}
.page {
  max-width:1496px;
  padding:0 52px;
  margin:0 auto
}
.site-footer {
  max-width:1496px;
  padding:25px 52px 30px;
  margin:55px auto 0;
  display:flex;
  justify-content:space-between;
  gap:15px;
  border-top:1px solid var(--line-soft);
  color:var(--faint);
  font-size:10px;
  letter-spacing:.8px
}
.site-footer b {
  font-weight:400;
  margin:0 8px
}
.toast {
  position:fixed;
  bottom:30px;
  left:50%;
  z-index:30;
  transform:translate(-50%,20px);
  background:#29332d;
  border:1px solid #54684d;
  border-radius:8px;
  box-shadow:0 10px 40px #0006;
  padding:12px 22px;
  color:#e7e9dd;
  font-size:13px;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s,transform .18s;
  max-width:90vw;
  text-align:center;
  pointer-events:none
}
.toast.visible {
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0)
}
.hall-hero {
  position:relative;
  margin-top:36px;
  padding:28px 34px 0;
  min-height:239px;
  border:1px solid #353c36;
  border-radius:9px;
  overflow:hidden;
  background:radial-gradient(ellipse at 83% 70%,#c6a56c0b,transparent 48%),linear-gradient(110deg,#1e2728,#171f22 65%)
}
.hall-hero h1 {
  font-family:var(--serif);
  font-size:36px;
  font-weight:600;
  letter-spacing:2px;
  line-height:1.55;
  margin-top:13px;
  position:relative;
  z-index:1
}
.hall-hero h1 span {
  color:#d7c8a7
}
.hero-description {
  font-size:12px;
  letter-spacing:.5px;
  color:#9eaaa7;
  margin-top:8px;
  position:relative;
  z-index:1
}
.hero-art {
  position:absolute;
  right:2%;
  top:-9px;
  width:390px;
  height:242px;
  fill:none;
  stroke:#b89b6040;
  stroke-width:.8;
  pointer-events:none
}
.hero-art circle {
  stroke:#b89b6029
}
.hero-bottom {
  display:flex;
  gap:24px;
  align-items:center;
  position:relative;
  z-index:1;
  border-top:1px solid #a9ad8b14;
  padding:13px 0;
  margin-top:25px;
  font-size:11px;
  color:#aaa988
}
.hero-bottom>span {
  display:flex;
  align-items:center;
  gap:7px
}
.hero-bottom .icon {
  width:14px;
  height:14px
}
.hero-bottom .archive-total {
  margin-left:auto;
  color:#8d9890;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.5px
}
.hall-tools {
  display:flex;
  gap:12px;
  margin:26px 0 27px
}
.search-box {
  width:100%;
  display:flex;
  gap:13px;
  align-items:center;
  padding:6px 7px 6px 17px;
  background:#182124;
  border:1px solid #35403f;
  border-radius:7px
}
.search-box>.icon {
  color:#8d9992;
  width:20px;
  height:20px
}
.search-box input {
  width:100%;
  border:none;
  background:transparent;
  outline:none;
  color:var(--text);
  font-size:13px;
  height:35px
}
.search-box input::placeholder {
  color:#6f807b
}
.search-box:focus-within {
  border-color:#a78c61
}
.search-box input:focus-visible {
  outline:none
}
.search-box .button {
  min-height:34px;
  padding:5px 23px;
  font-size:12px
}
.search-box kbd {
  font:12px var(--mono);
  border:1px solid #3b4743;
  border-radius:4px;
  color:#718077;
  width:22px;
  height:22px;
  text-align:center;
  line-height:20px
}
.filter-toggle {
  display:none
}
.hall-layout {
  display:grid;
  grid-template-columns:215px minmax(0,1fr);
  gap:30px
}
.filter-sidebar {
  padding-right:23px;
  border-right:1px solid var(--line-soft);
  align-self:start
}
.filter-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px
}
.filter-heading h2 {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600
}
.filter-heading h2 .icon {
  width:16px;
  height:16px;
  color:#8fa298
}
.filter-sidebar fieldset {
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--line-soft)
}
.filter-sidebar fieldset:first-of-type {
  margin-top:0;
  padding-top:0;
  border:0
}
.filter-sidebar legend {
  float:left;
  width:100%;
  margin-bottom:13px;
  font-size:11px;
  color:#c0c8c1
}
.filter-sidebar legend+* {
  clear:both
}
.filter-sidebar legend small {
  display:block;
  font-size:8px;
  font-weight:400;
  color:var(--faint);
  letter-spacing:1.7px;
  margin-top:1px
}
.character-choice {
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  padding:9px 10px;
  margin:3px -4px;
  border:1px solid transparent;
  border-radius:5px;
  cursor:pointer;
  font-size:12px;
  color:#a3b0aa;
  transition:background .15s
}
.character-choice input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}
.character-choice:has(input:checked) {
  color:#e0d0af;
  border-color:#776c494c;
  background:#bfa26910
}
.character-choice:has(input:focus-visible) {
  outline:2px solid var(--gold);
  outline-offset:1px
}
.character-choice:hover {
  background:#ffffff05
}
.choice-icon {
  color:var(--role-color)
}
.choice-icon .icon,.all-character .icon {
  width:19px;
  height:19px
}
.all-character {
  color:var(--gold)
}
.choice-count {
  margin-left:auto;
  color:#718078;
  font:10px var(--mono)
}
.select-label {
  display:block;
  font-size:11px;
  color:#94a49b;
  margin-top:12px
}
select {
  appearance:auto;
  color:#bdc7c0;
  background:#121b1e;
  border:1px solid #303d39;
  border-radius:5px;
  padding:9px 8px;
  font-size:11px;
  width:100%;
  margin-top:5px;
  cursor:pointer
}
select:hover {
  border-color:#67715c
}
.tag-filter {
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.tag-filter label {
  cursor:pointer;
  position:relative
}
.tag-filter input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}
.tag-filter span {
  display:block;
  border:1px solid #35413b;
  border-radius:4px;
  padding:4px 9px;
  color:#94a199;
  font-size:11px
}
.tag-filter input:checked+span {
  border-color:#aa8e5e;
  color:#ddc99d;
  background:#cbb47b0d
}
.tag-filter input:focus-visible+span {
  outline:2px solid var(--gold);
  outline-offset:2px
}
.sidebar-note {
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin-top:31px;
  color:#6f8277;
  font-size:10px;
  line-height:1.9
}
.sidebar-note .icon {
  width:13px;
  height:13px;
  margin-top:3px
}
.results-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:20px
}
.results-heading h2 {
  font-family:var(--serif);
  font-size:21px;
  font-weight:500;
  letter-spacing:1px;
  display:flex;
  gap:12px;
  align-items:center
}
.results-heading h2 span {
  font:10px var(--mono);
  border:1px solid #3c4840;
  border-radius:4px;
  min-width:29px;
  text-align:center;
  padding:2px 6px;
  color:#a1b0a4
}
.results-heading p {
  font-size:11px;
  color:#7b8d81;
  margin-top:4px
}
.sort-label {
  font-size:11px;
  color:#a4b3a8;
  white-space:nowrap;
  padding-top:7px
}
.active-filters {
  display:flex;
  flex-wrap:wrap;
  gap:6px
}
.active-filters:not(:empty) {
  margin-bottom:15px
}
.filter-chip {
  font-size:11px;
  color:var(--gold);
  background:#d1b37a0c;
  border:1px solid #d1b37a30;
  border-radius:4px;
  padding:5px 8px;
  display:flex;
  align-items:center;
  gap:6px
}
.filter-chip .icon {
  width:12px;
  height:12px
}
.seed-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px
}
.seed-card {
  background:linear-gradient(145deg,#1b2426,#171f22);
  border:1px solid #303c37;
  border-radius:7px;
  padding:20px 19px 12px;
  position:relative;
  overflow:hidden;
  min-width:0;
  transition:border-color .2s,box-shadow .2s,transform .2s;
  animation:card-in .28s both;
  animation-delay:calc(var(--card-order,0)*25ms)
}
.seed-card:before {
  content:"";
  position:absolute;
  top:0;
  left:19px;
  right:19px;
  height:1px;
  background:linear-gradient(90deg,var(--role-color),transparent);
  opacity:.4
}
.seed-card:hover {
  border-color:#69715a;
  box-shadow:0 9px 25px #0002;
  transform:translateY(-2px)
}
.card-role {
  display:flex;
  gap:10px;
  align-items:center
}
.role-emblem {
  width:38px;
  height:42px;
  display:grid;
  place-items:center;
  color:var(--role-color);
  border:1px solid color-mix(in srgb,var(--role-color) 35%,transparent);
  background:color-mix(in srgb,var(--role-color) 6%,transparent);
  border-radius:5px 5px 13px 13px
}
.role-emblem .icon {
  width:23px;
  height:23px
}
.card-role small {
  display:block;
  font-size:7px;
  letter-spacing:1.5px;
  color:var(--role-color);
  margin-bottom:2px
}
.card-role h3 {
  font-size:14px;
  font-weight:600;
  letter-spacing:.5px
}
.ascension {
  margin-left:auto;
  color:#a6afa2;
  border:1px solid #435044;
  font:9px var(--mono);
  padding:3px 5px;
  border-radius:3px;
  white-space:nowrap
}
.card-description {
  height:65px;
  margin-top:17px;
  color:#b9c3bb;
  font-size:12px;
  line-height:1.9
}
.card-description a {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere
}
.card-description a:hover {
  color:#e1d0aa
}
.card-tags {
  display:flex;
  gap:5px;
  min-height:23px;
  overflow:hidden;
  align-items:start
}
.card-tags>span,.tag,.channel-tag {
  font-size:9px;
  padding:2px 6px;
  border:1px solid #3c4840;
  background:#ffffff02;
  border-radius:3px;
  color:#9dab9f;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  line-height:1.6
}
.channel-tag {
  border-color:#66857640!important;
  background:#6589770c!important;
  color:#a2bca8!important
}
.channel-tag.beta {
  border-color:#b8a16640!important;
  color:#c4b78b!important;
  background:#baa16709!important
}
.card-environment {
  margin:11px 0 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  color:#83978a;
  font-size:9px
}
.card-environment>span:first-child {
  font-family:var(--mono)
}
.mod-state {
  color:#748a7a;
  font-size:9px
}
.card-seed {
  background:#111a1c;
  border:1px solid #2a3932;
  border-radius:4px;
  padding:8px 9px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#d3cfbb
}
.card-seed>.icon {
  width:13px;
  height:13px;
  color:#867a5f
}
.card-seed code {
  font:11px/1.6 var(--mono);
  letter-spacing:.65px;
  overflow-wrap:anywhere;
  min-width:0
}
.card-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 0 0;
  margin-top:3px;
  gap:7px
}
.card-view {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  color:var(--gold)
}
.card-view .icon {
  width:15px;
  height:15px;
  transition:transform .2s
}
.card-view:hover .icon {
  transform:translateX(3px)
}
.copy-button {
  padding:5px 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid #3a483d;
  border-radius:4px;
  color:#a8b9ac;
  font-size:10px;
  min-width:80px
}
.copy-button:hover {
  border-color:#9a8d65;
  color:var(--gold)
}
.copy-button .icon {
  width:12px;
  height:12px
}
.copied {
  color:#a2cfaf!important;
  border-color:#7b9c71!important
}
.card-date {
  display:block;
  font-size:8px;
  color:#5e7566;
  letter-spacing:.4px;
  margin-top:15px;
  padding-top:10px;
  border-top:1px solid #2b393128
}
.pagination {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:23px 0 0;
  color:#718577;
  font-size:10px
}
.pagination>div {
  display:flex;
  align-items:center;
  gap:15px;
  font:11px var(--mono)
}
.page-button {
  width:30px;
  height:30px;
  border:1px solid #36443a;
  border-radius:4px;
  display:grid;
  place-items:center
}
.page-button .icon {
  width:14px;
  height:14px
}
.page-button:hover:not(:disabled) {
  color:var(--gold);
  border-color:var(--gold)
}
.empty-state {
  padding:65px 25px;
  min-height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  border:1px dashed #38473e;
  border-radius:7px;
  gap:15px
}
.empty-state>.icon {
  width:34px;
  height:34px;
  color:#8e9a7e;
  margin-bottom:4px
}
.empty-state h2 {
  font-size:17px;
  font-weight:500;
  color:#c6cfbf
}
.empty-state p {
  font-size:12px;
  color:#829684;
  max-width:500px
}
.empty-state .button {
  font-size:11px;
  margin-top:8px
}
.skeleton {
  height:338px;
  pointer-events:none
}
.skeleton div {
  height:14px;
  margin:15px 0;
  background:linear-gradient(90deg,#25332c,#2e3d33,#25332c);
  background-size:200%;
  animation:shimmer 1.6s infinite;
  border-radius:4px
}
.skeleton div:nth-child(2) {
  width:70%;
  height:33px
}
.skeleton div:nth-child(3) {
  margin-top:40px
}
.detail-page {
  padding-top:29px
}
.back-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#879a8c;
  font-size:11px
}
.back-link:hover {
  color:var(--gold)
}
.back-link .icon {
  width:15px;
  height:15px
}
.detail-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:26px 0 30px;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:28px
}
.detail-title {
  display:flex;
  align-items:center;
  gap:17px;
  min-width:0
}
.detail-role {
  color:var(--role-color);
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--role-color) 35%,transparent);
  background:color-mix(in srgb,var(--role-color) 6%,transparent);
  width:57px;
  height:65px;
  border-radius:7px 7px 19px 19px;
  flex-shrink:0
}
.detail-role .icon {
  width:34px;
  height:34px
}
.dossier-id {
  color:#61746b;
  letter-spacing:1px
}
.detail-title h1 {
  font:500 26px/1.8 var(--serif);
  letter-spacing:1px
}
.detail-title h1 span {
  font:400 15px var(--font);
  color:#8ca08f;
  letter-spacing:0;
  margin-left:8px
}
.detail-title>div>p:last-child {
  color:#84998a;
  font-size:10px
}
.detail-title b {
  font-weight:400;
  color:#526b59;
  margin:0 6px
}
.detail-copy {
  display:flex;
  align-items:center;
  gap:17px;
  flex-shrink:0
}
.detail-copy code {
  font:13px/1.6 var(--mono);
  letter-spacing:1px;
  color:#d4c9ac;
  max-width:300px;
  overflow-wrap:anywhere
}
.detail-copy .button {
  font-size:12px;
  padding:9px 15px;
  min-height:39px
}
.detail-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 262px;
  gap:22px;
  align-items:start
}
.map-board {
  border:1px solid #3c473b;
  background:#18211f;
  border-radius:8px;
  overflow:hidden;
  min-width:0
}
.board-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:21px 22px 17px
}
.board-header .eyebrow {
  font-size:8px;
  letter-spacing:1.7px;
  color:#8f9d79
}
.board-header h2 {
  display:flex;
  align-items:center;
  gap:10px;
  font:500 22px/1.6 var(--serif);
  margin-top:3px;
  letter-spacing:1px
}
.preview-badge {
  font:10px var(--font);
  color:#b6a77c;
  border:1px solid #796c464d;
  padding:3px 6px;
  border-radius:3px
}
.map-meta {
  font:9px var(--mono);
  color:#7c947f;
  text-align:right
}
.preview-notice {
  display:flex;
  align-items:flex-start;
  gap:7px;
  padding:10px 14px;
  margin:0 18px;
  background:#baa27408;
  border:1px solid #baa2741c;
  border-radius:4px;
  font-size:10px;
  line-height:1.9;
  color:#a9a087
}
.preview-notice .icon {
  width:13px;
  height:13px;
  margin-top:3px;
  color:#ac956b
}
.act-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.act-panel {
  min-width:0;
  border-right:1px solid #8a916623;
  background:radial-gradient(ellipse at 50% 45%,#92805708,transparent 70%),linear-gradient(#1b231d,#20281e 50%,#19221b)
}
.act-panel:last-child {
  border-right:0
}
.act-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  padding:17px 12px 12px;
  min-height:70px;
  border-bottom:1px solid #969b6710
}
.act-header>div {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}
.act-roman {
  font:italic 24px Georgia,serif;
  color:#8f8c59;
  min-width:18px
}
.act-header strong {
  font-size:12px;
  color:#c7c4a5;
  font-weight:500
}
.act-header small {
  display:block;
  color:#7b8e6c;
  font-size:8px;
  letter-spacing:.3px;
  margin-top:1px
}
.act-en {
  font-size:7px
}
.act-header .icon-button {
  width:26px;
  height:26px
}
.act-header .icon-button .icon {
  width:13px;
  height:13px
}
.map-surface {
  overflow:hidden;
  position:relative
}
.map-svg {
  display:block;
  width:100%;
  height:auto;
  max-height:680px;
  touch-action:pan-y;
  user-select:none
}
.map-svg.dragging {
  cursor:grabbing;
  touch-action:none
}
.map-svg:not(.dragging) {
  cursor:grab
}
.map-edge {
  fill:none;
  stroke:#715935a0;
  stroke-width:1.3;
  stroke-dasharray:2 3;
  transition:stroke .15s,opacity .15s
}
.map-edge.hovered {
  stroke:#4d361d;
  stroke-width:2;
  stroke-dasharray:none
}
.map-edge.in-route {
  stroke:#694220;
  stroke-width:2.8;
  stroke-dasharray:none;
  filter:drop-shadow(0 0 3px #d7b76c45)
}
.map-edge.available {
  stroke:#614523ad;
  stroke-width:1.8
}
.floor-guide text {
  fill:#625332;
  font:7px var(--mono);
  opacity:.6
}
.floor-guide path {
  stroke:#654f2c0a;
  stroke-dasharray:1 5
}
.map-direction {
  font:7px var(--font);
  fill:#695031;
  letter-spacing:.8px
}
.map-node {
  color:var(--node-color);
  cursor:pointer;
  outline:none;
  transition:opacity .15s
}
.node-hit {
  fill:transparent;
  stroke:none
}
.node-ring {
  fill:transparent;
  stroke:transparent;
  stroke-width:.8;
  transition:stroke .15s,fill .15s
}
.map-node>.icon {
  width:18px;
  height:18px;
  pointer-events:none
}
.map-node:hover .node-ring,.map-node:focus-visible .node-ring {
  stroke:var(--gold);
  stroke-width:2;
  fill:#ebd09b33
}
.map-node:focus-visible {
  filter:drop-shadow(0 0 4px #d1b37a)
}
.map-node.in-route .node-ring {
  stroke:#694220;
  stroke-width:1.7;
  fill:transparent
}
.map-node.available .node-ring {
  stroke:#6a512f90;
  stroke-width:1.3
}
.map-node.inspected .node-ring {
  stroke:#50381b;
  stroke-width:2.4
}
.selection-dot {
  fill:#e1bf76;
  stroke:#202a20;
  stroke-width:1.5;
  opacity:0
}
.map-node.in-route .selection-dot {
  opacity:1
}
.map-node.legend-dimmed {
  opacity:.2
}
.map-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin:0 10px 12px;
  padding-top:7px;
  border-top:1px solid #8e986924
}
.map-controls .icon-button {
  font-size:15px;
  width:25px;
  height:25px
}
.map-fit {
  font-size:8px;
  color:#9baa7c;
  padding:5px
}
.map-scale {
  font:7px var(--mono);
  color:#687e5b;
  margin-left:5px
}
.map-legend {
  display:flex;
  justify-content:center;
  gap:5px;
  padding:12px 10px;
  background:#18211b;
  border-top:1px solid #414d372b;
  flex-wrap:wrap
}
.map-legend button {
  color:#a6b292;
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 6px;
  border:1px solid transparent;
  border-radius:4px;
  font-size:9px
}
.map-legend .icon {
  color:var(--node-color);
  width:13px;
  height:13px
}
.map-legend button:hover,.map-legend button[aria-pressed=true] {
  border-color:#6d795744;
  background:#c9bd760b
}
.map-bottom-hint {
  padding:10px 15px;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:8px;
  color:#718760;
  border-top:1px solid #414d372b
}
.map-bottom-hint>.icon {
  width:12px;
  height:12px
}
.map-bottom-hint .text-button {
  font-size:9px;
  margin-left:auto
}
.act-tabs {
  display:none
}
.info-panel {
  border:1px solid #324037;
  border-radius:6px;
  background:linear-gradient(130deg,#1a2322,#161f20);
  padding:19px 19px 16px;
  margin-bottom:16px
}
.info-panel>.eyebrow,.route-heading .eyebrow {
  font-size:8px;
  letter-spacing:1.5px;
  color:#7e987f
}
.info-panel h2 {
  font:500 17px/1.7 var(--serif);
  letter-spacing:1px;
  margin:4px 0 15px
}
.detail-tags {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:15px
}
.full-description {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:#a6b7a8;
  line-height:2;
  font-size:11px;
  max-height:360px;
  overflow:auto
}
.seed-facts {
  margin:18px 0 0;
  padding-top:12px;
  border-top:1px solid #35463877
}
.seed-facts>div {
  display:flex;
  justify-content:space-between;
  gap:14px;
  font-size:10px;
  padding:6px 0
}
.seed-facts dt {
  color:#708b77;
  flex-shrink:0
}
.seed-facts dd {
  color:#b0c0ac;
  text-align:right;
  margin:0;
  overflow-wrap:anywhere;
  min-width:0
}
.rule-list {
  border-top:1px solid #35463877;
  margin-top:10px;
  padding-top:10px;
  overflow-wrap:anywhere;
  font-size:10px;
  color:#95a88e
}
.rule-list small {
  color:#708b77
}
.node-placeholder {
  color:#6c866e;
  display:flex;
  gap:13px;
  align-items:center;
  padding:6px 0 12px;
  font-size:10px;
  line-height:1.9
}
.node-placeholder>.icon {
  width:30px;
  height:30px;
  color:#647f65
}
.node-type {
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--node-color)
}
.node-type>.icon {
  width:26px;
  height:26px
}
.node-type>span {
  font-size:13px
}
.node-type small {
  display:block;
  font-size:9px;
  color:#7e967c;
  margin-top:4px
}
.node-selection>p {
  font-size:10px;
  line-height:1.9;
  color:#8ca185;
  margin-top:13px
}
.route-heading {
  display:flex;
  justify-content:space-between;
  align-items:start
}
.route-heading h2 {
  margin-bottom:10px
}
.route-heading .icon-button {
  width:26px;
  height:26px
}
.route-total {
  color:#8ca485;
  font-size:10px;
  margin-bottom:14px
}
.route-total strong {
  color:var(--gold);
  font:16px var(--mono);
  margin:0 3px
}
.route-counts {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px 18px
}
.route-counts>div {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:#8fa785
}
.route-counts .icon {
  width:14px;
  height:14px;
  color:var(--node-color)
}
.route-counts strong {
  margin-left:auto;
  color:#c0c6a4;
  font:11px var(--mono)
}
.route-note {
  font-size:8px;
  color:#5c795e;
  border-top:1px solid #3349325c;
  padding-top:12px;
  margin-top:16px
}
.map-loading {
  height:640px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:17px;
  color:#879f7d
}
.map-loading h3 {
  font:500 20px var(--serif);
  letter-spacing:2px;
  color:#c8c5a4
}
.map-loading p {
  font-size:11px;
  color:#7d9575
}
.loading-orbit {
  width:38px;
  height:38px;
  border:1px solid #a7a06732;
  border-top-color:#d0b781;
  border-radius:50%;
  animation:spin 1.2s linear infinite;
  position:relative;
  margin-bottom:9px
}
.loading-orbit:after {
  content:"✧";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:22px;
  color:#b8a46d
}
.map-board .empty-state {
  height:640px;
  border:0;
  border-radius:0
}
.detail-page>.map-loading {
  height:70vh
}
.map-board .empty-state h2 {
  font-size:16px
}
dialog {
  padding:0;
  background:#19231d;
  border:1px solid #737853;
  color:var(--text);
  border-radius:9px;
  width:min(760px,92vw);
  max-height:94vh;
  box-shadow:0 25px 100px #000a;
  overflow:auto
}
dialog::backdrop {
  background:#07100ccc;
  backdrop-filter:blur(6px)
}
.dialog-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 23px;
  border-bottom:1px solid #52603b4a;
  position:sticky;
  top:0;
  z-index:2;
  background:#19231df5
}
.dialog-header h2 {
  font:500 19px/1.7 var(--serif);
  letter-spacing:1px;
  margin-top:4px
}
.dialog-header .eyebrow {
  font-size:8px
}
#dialog-map {
  padding:0 20px
}
.expanded-panel {
  border:0;
  background:radial-gradient(ellipse,#6e784e0d,transparent 70%);
  max-width:520px;
  margin:auto
}
.expanded-panel .act-header {
  padding:12px 14px
}
.expanded-panel .map-svg {
  height:min(66vh,790px);
  max-height:none;
  touch-action:none
}
.expanded-panel .act-header small {
  font-size:10px
}
.expanded-panel .act-header .act-en {
  font-size:9px
}
.expanded-panel .map-fit {
  font-size:10px
}
.expanded-panel .map-scale {
  font-size:9px
}
.dialog-help {
  text-align:center;
  color:#829768;
  font-size:10px;
  padding:9px 10px 17px
}
.about-page {
  max-width:1100px;
  padding-top:65px
}
.about-page>h1 {
  font:500 40px/1.65 var(--serif);
  letter-spacing:2px;
  margin-top:20px
}
.about-page>h1 span {
  color:#cbbb91
}
.about-lead {
  margin-top:18px;
  font-size:13px;
  color:#97aa9b;
  line-height:2
}
.guide-steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:45px 0 30px
}
.guide-steps article {
  border:1px solid #394638;
  background:linear-gradient(145deg,#202a24,#17211f);
  border-radius:7px;
  padding:26px;
  position:relative
}
.guide-steps article>span {
  position:absolute;
  right:20px;
  top:20px;
  font:italic 30px Georgia,serif;
  color:#69775260
}
.guide-steps article>.icon {
  width:28px;
  height:28px;
  color:var(--gold);
  margin-bottom:23px
}
.guide-steps h2 {
  font:500 20px var(--serif);
  margin-bottom:14px
}
.guide-steps p,.guide-notice p {
  font-size:12px;
  line-height:2;
  color:#93a78e
}
.guide-notice {
  padding:24px;
  border:1px solid #374733;
  background:#17201b;
  border-radius:6px;
  margin-bottom:20px
}
.guide-notice h2 {
  font:500 17px var(--serif);
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:15px;
  color:#c1c3a1
}
.guide-notice .icon {
  color:var(--gold);
  width:17px;
  height:17px
}
.guide-notice p+p {
  margin-top:12px
}
.about-page>.button {
  margin-top:12px
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
@keyframes shimmer {
  to {
    background-position:-200% 0
  }
}
@keyframes card-in {
  from {
    opacity:0;
    transform:translateY(6px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@media(min-width:1600px) {
  .site-header {
    padding-left:70px;
    padding-right:70px
  }
  .hall-hero {
    margin-top:40px
  }
  .hall-layout {
    grid-template-columns:230px minmax(0,1fr);
    gap:36px
  }
  .seed-card {
    padding:23px 22px 13px
  }
  .card-description {
    font-size:13px
  }
  .card-role h3 {
    font-size:15px
  }
  .card-seed code {
    font-size:12px
  }
  .card-footer {
    padding-top:16px
  }
  .card-tags>span {
    font-size:10px
  }
  .card-environment {
    font-size:10px
  }
  .card-view {
    font-size:12px
  }
  .copy-button {
    font-size:11px;
    padding:6px 8px
  }
  .card-date {
    font-size:9px
  }
  .detail-layout {
    grid-template-columns:minmax(0,1fr) 280px
  }
  .info-panel {
    padding:22px
  }
  .map-bottom-hint {
    font-size:10px
  }
}
@media(max-width:1220px) {
  .page {
    padding:0 32px
  }
  .site-header {
    padding:0 32px;
    gap:45px
  }
  .site-footer {
    padding-left:32px;
    padding-right:32px
  }
  .hall-layout {
    grid-template-columns:185px minmax(0,1fr);
    gap:23px
  }
  .filter-sidebar {
    padding-right:17px
  }
  .seed-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .hall-hero h1 {
    font-size:32px
  }
  .hero-art {
    right:-20px;
    opacity:.8
  }
  .detail-page {
    padding-top:25px
  }
  .detail-layout {
    grid-template-columns:minmax(0,1fr) 230px;
    gap:16px
  }
  .detail-copy {
    gap:10px
  }
  .detail-copy code {
    font-size:11px;
    max-width:190px
  }
  .detail-title h1 {
    font-size:23px
  }
  .detail-title h1 span {
    font-size:12px
  }
  .act-header .act-en {
    display:none
  }
  .info-panel {
    padding:16px
  }
  .map-bottom-hint {
    flex-wrap:wrap
  }
  .act-header {
    padding:12px 8px
  }
  .preview-notice {
    margin:0 12px
  }
  .act-header .icon-button {
    width:21px
  }
  .map-meta {
    font-size:8px
  }
  .board-header {
    padding:17px
  }
}
@media(max-width:940px) {
  .detail-heading {
    align-items:start
  }
  .detail-copy {
    flex-direction:column;
    align-items:end;
    padding-top:8px
  }
  .detail-layout {
    grid-template-columns:minmax(0,1fr)
  }
  .detail-sidebar {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:15px
  }
  .detail-sidebar>.info-panel:first-child {
    grid-row:span 2
  }
  .info-panel {
    margin-bottom:0
  }
  .route-panel {
    grid-column:2
  }
  .map-svg {
    max-height:620px
  }
  .act-header .act-en {
    display:inline
  }
  .map-bottom-hint {
    font-size:10px
  }
  .map-meta {
    font-size:10px
  }
  .about-page {
    padding-top:45px
  }
  .guide-steps {
    gap:14px
  }
  .guide-steps article {
    padding:20px
  }
}
@media(max-width:740px) {
  .site-header {
    height:75px;
    padding:0 22px;
    gap:30px
  }
  .brand {
    font-size:16px;
    gap:9px
  }
  .brand-mark {
    width:24px;
    height:32px
  }
  .brand small {
    font-size:7px
  }
  .site-header nav {
    gap:22px
  }
  .site-header nav a {
    font-size:11px
  }
  .local-badge {
    font-size:0;
    gap:0
  }
  .local-badge i {
    width:5px;
    height:5px
  }
  .page {
    padding:0 22px
  }
  .site-footer {
    margin-top:38px;
    padding:21px 22px;
    flex-direction:column;
    gap:6px;
    font-size:9px
  }
  .hall-hero {
    margin-top:25px;
    padding:24px 22px 0;
    min-height:223px
  }
  .hall-hero .eyebrow {
    font-size:8px;
    letter-spacing:1.5px
  }
  .hall-hero h1 {
    font-size:29px;
    max-width:65%;
    line-height:1.5;
    margin-top:14px
  }
  .hall-hero h1 span {
    display:block
  }
  .hero-description {
    font-size:10px;
    max-width:68%;
    line-height:1.9
  }
  .hero-art {
    width:260px;
    height:210px;
    right:-54px;
    top:4px;
    opacity:.6
  }
  .hero-bottom {
    font-size:9px;
    gap:17px;
    margin-top:21px;
    padding:11px 0
  }
  .hero-bottom .icon {
    width:12px;
    height:12px
  }
  .hero-bottom .archive-total {
    font-size:8px
  }
  .hall-tools {
    margin:20px 0
  }
  .search-box {
    gap:9px;
    padding:5px 6px 5px 12px
  }
  .search-box input {
    font-size:11px
  }
  .search-box>.icon {
    width:17px;
    height:17px
  }
  .search-box kbd {
    display:none
  }
  .search-box .button {
    padding:5px 13px;
    font-size:10px
  }
  .filter-toggle {
    display:flex;
    gap:5px;
    min-height:42px;
    padding:7px 11px;
    border-color:#35443c;
    color:#c0c7b2;
    font-size:10px
  }
  .filter-toggle .icon {
    width:16px;
    height:16px
  }
  .hall-layout {
    display:block
  }
  .filter-sidebar {
    display:none;
    border:1px solid #3d4c3d;
    border-radius:6px;
    padding:20px;
    margin-bottom:23px;
    background:#17221e
  }
  .filter-sidebar.open {
    display:block
  }
  .filter-sidebar form {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
  }
  .filter-heading {
    grid-column:1/-1;
    margin-bottom:0
  }
  .filter-sidebar fieldset {
    margin:0;
    padding:0;
    border:0
  }
  .filter-sidebar fieldset:last-child {
    grid-column:1/-1;
    border-top:1px solid var(--line-soft);
    padding-top:20px
  }
  .filter-sidebar legend small {
    display:none
  }
  .sidebar-note {
    margin-top:20px
  }
  .results-heading h2 {
    font-size:20px
  }
  .results-heading p {
    font-size:10px
  }
  .sort-label {
    font-size:10px
  }
  .seed-grid {
    gap:13px
  }
  .seed-card {
    padding:17px 15px 10px
  }
  .card-description {
    height:62px;
    font-size:11px
  }
  .card-role {
    gap:8px
  }
  .role-emblem {
    width:31px;
    height:36px
  }
  .role-emblem .icon {
    width:20px;
    height:20px
  }
  .card-role h3 {
    font-size:12px
  }
  .card-role small {
    font-size:6px
  }
  .ascension {
    font-size:8px
  }
  .card-seed code {
    font-size:10px
  }
  .card-view {
    font-size:10px
  }
  .copy-button {
    font-size:9px;
    min-width:71px;
    padding:5px
  }
  .card-footer {
    gap:4px
  }
  .detail-page {
    padding-top:22px
  }
  .detail-heading {
    padding-top:20px;
    gap:13px;
    flex-wrap:wrap
  }
  .detail-title {
    gap:13px
  }
  .detail-role {
    width:47px;
    height:57px
  }
  .detail-role .icon {
    width:29px;
    height:29px
  }
  .detail-title h1 {
    font-size:24px
  }
  .detail-title h1 span {
    font-size:13px
  }
  .detail-copy {
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    flex:1;
    width:100%;
    padding-top:12px;
    border-top:1px solid #2c3b3159
  }
  .detail-copy code {
    font-size:13px;
    max-width:70%
  }
  .detail-copy .button {
    font-size:10px;
    min-height:36px
  }
  .detail-title .eyebrow {
    font-size:8px
  }
  .map-meta {
    font-size:8px;
    max-width:125px;
    line-height:1.8
  }
  .board-header h2 {
    font-size:21px
  }
  .preview-notice {
    font-size:9px
  }
  .act-tabs {
    display:flex;
    padding:9px 12px 0;
    gap:6px;
    background:#19231e;
    border-bottom:1px solid #45503b4d
  }
  .act-tabs button {
    flex:1;
    padding:8px 10px;
    color:#859973;
    border-bottom:2px solid transparent;
    font-size:11px
  }
  .act-tabs button[aria-selected=true] {
    color:#d4c492;
    border-color:#c5af6e;
    background:linear-gradient(transparent,#c1a46a09)
  }
  .act-grid {
    display:block
  }
  .act-grid>.act-panel {
    display:none;
    border-right:0
  }
  .act-grid[data-active="0"]>.act-panel:nth-child(1),.act-grid[data-active="1"]>.act-panel:nth-child(2),.act-grid[data-active="2"]>.act-panel:nth-child(3) {
    display:block
  }
  .act-header {
    padding:15px 19px
  }
  .act-header .act-en {
    display:inline
  }
  .act-header strong {
    font-size:13px
  }
  .act-header small {
    font-size:9px
  }
  .act-header .icon-button {
    width:30px;
    height:30px
  }
  .act-header .icon-button .icon {
    width:16px;
    height:16px
  }
  .map-svg {
    max-height:710px;
    min-height:540px;
    touch-action:pan-y
  }
  .map-legend {
    gap:5px;
    padding:12px
  }
  .map-legend button {
    font-size:10px
  }
  .map-legend .icon {
    width:15px;
    height:15px
  }
  .map-controls {
    padding:10px 0;
    margin:0 20px
  }
  .map-fit {
    font-size:10px
  }
  .map-scale {
    font-size:9px
  }
  .map-controls .icon-button {
    width:30px;
    height:30px;
    font-size:18px
  }
  .map-bottom-hint {
    font-size:9px;
    padding:12px;
    gap:5px
  }
  .detail-sidebar {
    grid-template-columns:1fr 1fr;
    gap:13px
  }
  .info-panel {
    padding:17px
  }
  .info-panel>.eyebrow,.route-heading .eyebrow {
    font-size:7px
  }
  .info-panel h2 {
    font-size:17px
  }
  .full-description {
    font-size:10px
  }
  .seed-facts>div {
    font-size:9px
  }
  .route-counts {
    gap:9px
  }
  .route-counts>div {
    font-size:9px;
    gap:4px
  }
  .route-counts .icon {
    width:12px;
    height:12px
  }
  .node-placeholder {
    flex-direction:column;
    align-items:start;
    font-size:10px
  }
  .node-selection>p {
    font-size:9px
  }
  .node-type {
    gap:8px
  }
  .node-type>span {
    font-size:11px
  }
  .node-type>.icon {
    width:22px;
    height:22px
  }
  .map-loading {
    height:640px
  }
  .about-page {
    padding-top:38px
  }
  .about-page>h1 {
    font-size:32px
  }
  .about-lead {
    font-size:11px
  }
  .guide-steps {
    grid-template-columns:1fr;
    gap:14px;
    margin-top:30px
  }
  .guide-steps article {
    padding:22px
  }
  .guide-steps article>.icon {
    margin-bottom:14px;
    width:23px;
    height:23px
  }
  .guide-steps h2 {
    font-size:18px
  }
  .guide-notice {
    padding:20px
  }
  .guide-notice p {
    font-size:11px
  }
  .guide-notice h2 {
    font-size:16px
  }
  .expanded-panel .map-svg {
    min-height:0;
    height:65vh
  }
  dialog {
    width:94vw
  }
  .dialog-header {
    padding:15px 18px
  }
  .dialog-header h2 {
    font-size:17px
  }
  #dialog-map {
    padding:0 5px
  }
}
@media(max-width:450px) {
  .site-header {
    padding:0 18px;
    gap:24px
  }
  .brand {
    font-size:15px;
    letter-spacing:1px
  }
  .brand small {
    font-size:6px;
    letter-spacing:1.9px
  }
  .site-header nav {
    gap:18px
  }
  .site-header nav a {
    font-size:10px
  }
  .local-badge {
    display:none
  }
  .page {
    padding-left:18px;
    padding-right:18px
  }
  .hall-hero {
    padding:21px 18px 0
  }
  .hall-hero h1 {
    font-size:27px;
    max-width:75%
  }
  .hero-description {
    max-width:75%
  }
  .hero-art {
    right:-80px;
    opacity:.38
  }
  .hall-hero .eyebrow {
    font-size:7px;
    letter-spacing:1.2px;
    gap:7px
  }
  .hero-bottom {
    gap:11px;
    font-size:8px
  }
  .hero-bottom .archive-total {
    font-size:7px
  }
  .hero-bottom .icon {
    width:11px;
    height:11px
  }
  .seed-grid {
    grid-template-columns:1fr;
    gap:16px
  }
  .seed-card {
    padding:21px 21px 12px
  }
  .card-role h3 {
    font-size:15px
  }
  .card-role small {
    font-size:8px
  }
  .role-emblem {
    width:38px;
    height:44px
  }
  .role-emblem .icon {
    width:25px;
    height:25px
  }
  .ascension {
    font-size:10px
  }
  .card-description {
    font-size:13px;
    height:65px;
    margin-top:19px
  }
  .card-tags>span {
    font-size:10px
  }
  .card-environment {
    font-size:10px;
    margin:12px 0 15px
  }
  .mod-state {
    font-size:10px
  }
  .card-seed {
    padding:10px
  }
  .card-seed code {
    font-size:12px
  }
  .card-view {
    font-size:12px
  }
  .copy-button {
    font-size:11px;
    padding:6px 9px;
    min-width:90px
  }
  .copy-button .icon {
    width:14px;
    height:14px
  }
  .card-date {
    font-size:9px
  }
  .filter-toggle {
    padding:7px 9px;
    font-size:9px
  }
  .detail-title h1 {
    font-size:22px
  }
  .detail-title h1 span {
    font-size:12px
  }
  .detail-role {
    width:43px;
    height:52px
  }
  .detail-copy code {
    font-size:12px
  }
  .detail-sidebar {
    grid-template-columns:1fr
  }
  .detail-sidebar>.info-panel:first-child {
    grid-row:auto
  }
  .route-panel {
    grid-column:auto
  }
  .info-panel {
    padding:21px
  }
  .info-panel>.eyebrow,.route-heading .eyebrow {
    font-size:8px
  }
  .full-description {
    font-size:12px
  }
  .seed-facts>div {
    font-size:11px
  }
  .node-placeholder {
    flex-direction:row;
    align-items:center;
    font-size:11px
  }
  .node-selection>p {
    font-size:11px
  }
  .route-counts {
    grid-template-columns:repeat(3,1fr);
    gap:14px
  }
  .route-counts>div {
    font-size:11px
  }
  .route-note {
    font-size:10px
  }
  .map-bottom-hint {
    font-size:8px
  }
  .map-bottom-hint .text-button {
    font-size:8px
  }
  .preview-notice {
    font-size:9px
  }
  .site-footer {
    padding-left:18px;
    padding-right:18px
  }
  .about-page {
    padding-top:35px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
@media(min-width:741px) {
  .card-description {
    font-size:13px
  }
  .card-role small {
    font-size:8px
  }
  .card-tags>span {
    font-size:10px
  }
  .card-environment,.mod-state {
    font-size:10px
  }
  .card-seed code {
    font-size:12px
  }
  .card-view {
    font-size:12px
  }
  .copy-button {
    font-size:11px;
    min-width:86px
  }
  .card-date {
    font-size:10px;
    color:#829789
  }
  .select-label {
    font-size:12px
  }
  .select-label select {
    font-size:12px
  }
  .sidebar-note {
    font-size:11px;
    color:#8c9c90
  }
  .results-heading p {
    font-size:12px
  }
  .filter-sidebar legend {
    font-size:12px
  }
  .filter-sidebar legend small {
    font-size:9px
  }
  .tag-filter span {
    font-size:12px
  }
  .full-description {
    font-size:13px;
    color:#bac7b9
  }
  .seed-facts>div {
    font-size:12px
  }
  .seed-facts dt {
    color:#91a28e
  }
  .preview-notice {
    font-size:11px;
    color:#b9b097
  }
  .map-meta {
    font-size:10px
  }
  .act-header small {
    font-size:10px
  }
  .act-en {
    font-size:8px
  }
  .map-legend button {
    font-size:11px
  }
  .map-bottom-hint {
    font-size:10px
  }
  .node-placeholder,.node-selection>p,.route-total,.route-counts>div {
    font-size:11px
  }
  .route-note {
    font-size:10px;
    color:#82957a
  }
  .map-fit {
    font-size:10px
  }
  .map-scale {
    font-size:9px
  }
  .detail-title>div>p:last-child {
    font-size:12px
  }
  .pagination {
    font-size:11px
  }
  .sort-label {
    font-size:12px
  }
  .card-date,.card-environment,.mod-state {
    color:#90a392
  }
}

/* Keep floor spacing readable: focused act by default; overview scrolls instead of shrinking. */
.map-view-switch { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:14px; border-bottom:1px solid #969b6728; }
.map-view-switch .act-tabs { display:flex; gap:6px; flex:1; }
.map-view-switch button { border:1px solid #8a91663b; background:#18241d; color:#b6b99b; border-radius:6px; padding:10px 14px; font:inherit; font-size:12px; cursor:pointer; }
.map-view-switch button[aria-selected=true],.map-view-switch button[aria-pressed=true] { background:#34422a; color:#e1d6a5; border-color:#9b965d; }
.map-scroll { overflow-x:auto; }
.act-grid[data-view=focus] { display:block; }
.act-grid[data-view=focus] > .act-panel { display:none; max-width:560px; margin-inline:auto; border:0; }
.act-grid[data-view=focus][data-active="0"] > .act-panel:nth-child(1),
.act-grid[data-view=focus][data-active="1"] > .act-panel:nth-child(2),
.act-grid[data-view=focus][data-active="2"] > .act-panel:nth-child(3) { display:block; }
.act-grid[data-view=overview] { display:grid; grid-template-columns:repeat(3,minmax(360px,1fr)); min-width:1080px; }
.act-grid[data-view=overview] > .act-panel { display:block; }
.act-panel .map-svg, .expanded-panel .map-svg { height:auto; max-height:none; }
.expanded-panel { max-width:560px; }
.original-boss-icon { pointer-events:none; }

.map-node .node-art-traveled { display:none; }
.history-circle { display:none; }
.map-node.in-route .node-art-traveled { display:inline; }
.map-node.in-route .node-art-default { display:none; }
.map-node image { pointer-events:none; }

/* Personal map annotations and high-contrast route circles. */
.annotation-tools { position:sticky; top:0; z-index:4; display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding:10px 12px; background:#1b2822f5; border-block:1px solid #8a916638; backdrop-filter:blur(10px); }
.annotation-tools button,.annotation-tools select { border:1px solid #77856870; border-radius:5px; background:#15221c; color:#d1d2b9; padding:6px 8px; font:inherit; font-size:11px; cursor:pointer; min-height:30px; }
.annotation-tools button[aria-pressed=true] { background:#485139; color:#fff0bf; border-color:#d8bc74; box-shadow:inset 0 0 0 1px #d8bc7440; }
.annotation-tools button:disabled { opacity:.35; cursor:default; }
.annotation-tools button:focus-visible,.annotation-tools select:focus-visible { outline:2px solid #e8cf8b; outline-offset:2px; }
.annotation-tools .ink-color { padding:4px; width:27px; min-height:30px; display:grid; place-items:center; }
.ink-color span { display:block; width:15px; height:15px; border-radius:50%; background:var(--ink-color); border:1px solid #eee2bf90; }
.ink-separator { width:1px; height:21px; background:#83937250; margin:0 2px; }
.annotation-tools .ink-help { flex-basis:100%; color:#a4b397; font-size:10px; line-height:1.5; }
.map-ink { pointer-events:none; }
.map-ink path { fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:.94; }
[data-tool=draw] .map-svg,[data-tool=draw] .map-node { cursor:crosshair; touch-action:none; }
[data-tool=erase] .map-svg,[data-tool=erase] .map-node { cursor:cell; touch-action:none; }
[data-tool=pan] .map-svg,[data-tool=pan] .map-node { cursor:grab; touch-action:none; }
.node-ring-halo,.node-mark { fill:none; stroke:transparent; pointer-events:none; }
.node-ring-halo { stroke-width:6.5; }
.map-node.in-route .node-ring-halo,.map-node.marked .node-ring-halo { stroke:#fff2d8; }
.map-node.in-route .node-ring { stroke:#ac263b; stroke-width:3.4; fill:#b82f3d12; stroke-dasharray:none; }
.map-node.available:not(.in-route) .node-ring { stroke:#185967; stroke-width:2; stroke-dasharray:3 2; }
.map-node.available:not(.in-route) .node-ring-halo { stroke:#fff2d899; stroke-width:4.5; }
.node-mark { opacity:0; stroke:var(--mark-color); stroke-width:3.2; }
.map-node.marked .node-mark { opacity:1; }
.map-node.marked.in-route .node-mark { stroke-dasharray:3 3; }
.map-edge.in-route { stroke:#ac263b; stroke-width:3.2; stroke-dasharray:none; filter:none; }
.map-edge.map-edge-halo { stroke:transparent; filter:none; pointer-events:none; }
.map-edge.map-edge-halo.in-route { stroke:#fff2d8; stroke-width:6.5; }
@media(max-width:440px) { .annotation-tools { padding:8px; gap:4px; } .annotation-tools button { padding-inline:7px; } }
/* Sticky tools follow the focused act; overview has its own scrollable map canvas. */
.map-board { overflow:clip; }
.map-scroll:has(.act-grid[data-view=focus]) { overflow:visible; }
.map-scroll:has(.act-grid[data-view=overview]) { max-height:80vh; overflow:auto; }

.annotation-tools select { width:48px; min-width:48px; flex:0 0 48px; padding-inline:4px; }

.annotation-tools .game-drawing-tool { position:relative; width:38px; height:36px; padding:2px; flex:0 0 38px; }
.drawing-tool-icon,.drawing-tool-glow { display:block; width:30px; height:30px; object-fit:contain; pointer-events:none; }
.drawing-tool-glow { position:absolute; inset:2px; opacity:0; transition:opacity .12s; }
.game-drawing-tool[aria-pressed=true] .drawing-tool-glow,.game-drawing-tool:hover:not(:disabled) .drawing-tool-glow,.game-drawing-tool:focus-visible .drawing-tool-glow { opacity:1; }

/* Recorded runs use the game's brush circle; manual trial routes keep their own styling. */
.history-route-status { color:var(--muted); font-size:.82rem; line-height:1.7; margin:0; padding:12px 20px; border-bottom:1px solid var(--line); }
[data-history-toggle] { margin-left:auto; white-space:nowrap; }
[data-history-toggle][aria-pressed=true] { color:var(--gold); border-color:var(--gold); background:#c3a46e16; }
[data-history-toggle]:disabled { opacity:.45; cursor:default; }
.history-replay .annotation-tools,.history-replay .map-ink { display:none; }
.history-replay .map-node .node-ring-halo,.history-replay .map-node .node-mark,.history-replay .map-node .selection-dot { display:none; }
.history-replay .map-node.in-route .node-ring { stroke:transparent; fill:transparent; }
.history-replay .map-node:hover .node-ring,.history-replay .map-node:focus-visible .node-ring,.history-replay .map-node.inspected .node-ring { stroke:#375567; stroke-width:1.8; fill:#ffffff18; }
.history-replay .history-visited .history-circle { display:inline; opacity:.95; }
.history-replay .history-unvisited { opacity:.5; }
.history-replay .map-edge { stroke:#4d41465c; stroke-width:1.4; stroke-dasharray:2 4; }
.history-replay .map-edge.history-traveled { stroke:#2f292b; stroke-width:2.8; stroke-dasharray:2.5 5; stroke-linecap:round; filter:none; }
.history-replay .map-edge.map-edge-halo { stroke:transparent; }
.history-node-popover { position:fixed; z-index:1100; width:310px; max-width:calc(100vw - 24px); max-height:min(520px,calc(100dvh - 24px)); overflow:hidden; padding:18px 20px; margin:0; color:#f2ead9; background:linear-gradient(135deg,#23383c,#142228); border:2px solid #526e75; border-radius:6px; box-shadow:inset 0 0 0 3px #10262b,0 8px 26px #0008; pointer-events:none; font-size:.92rem; line-height:1.6; }
.history-node-popover[hidden] { display:none; }
.history-node-popover article+article,.history-node-detail article+article { border-top:1px solid #71808255; margin-top:16px; padding-top:14px; }
.history-node-popover h3,.history-node-detail h3 { margin:0 0 10px; color:#e8c576; font-size:1.2rem; }
.history-node-popover h4,.history-node-detail h4 { margin:12px 0 3px; color:#e8c576; font-size:.94rem; }
.history-node-popover p,.history-node-detail p { margin:4px 0; overflow-wrap:anywhere; }
.history-node-values { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:10px; font-variant-numeric:tabular-nums; }
.history-node-values span:first-child { color:#ee9996; }
.history-node-values span+span { color:#e8c576; }
.history-node-popover small { display:block; color:#b8c9ca; margin-top:14px; font-size:.75rem; }
.history-node-detail { max-height:660px; overflow:auto; }
@media(max-width:640px) { .map-view-switch { flex-wrap:wrap; } [data-history-toggle] { margin-left:0; } .history-route-status { padding:10px 14px; } }

.history-node-detail .history-reference-list { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:6px; }
.history-node-detail .history-reference.card-entry-compact { width:100%; margin:0; min-height:60px; }
.history-node-detail .history-item-reference { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:70px; padding:5px 2px; border:0; border-radius:0; background:transparent; color:var(--text); text-decoration:none; font-size:11px; text-align:center; line-height:1.4; }
.history-node-detail .history-item-reference>img { width:40px; height:40px; object-fit:contain; filter:drop-shadow(0 2px 3px #0008); }
.history-node-detail .history-item-reference:hover,.history-node-detail .history-item-reference:focus-visible { background:transparent; outline:0; color:var(--gold); }
.history-node-detail .history-item-reference:hover>img,.history-node-detail .history-item-reference:focus-visible>img { transform:translateY(-2px); filter:drop-shadow(0 0 5px #d1b37a88); }
.history-node-detail .history-item-reference:focus-visible>span { text-decoration:underline; text-underline-offset:3px; }
.history-monster-references { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0 7px; }
.history-monster-reference { padding:10px 6px; min-width:0; text-decoration:none; }
.history-monster-reference>img { width:100%; height:82px; object-fit:contain; }
.history-monster-reference>span { font-size:12px; }
.history-monster-reference>small { font-size:10px; }
.history-monster-reference.history-monster-wide { grid-column:1 / -1; }
.history-reference-note { display:block; color:var(--muted); font-size:10px; line-height:1.7; }
.encyclopedia-tooltip:has(.history-card-preview) { width:260px; max-height:80dvh; padding:10px; background:#182326; }
.history-card-preview .record-card-face { width:100%; max-height:calc(80dvh - 22px); }
.history-card-preview .record-card-render>img { display:block; width:100%; height:auto; max-height:calc(80dvh - 40px); object-fit:contain; }
.history-item-preview { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.history-item-preview>img { width:48px; height:48px; object-fit:contain; }


/* Keep node details and route totals together throughout the map's full height. */
.detail-sidebar {align-self:stretch;min-width:0;}
.map-companion {position:sticky;top:16px;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;max-height:calc(100dvh - 32px);min-height:0;}
.map-companion>.info-panel {margin-bottom:0;min-width:0;}
.map-companion .node-info {display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.node-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;}
.node-heading h2 {margin-top:0;}
.node-heading [data-close-inspection] {display:none;}
.map-companion #node-inspection {min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;}
.map-companion .route-panel {grid-column:auto;max-height:min(260px,38dvh);overflow:auto;overscroll-behavior:contain;}
@media(max-width:940px) {
  .map-companion {position:static;grid-column:1/-1;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:auto;max-height:none;}
  .map-companion[data-open=true] {position:fixed;z-index:900;inset:auto 12px max(12px,env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;max-height:min(70dvh,620px);background:var(--panel);border-radius:8px;box-shadow:0 12px 48px #0009;}
  .map-companion[data-open=true] .node-heading [data-close-inspection] {display:inline-flex;align-self:flex-start;}
  .map-companion[data-open=true] .route-panel {max-height:25dvh;}
  .map-companion[data-open=true] .node-info {padding-top:12px;padding-bottom:12px;}
}
@media(max-width:600px) {.map-companion {grid-template-columns:minmax(0,1fr);}}