@charset "UTF-8";
:root{color-scheme:dark;--bg:#0c1212;--panel:#121b1a;--panel-high:#192421;--border:#273733;--text:#e6ece6;--muted:#9aa9a1;--green:#b6deb5;--gold:#d8be89;--danger:#f4aa9d;--cultivation:#b6deb5;--combat:#e1a390;--exploration:#9ec8de;--crafting:#c4ade0}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 0,#17302566,transparent 34%),var(--bg);color:var(--text);font-family:Inter,"Segoe UI",sans-serif;font-size:14px;line-height:1.6}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:4px}a{color:inherit;text-decoration:none}button{color:inherit}h1,h2,h3,p{margin:0}button{border:0}button,input{border-radius:7px}input{background:#0d1513;color:var(--text);border:1px solid var(--border);padding:10px 12px;min-width:0}input:focus{border-color:#739b7c}button{transition:background .15s,color .15s,border-color .15s}button:hover{filter:brightness(1.12)}.wrap{max-width:1440px;padding:0 48px;margin:auto}.site-header{height:106px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.brand{display:flex;gap:13px;align-items:center;font-size:12px;font-weight:650;letter-spacing:2px;line-height:1.6}.brand small{display:block;font-size:9px;letter-spacing:2.5px;color:var(--muted)}.wiki-link{color:var(--muted);font-size:12px}.wiki-link span{margin-left:12px;color:var(--green);font-size:18px}.intro{position:relative;padding:58px 0 42px;overflow:hidden}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;color:var(--muted)}.intro>.eyebrow{color:var(--green);display:flex;align-items:center;gap:9px}.live-dot{width:5px;height:5px;background:var(--green);border-radius:50%;box-shadow:0 0 10px #b6deb566}h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(38px,4.5vw,64px);line-height:1.13;letter-spacing:-2px;margin:19px 0}h1 em{font-weight:400;color:var(--green)}.intro>p{max-width:460px;color:var(--muted);font-size:14px;line-height:1.8}.intro-meta{display:flex;gap:24px;margin-top:24px;color:#b6bdb0;font-size:11px}.intro-meta span+span:before{content:"·";margin-right:24px;color:#4b6357}.orbit{position:absolute;right:85px;top:43px;width:250px;height:250px;border:1px solid #55755344;border-radius:50%;display:grid;place-items:center;transform:rotate(-25deg);pointer-events:none}.orbit:before,.orbit:after{content:"";position:absolute;inset:25px;border:1px solid #55755344;border-radius:50%}.orbit:after{inset:-22px 92px;transform:rotate(65deg)}.orbit-inner{font-size:180px;color:#8fc59c77;line-height:1;text-shadow:0 0 35px #b6deb523}.orbit b{position:absolute;bottom:30px;font-size:14px;font-weight:400;color:var(--gold);transform:rotate(25deg)}.orbit i{position:absolute;top:24px;right:44px;width:7px;height:7px;background:var(--gold);border-radius:50%;box-shadow:0 0 16px #d8be8988}.toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:15px 0 20px}.mode-switch{display:flex;background:#080f0d;border:1px solid var(--border);padding:4px;border-radius:9px}.mode-switch button{background:transparent;padding:9px 15px;font-size:12px;color:var(--muted)}.mode-switch button[aria-pressed=true]{background:#26392d;color:var(--green)}.toolbar-actions{display:flex;gap:8px;align-items:center}.text-button{background:transparent;font-size:11px;padding:8px;color:#c0c9bf}.text-button.muted{color:var(--muted)}.text-button span{margin-left:8px;color:var(--green)}.planner-layout{display:grid;grid-template-columns:minmax(0,1fr) 324px;gap:24px;align-items:start}.tree-panel{border:1px solid var(--border);border-radius:12px;background:var(--panel);overflow:hidden;min-width:0}.tree-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--border);background:#0e1714}.tree-tab{position:relative;padding:18px 8px;display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:var(--muted);font-size:12px;border-radius:0;white-space:nowrap}.tree-tab[aria-pressed=true]{color:var(--accent);background:#19251e}.tree-tab[aria-pressed=true]:after{content:"";position:absolute;bottom:0;left:12px;right:12px;height:2px;background:var(--accent)}.tree-icon{font-size:15px}.tree-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:28px 25px 10px}h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:27px;line-height:1.25}.tree-heading .eyebrow{font-size:8px;letter-spacing:1.6px;color:var(--accent,var(--green));margin-bottom:8px}.search-label{display:flex;align-items:center;gap:8px;max-width:200px;border:1px solid var(--border);padding-left:12px;border-radius:7px;color:var(--muted)}.search-label input{width:100%;border:0;background:transparent;padding:9px 8px 9px 0;font-size:11px}.search-label:focus-within{border-color:var(--green)}.mode-hint{font-size:11px;color:var(--muted);padding:0 25px 10px}.nodes{padding:0 25px 24px;max-height:860px;overflow:auto;scrollbar-color:#365343 #101916;scrollbar-width:thin}.tier-label{display:flex;align-items:center;gap:12px;letter-spacing:1.8px;font-size:9px;color:var(--muted);margin:21px 0 13px}.tier-label:after{content:"";height:1px;background:var(--border);flex:1}.tier-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.node{position:relative;background:#101816;border:1px solid #2a3830;border-radius:8px;padding:14px;display:flex;flex-direction:column;min-width:0}.node.selected{border-color:#58765a;background:linear-gradient(135deg,#20332177,#131e18)}.node-head{display:flex;align-items:start;gap:8px;justify-content:space-between}.node h3{font-size:12px;font-weight:550;line-height:1.4}.rank-badge{flex-shrink:0;color:var(--accent,var(--green));background:#ffffff07;font-size:10px;padding:1px 6px;border-radius:4px}.node-description{font-size:10px;line-height:1.65;color:var(--muted);margin:8px 0 9px;flex:1}.prereq{font-size:9px;color:#9ba991;padding:0;background:transparent;text-align:left;margin-bottom:11px;line-height:1.5}.prereq:hover{color:var(--green)}.prereq.satisfied{color:#b5c7a7}.node-bottom{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto}.node-cost{font-size:10px;color:var(--gold)}.node-cost small{display:block;font-size:9px;color:var(--muted)}.stepper{display:flex;align-items:center;border:1px solid #3b4c3d;border-radius:5px;overflow:hidden;height:29px}.stepper button{background:#223026;width:26px;height:29px;border-radius:0;font-size:16px;line-height:1}.stepper input{border:0;background:transparent;border-radius:0;width:43px;padding:3px 0;text-align:center;font-size:11px;appearance:textfield;-moz-appearance:textfield}.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.node.highlight{outline:2px solid var(--gold);outline-offset:2px}.summary{border:1px solid var(--border);border-radius:12px;padding:23px;background:linear-gradient(145deg,#1b2920,#121b18 75%);position:sticky;top:24px}.summary-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.summary-top .eyebrow{color:var(--green);font-size:9px}.save-indicator{font-size:9px;color:var(--muted)}.summary h2{font-size:23px;margin-top:18px}.main-total{margin:28px 0 24px}.main-total>span:first-child{display:block;font-size:clamp(30px,3vw,46px);font-family:Georgia,serif;line-height:1.2;color:var(--green);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.points-label{display:block;margin-top:8px;color:var(--muted);font-size:8px;letter-spacing:1.8px}.cost-totals{margin:0;display:grid;gap:9px;font-size:11px}.cost-totals div{display:flex;justify-content:space-between;gap:12px}.cost-totals dt{color:var(--muted)}.cost-totals dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.budget-section{margin:24px 0;padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.budget-section label{display:block;font-size:11px}.budget-section label span{display:block;font-size:9px;color:var(--muted);margin-top:2px}.budget-section input{width:100%;margin-top:10px;font-size:17px;font-variant-numeric:tabular-nums}.budget-result{display:flex;justify-content:space-between;gap:12px;font-size:10px;margin-top:10px;color:var(--green)}.budget-result strong{white-space:nowrap;font-weight:500}.budget-result.over-budget{color:var(--danger)}.breakdown-title{font-size:8px;letter-spacing:1.7px;color:var(--muted);margin-bottom:15px}.tree-cost-row{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:10px;margin-bottom:14px}.tree-cost-row .tree-name{color:var(--muted)}.tree-cost-row .tree-value{font-variant-numeric:tabular-nums}.cost-track{grid-column:1/-1;background:#ffffff07;height:3px;border-radius:2px;overflow:hidden}.cost-fill{height:100%;background:var(--accent)}.summary-footer{display:flex;gap:10px;margin-top:25px;padding-top:17px;border-top:1px solid var(--border)}.sparkle{font-size:25px;color:var(--gold);line-height:1.3}.summary-footer p{font-size:10px;line-height:1.7;color:var(--muted)}.build-section{margin-top:32px;padding:28px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.section-heading .eyebrow{font-size:8px;margin-bottom:8px}.section-heading h2{font-size:25px}.count-badge{font-size:10px;padding:4px 10px;border:1px solid var(--border);border-radius:20px;color:var(--muted)}.empty-state{padding:35px 8px;text-align:center;font-size:12px;color:var(--muted)}.table-scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;white-space:nowrap;font-size:11px;text-align:left}th{font-weight:400;color:var(--muted);font-size:9px;letter-spacing:.5px;padding:0 12px 12px}th:first-child,td:first-child{padding-left:0}td{padding:12px;border-top:1px solid var(--border);font-variant-numeric:tabular-nums}th:last-child,td:last-child{text-align:right;padding-right:0}td:last-child{color:var(--green)}.table-node-button{background:transparent;padding:0;text-align:left;font-size:11px}.table-node-button:hover{color:var(--green)}.how-it-works{margin:22px 0 48px;color:var(--muted);font-size:11px}.how-it-works summary{cursor:pointer;padding:12px 0}.how-it-works>div{padding:8px 0;max-width:900px}.how-it-works p+p{margin-top:12px}.how-it-works code{color:var(--green);white-space:normal}.site-footer{border-top:1px solid var(--border);padding-top:25px;padding-bottom:28px;display:flex;justify-content:space-between;gap:20px;font-size:9px;color:var(--muted)}.footer-divider{color:var(--green);margin:0 10px}#message{padding:12px 16px;border:1px solid #4b634d;border-radius:7px;background:#1c2c20;color:var(--green);margin-bottom:18px;font-size:12px}#message.error-message,.error-message{border-color:#805147;background:#36231e;color:var(--danger)}.skip-link{position:fixed;left:12px;top:-80px;background:var(--green);color:#101916;padding:12px;z-index:10}.skip-link:focus{top:12px}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
@media(min-width:1400px){.tier-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.wrap{padding-left:28px;padding-right:28px}.planner-layout{grid-template-columns:minmax(0,1fr) 290px;gap:18px}.tree-tab{font-size:10px;gap:5px}.tree-heading{padding:23px 18px 10px}.nodes{padding-left:18px;padding-right:18px}.mode-hint{padding-left:18px;padding-right:18px}.search-label{max-width:160px}.orbit{right:25px;opacity:.8}.summary{padding:20px}.node{padding:12px}}
@media(max-width:850px){.planner-layout{grid-template-columns:1fr}.summary{position:static;display:grid;grid-template-columns:1fr 1fr;column-gap:30px}.summary-top,.summary h2{grid-column:1/-1}.main-total{grid-column:1;grid-row:3;margin:24px 0 16px}.cost-totals{grid-column:1;grid-row:4;align-self:start}.budget-section{grid-column:2;grid-row:3/5;margin:18px 0 0;border-bottom:0}.breakdown-title{grid-column:1/-1;margin-top:22px}.tree-costs{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:30px}.summary-footer{grid-column:1/-1;margin-top:8px}.orbit{width:200px;height:200px;top:55px;right:5px}.orbit-inner{font-size:145px}.intro>p{max-width:380px}.toolbar{align-items:start}.toolbar-actions{gap:0;flex-wrap:wrap;justify-content:end}.nodes{max-height:720px}.tree-tab{font-size:12px}.tree-heading{padding-top:26px}.search-label{max-width:220px}}
@media(max-width:580px){.wrap{padding-left:18px;padding-right:18px}.site-header{height:82px}.brand{font-size:10px;gap:9px;letter-spacing:1.3px}.brand small{font-size:8px;letter-spacing:1.8px}.brand img{width:32px;height:32px}.wiki-link{font-size:10px}.wiki-link span{margin-left:5px}.intro{padding-top:36px;padding-bottom:26px}.intro>.eyebrow{font-size:8px;letter-spacing:1.5px}h1{font-size:40px;letter-spacing:-1.5px}.intro>p{font-size:12px;max-width:340px}.orbit{display:none}.intro-meta{gap:12px;font-size:9px;margin-top:20px}.intro-meta span+span:before{margin-right:12px}.toolbar{flex-wrap:wrap;gap:6px}.mode-switch{width:100%}.mode-switch button{flex:1;font-size:12px}.toolbar-actions{width:100%;justify-content:start;margin-top:4px}.toolbar-actions .text-button{padding-left:0;padding-right:20px}.tree-tab{font-size:10px;gap:4px;padding:15px 4px}.tree-icon{font-size:12px}.tree-heading{padding:24px 16px 10px;align-items:start;gap:8px;flex-wrap:wrap}.tree-heading h2{font-size:25px}.tree-heading .eyebrow{font-size:7px}.search-label{max-width:none;width:100%;margin-top:7px}.mode-hint{font-size:10px;padding-left:16px;padding-right:16px}.nodes{padding:0 16px 20px;max-height:680px}.tier-grid{grid-template-columns:1fr}.node{padding:14px}.node h3{font-size:13px}.node-description{font-size:11px}.node-cost,.prereq{font-size:10px}.stepper{height:32px}.stepper button{height:32px;width:31px}.stepper input{width:52px;font-size:13px}.summary{display:block}.summary h2{font-size:25px}.main-total>span:first-child{font-size:44px}.budget-section{border-bottom:1px solid var(--border);margin-top:23px}.tree-costs{column-gap:20px}.summary-footer{margin-top:20px}.build-section{padding:20px;margin-top:22px}.section-heading h2{font-size:22px}.section-heading .eyebrow{font-size:7px}.empty-state{font-size:11px;padding:24px 0}.site-footer{flex-direction:column;gap:8px;font-size:8px}.how-it-works{margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* The tree uses the wiki's 132 × 54 nodes, 154 px columns and 96 px rows. */
.graph-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 20px 14px;
  color: var(--muted);
  font-size: 10px;
}

/* Language controls and typography. The game map always retains its LTR coordinates. */
.header-actions { display: flex; align-items: center; gap: 22px; }
.wiki-link [data-i18n="wiki"] { margin: 0; color: inherit; font-size: inherit; }
.language-picker { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.language-picker select { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; max-width: 170px; }
.language-picker select:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.soul-frame, .soul-view, .soul-stage, .soul-zoom, .stepper { direction: ltr; }
.sg-name, .sg-rank, .table-node-button { unicode-bidi: isolate; }
html[lang="zh"] h1, html[lang="hi"] h1, html[lang="ar"] h1 { letter-spacing: normal; line-height: 1.35; }
html[lang="zh"] .eyebrow, html[lang="hi"] .eyebrow, html[lang="ar"] .eyebrow,
html[lang="hi"] .points-label, html[lang="ar"] .points-label,
html[lang="hi"] .breakdown-title, html[lang="ar"] .breakdown-title { letter-spacing: normal; }
html[dir="rtl"] .soul-detail { direction: rtl; text-align: right; }
html[dir="rtl"] .orbit { right: auto; left: 85px; }
html[dir="rtl"] .search-label { padding-left: 0; padding-right: 12px; }
html[dir="rtl"] .search-label input { padding-right: 0; padding-left: 8px; }
html[dir="rtl"] .table-node-button { text-align: right; }
html[dir="rtl"] table { text-align: right; }
html[dir="rtl"] th:first-child, html[dir="rtl"] td:first-child { padding-right: 0; padding-left: 12px; }
html[dir="rtl"] th:last-child, html[dir="rtl"] td:last-child { text-align: left; padding-left: 0; padding-right: 12px; }
html[dir="rtl"] .prereq { text-align: right; }
html[dir="rtl"] .budget-section input { direction: ltr; text-align: right; }
html[dir="rtl"] .skip-link { left: auto; right: 12px; }
html[lang="hi"] .tree-tab, html[lang="ar"] .tree-tab { line-height: 1.6; }
@media (max-width: 850px) {
  .language-picker > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .header-actions { gap: 12px; }
  html[dir="rtl"] .orbit { left: 5px; }
}
@media (max-width: 580px) {
  .site-header { height: auto; min-height: 90px; flex-wrap: wrap; gap: 12px; padding-top: 18px; padding-bottom: 18px; }
  .header-actions { flex-wrap: wrap; }
  .language-picker select { font-size: 11px; max-width: 145px; padding: 6px; }
  .tree-tab { white-space: normal; min-height: 52px; }
  .intro-meta { flex-wrap: wrap; }
  .brand small { max-width: 160px; }
  html[dir="rtl"] .node-detail-card .detail-art { float: left; margin: 0 14px 14px 0; }
  html[dir="rtl"] .toolbar-actions .text-button { padding-right: 0; padding-left: 20px; }
}
#search-results { flex-shrink: 0; color: var(--green); }
.soul-frame {
  display: flex;
  height: min(72vh, 760px);
  min-height: 480px;
  border-top: 1px solid var(--border);
  overflow: hidden;
  background: #0b0d10;
}
.soul-canvas { position: relative; flex: 1 1 auto; min-width: 0; }
.soul-view {
  position: absolute;
  inset: 0;
  overflow: auto;
  background-color: #0b0d10;
  background-size: cover;
  background-position: center;
  cursor: grab;
  touch-action: pan-x pan-y;
  scrollbar-color: #36423d #0b0d10;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.soul-view.dragging { cursor: grabbing; user-select: none; }
.soul-view.dragging * { cursor: grabbing; }
.soul-view:focus-visible { outline-offset: -3px; }
.soul-sizer { position: relative; margin: 0 auto; }
.soul-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.soul-edges { position: absolute; inset: 0; pointer-events: none; }
.soul-edges line { stroke: #78828c66; stroke-width: 1.5; }
.soul-edges line.planned { stroke: #91c7a6b3; stroke-width: 2; }
.soul-edges line.lit { stroke: #d6b05acc; stroke-width: 2.5; }
.sg-node {
  position: absolute;
  width: 132px;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  overflow: hidden;
  border: 1px solid #5fd6a666;
  border-radius: 8px;
  background: #0b0d10d9;
  color: var(--text);
  font: inherit;
  text-align: left;
  user-select: none;
}
.sg-node:hover { border-color: #e6c161b3; }
.sg-node.blocked { border-color: #626e685c; }
.sg-node.planned { border-color: var(--accent); box-shadow: inset 0 0 12px #b6deb522; }
.sg-node.owned .sg-rank { color: var(--green); }
.sg-node.selected { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.sg-node.dimmed { opacity: .26; }
.sg-node.search-match { border-color: var(--gold); }
.sg-node:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sg-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; pointer-events: none; }
.sg-node::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, #06080bd9, #06080b66); pointer-events: none; }
.sg-name {
  position: relative;
  z-index: 1;
  flex: 1;
  font-size: 10.5px;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px #000;
}
.sg-rank { position: relative; z-index: 1; align-self: flex-start; flex-shrink: 0; margin-top: 4px; padding: 1px 3px; border-radius: 4px; background: #1a1f26e6; color: #c3c9c2; font-size: 8px; font-variant-numeric: tabular-nums; }
.soul-zoom { position: absolute; right: 10px; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: #06080be6; }
.soul-zoom button { min-width: 30px; height: 32px; padding: 0 7px; background: transparent; color: var(--text); font-size: 16px; }
.soul-zoom button:hover { background: var(--panel-high); }
#zoom-reset, #zoom-fit { font-size: 10px; }
#zoom-reset { min-width: 48px; font-variant-numeric: tabular-nums; }
.soul-detail { flex: 0 0 250px; min-width: 0; overflow-y: auto; border-left: 1px solid var(--border); background: #0d1412; padding: 18px; }
.node-detail-card .detail-art { width: 100%; height: 100px; object-fit: cover; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 18px; }
.node-detail-card .eyebrow { font-size: 8px; letter-spacing: 1px; color: var(--gold); margin-bottom: 9px; }
.node-detail-card .node-head { flex-direction: column; gap: 9px; }
.node-detail-card h3 { font-family: Georgia, serif; font-size: 23px; font-weight: 400; line-height: 1.25; }
.node-detail-card .node-description { font-size: 12px; margin: 18px 0; }
.node-facts { font-size: 10px; color: var(--muted); padding-bottom: 15px; border-bottom: 1px solid var(--border); margin-bottom: 15px; }
.node-detail-card .prereq { display: block; font-size: 11px; margin-bottom: 16px; }
.editor-label { color: var(--text); font-size: 11px; margin: 15px 0 10px; }
.node-detail-card .node-bottom { align-items: flex-start; flex-wrap: wrap; gap: 14px; }
.node-detail-card .node-cost { font-size: 13px; }
.node-detail-card .node-cost small { font-size: 10px; margin-top: 4px; }
.node-detail-card .stepper { height: 34px; }
.node-detail-card .stepper button { width: 30px; height: 34px; }
.node-detail-card .stepper input { width: 68px; font-size: 12px; }
.node-wiki-link { display: block; font-size: 10px; margin-top: 22px; color: var(--muted); }
.node-wiki-link:hover { color: var(--green); }
@media (min-width: 1200px) {
  .wrap { max-width: 1680px; }
  .planner-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .soul-detail { flex-basis: 270px; }
}
@media (max-width: 1100px) and (min-width: 851px) {
  .soul-frame { flex-direction: column; height: auto; }
  .soul-canvas { flex: none; height: 500px; }
  .soul-detail { flex: none; border-left: 0; border-top: 1px solid var(--border); }
  .node-detail-card .detail-art { float: right; width: 110px; height: 100px; margin: 0 0 14px 18px; }
}
@media (max-width: 759px) {
  .graph-toolbar { flex-direction: column; gap: 3px; font-size: 9px; padding: 4px 16px 12px; }
  .soul-frame { flex-direction: column; height: auto; min-height: 0; }
  .soul-canvas { flex: none; height: min(62vh, 520px); min-height: 360px; }
  .soul-detail { flex: none; border-left: 0; border-top: 1px solid var(--border); padding: 18px; }
  .node-detail-card .detail-art { float: right; width: 100px; height: 84px; margin: 0 0 14px 14px; }
  .node-detail-card .node-description { clear: both; padding-top: 6px; }
  .node-detail-card .node-head { max-width: calc(100% - 110px); }
  .node-detail-card h3 { font-size: 21px; }
  .node-detail-card .node-bottom { flex-wrap: nowrap; align-items: center; }
  .soul-zoom button { min-width: 36px; height: 36px; }
}

/* App views and in-game world atlas. */
.page-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border); margin: 0 0 18px; }
.page-tabs button { background: transparent; border-radius: 7px 7px 0 0; padding: 13px 20px; color: var(--muted); border-bottom: 2px solid transparent; font-size: 13px; }
.page-tabs button[aria-selected="true"] { color: var(--green); border-bottom-color: var(--green); background: #b6deb508; }
.world-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 28px 0 14px; }
.world-heading h2 { font-size: 34px; margin-top: 8px; }
.world-heading .eyebrow { color: var(--gold); }
.world-intro { color: var(--muted); font-size: 12px; margin-bottom: 20px; }
.world-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.world-controls .search-label { max-width: 300px; flex: 1; min-width: 180px; }
.world-region-filter { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }
.world-region-filter select { max-width: 240px; font: inherit; padding: 9px 12px; border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 7px; }
.world-region-filter select:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.world-region-toggle { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; cursor: pointer; }
.world-region-toggle input { accent-color: var(--green); width: 16px; height: 16px; }
.world-message { color: var(--gold); font-size: 12px; }
.world-message:not(:empty) { padding: 10px 0 18px; }
.world-frame { display: flex; height: min(78vh, 850px); min-height: 540px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel); direction: ltr; }
.world-canvas { flex: 1 1 auto; position: relative; min-width: 0; background: #122020; }
.world-view { position: absolute; inset: 0; overflow: auto; cursor: grab; touch-action: pan-x pan-y; scrollbar-width: thin; scrollbar-color: #4e6657 #122020; overscroll-behavior: contain; direction: ltr; }
.world-view.dragging { cursor: grabbing; user-select: none; }
.world-view.dragging * { cursor: grabbing; }
.world-view:focus-visible { outline-offset: -3px; }
.world-sizer { position: relative; margin: 0 auto; }
.world-stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; direction: ltr; }
.world-background { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; pointer-events: none; }
.world-town { position: absolute; width: 230px; height: 230px; padding: 0; background: transparent; border: 0; transform: translate(-50%, -50%); isolation: isolate; border-radius: 50%; user-select: none; z-index: 2; }
.world-town.kind-city { width: 250px; height: 250px; }
.world-town.kind-village, .world-town.kind-hamlet { width: 210px; height: 210px; }
.world-town-art { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.world-town::before { content: ""; position: absolute; inset: 8% 8% 15%; border: 2px solid transparent; border-radius: 50%; pointer-events: none; z-index: -1; }
.world-town:hover::before, .world-town.selected::before { border-color: var(--gold); box-shadow: 0 0 25px #d8be8977; }
.world-town.selected { z-index: 4; }
.world-town:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; z-index: 5; }
.world-town-tier { position: absolute; left: 50%; top: 3%; transform: translateX(-50%); color: #ead494; background: #08100fe6; padding: 0 6px; border: 1px solid #cbb27266; border-radius: 5px; font-size: 13px; font-weight: 600; white-space: nowrap; direction: ltr; }
.world-region { position: absolute; transform: translate(-50%, -50%); padding: 5px 11px; background: #101a15c9; border: 1px solid #b6deb566; color: #d2e5c5; font-family: Georgia, serif; font-size: 19px; white-space: nowrap; text-shadow: 0 1px 3px #000; z-index: 6; }
.world-region[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.world-realm { position: absolute; top: 12px; left: 12px; z-index: 7; padding: 5px 10px; background: #091612e6; border: 1px solid #4d856b; border-radius: 7px; font-size: 11px; color: var(--green); pointer-events: none; }
.world-zoom { z-index: 8; direction: ltr; }
#map-zoom-reset { min-width: 48px; font-size: 10px; font-variant-numeric: tabular-nums; }
#map-zoom-fit { font-size: 10px; }
.world-sidebar { flex: 0 0 310px; overflow-y: auto; border-left: 1px solid var(--border); padding: 20px; background: var(--panel); }
.world-detail-art { width: 100%; height: 160px; object-fit: cover; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 16px; }
.world-sidebar .eyebrow { font-size: 9px; color: var(--gold); letter-spacing: 1px; margin-bottom: 8px; }
.world-detail-name { font-family: Georgia, serif; font-size: 25px; line-height: 1.2; font-weight: 400; margin: 0 0 8px; }
.world-detail-region { font-size: 11px; color: var(--green); }
.world-description, .world-region-description { font-size: 12px; color: var(--muted); line-height: 1.8; margin-top: 16px; }
.world-amenities-title { font-size: 12px; font-weight: 500; margin: 22px 0 12px; }
.world-amenities { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.world-amenities li { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #c3cdbf; }
.world-amenities img { width: 34px; height: 34px; object-fit: cover; border-radius: 5px; }
.world-places { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.world-places h3 { font-size: 12px; font-weight: 500; margin-bottom: 14px; }
#map-places { display: grid; gap: 5px; }
.world-place-button { display: flex; flex-direction: column; align-items: flex-start; text-align: start; gap: 3px; width: 100%; padding: 9px 11px; border: 1px solid transparent; background: #0c1511; font-size: 11px; }
.world-place-button small { font-size: 9px; color: var(--muted); }
.world-place-button:hover, .world-place-button[aria-pressed="true"] { border-color: #6e8d70; background: #20332366; }
.world-no-matches { color: var(--muted); font-size: 12px; padding: 10px 0; }
.world-help { font-size: 10px; color: var(--muted); margin: 12px 0 48px; }
html[dir="rtl"] .world-sidebar { direction: rtl; text-align: right; }
html[dir="rtl"] .world-detail-name, html[dir="rtl"] .world-detail-region { text-align: right; }
@media (max-width: 1100px) { .world-sidebar { flex-basis: 270px; padding: 16px; } }
@media (max-width: 759px) {
  .world-frame { flex-direction: column; height: auto; min-height: 0; }
  .world-canvas { flex: none; height: min(68vh, 600px); min-height: 380px; }
  .world-sidebar { flex: none; border-left: 0; border-top: 1px solid var(--border); overflow-y: visible; padding: 20px; }
  .world-detail-art { float: right; width: 140px; height: 100px; margin: 0 0 14px 14px; }
  .world-description { clear: both; padding-top: 5px; }
  #map-places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .world-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .world-heading h2 { font-size: 29px; }
  .world-controls { gap: 12px; }
  .world-controls .search-label { max-width: none; width: 100%; flex-basis: 100%; margin-top: 0; }
  .world-region-filter select { max-width: 185px; }
  .world-zoom button { min-width: 36px; height: 36px; }
  html[dir="rtl"] .world-detail-art { float: left; margin: 0 14px 14px 0; }
}