@font-face {
  font-family:"NeoDunggeunmo";
  src:url("assets/fonts/neodgm.woff2") format("woff2");
  font-display:swap;
}
:root {
  color-scheme:dark;
  font-family:"NeoDunggeunmo",monospace;
  font-synthesis:none;
  text-rendering:auto;
  -webkit-font-smoothing:none;
  --bg:#131417;
  --steel:#24231f;
  --steel-light:#413b31;
  --panel:#211a14;
  --line:#5c432b;
  --text:#f6e7cd;
  --muted:#d1b38a;
  --dim:#a28a69;
  --brass:#c17c2e;
  --light:#f2c274;
  --green:#83a58a;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
* {box-sizing:border-box}
html,body {
  width:100%;
  height:100%;
  margin:0;
  min-width:320px;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
}
body {min-height:100dvh}
button {font:inherit;color:inherit;cursor:pointer}
button:focus-visible {outline:2px solid var(--light);outline-offset:2px}
[hidden] {display:none!important}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.shell {
  position:relative;
  display:grid;
  grid-template-rows:56px minmax(0,1fr) 76px;
  width:min(1440px,100%);
  height:100dvh;
  margin:0 auto;
  padding:var(--safe-top) 0 var(--safe-bottom);
  overflow:hidden;
  background:#171411;
  border-inline:2px solid #382719;
  box-shadow:0 0 0 1px #090a0c;
}
.top {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.15fr 1fr auto;
  align-items:stretch;
  background:#24231f;
  border-bottom:3px solid #79552e;
  box-shadow:inset 0 0 0 1px #090b0e,inset 0 -2px 0 #454136;
}
.top:before,.top:after {
  position:absolute;
  top:5px;
  width:5px;
  height:5px;
  content:"";
  background:#e0af5a;
  box-shadow:0 39px #bf8439;
  pointer-events:none;
}
.top:before {left:5px}
.top:after {right:5px}
.resource {
  position:relative;
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 10px 4px;
  background:transparent;
  border:0;
  color:var(--muted);
  font-size:14px;
  white-space:nowrap;
}
.resource + .resource {border-left:1px solid #39404a}
.sound-toggle {color:#f1d69c;font-size:12px;padding-inline:9px}
.resource svg {
  display:block;
  flex:none;
  width:20px;
  height:20px;
  fill:#d7a34e;
  image-rendering:pixelated;
  shape-rendering:crispEdges;
}
.resource b {color:#f4d295;font-size:16px}
.battery-resource {padding-bottom:6px}
.battery-meter {
  position:absolute;
  right:12%;
  bottom:4px;
  left:12%;
  height:3px;
  overflow:hidden;
  background:#0d1014;
  border:1px solid #76603e;
}
.battery-meter i {display:block;width:100%;height:100%;background:#75c4a2}
.depth-resource:hover {background:#262c33;color:var(--light)}
.main {position:relative;min-height:0;overflow:hidden}
.scene-wrap {
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  background:#24180f;
  border-block:2px solid #493321;
  box-shadow:inset 0 0 0 2px #17110d;
}
.scene-wrap canvas {
  display:block;
  width:100%;
  height:100%;
  cursor:crosshair;
  image-rendering:pixelated;
  touch-action:none;
}
.arena-hud {
  position:absolute;
  top:9px;
  left:10px;
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:7px;
  max-width:calc(100% - 20px);
  pointer-events:none;
  text-shadow:1px 1px #17120f;
}
.arena-hud > span {
  padding:4px 7px;
  border:1px solid #79552e;
  background:#17120fe8;
  color:#ecd6ae;
  font-size:14px;
  white-space:nowrap;
}
.arena-hud > #depth-progress {max-width:min(700px,calc(100vw - 340px));font-size:14px;white-space:normal;color:#d6c5a6}
.mineral-hud {
  position:absolute;
  z-index:1;
  top:9px;
  right:10px;
  display:grid;
  grid-template-columns:repeat(2,minmax(132px,1fr));
  gap:4px 6px;
  padding:6px;
  border:1px solid #79552e;
  background:#17120fe8;
  box-shadow:inset 0 0 0 1px #34271a;
  pointer-events:none;
}
.mineral-count {
  display:grid;
  grid-template-columns:20px auto auto;
  align-items:center;
  gap:5px;
  min-height:24px;
  color:#e8d5b0;
  font-size:13px;
  white-space:nowrap;
}
.mineral-count .mineral-glyph {display:grid;width:20px;height:20px;place-items:center;color:var(--ore)}
.mineral-glyph svg {width:18px;height:18px;fill:currentColor;shape-rendering:crispEdges}
.mineral-count b {justify-self:end;color:var(--ore);font-size:14px}
.mineral-count.locked {opacity:.58}
.mineral-count.locked b {color:#9199a3;font-size:11px}
.field-hint {
  position:absolute;
  right:9px;
  bottom:9px;
  max-width:calc(100% - 18px);
  padding:4px 7px;
  background:#17120fe8;
  border:1px solid #63482d;
  color:#e3c79d;
  font-size:14px;
  pointer-events:none;
}
.deep-panel {position:absolute;z-index:1;bottom:46px;left:10px;display:grid;gap:6px;width:min(330px,46vw);padding:9px;background:#17120feF;border:1px solid #9a7447;box-shadow:0 3px 12px #090807aa;color:#f0d9ad;font-size:13px}
.deep-panel details {min-width:0}
.deep-panel summary {min-height:44px;display:flex;align-items:center;cursor:pointer}
.deep-panel > span,.deep-panel > small {color:#cbb28b}
.deep-research {display:grid;grid-template-columns:1fr;gap:4px}
.deep-panel .btn {min-height:30px;padding:4px 7px;font-size:12px;text-align:left}
.deep-panel button:disabled {opacity:.62;cursor:default}
.actions {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,3vw,34px);
  padding:8px clamp(10px,3vw,30px);
  background:#24231f;
  border-top:3px solid #79552e;
  box-shadow:inset 0 2px #454136,inset 0 -1px #090b0e;
}
.actions:before,.actions:after {
  position:absolute;
  top:7px;
  width:5px;
  height:5px;
  content:"";
  background:#e0af5a;
  box-shadow:0 42px #bf8439;
  pointer-events:none;
}
.actions:before {left:5px}
.actions:after {right:5px}
.btn {
  position:relative;
  display:flex;
  flex:1 1 0;
  max-width:340px;
  min-width:0;
  min-height:52px;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:7px 10px;
  border:2px solid #a27439;
  background:#33271d;
  color:#f0ce91;
  font-size:16px;
  box-shadow:inset 0 0 0 2px #221a14,0 2px #090a0c;
}
.action-btn {max-width:220px}
.btn:before,.btn:after {
  position:absolute;
  width:4px;
  height:4px;
  content:"";
  background:#e2b563;
  pointer-events:none;
}
.btn:before {top:4px;left:4px}
.btn:after {right:4px;bottom:4px}
.btn:hover {background:#493522;color:#ffe4ae}
.btn.secondary {border-color:#71593b;background:#292724;color:#d9c8aa}
.btn:disabled {cursor:default;opacity:.48}
.action-btn svg {
  flex:none;
  width:25px;
  height:25px;
  fill:currentColor;
  image-rendering:pixelated;
  shape-rendering:crispEdges;
}
.modal {
  position:fixed;
  z-index:5;
  inset:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  place-items:center;
  padding:12px;
  background:#08090bc9;
}
.modal[hidden] {display:none}
.dialog {
  min-width:0;
  max-width:100%;
  width:min(780px,100%);
  max-height:min(90dvh,820px);
  overflow:auto;
  padding:12px;
  border:2px solid #926638;
  background:#201912;
  box-shadow:0 12px 60px #000b,inset 0 0 0 2px #342719;
}
.dialog:has(.tree-viewport) {width:min(1240px,calc(100vw - 24px));max-width:calc(100vw - 24px);min-width:0;height:min(94dvh,900px);display:flex;flex-direction:column;overflow:hidden;background:#211e19;border-color:#9b7546}
.tree-dialog>* {min-width:0;max-width:100%}
.info-dialog {width:min(820px,100%)}
.dialog-head {
  position:sticky;
  z-index:2;
  top:-12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:3px 0 8px;
  border-bottom:1px solid var(--line);
  background:#201912;
}
.dialog-head h2 {margin:0;color:var(--light);font-size:20px}
.close {
  flex:none;
  width:44px;
  height:44px;
  border:2px solid #966735;
  background:#302317;
  font-size:22px;
}
.info-status {
  margin:12px 2px;
  padding:9px;
  border:1px solid #60452c;
  background:#282017;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}
.info-block {margin-top:12px;padding-top:9px;border-top:1px solid #493722}
.info-block h3 {margin:0 0 8px;color:var(--light);font-size:16px}
.info-block p {margin:7px 0;color:var(--muted);font-size:14px;line-height:1.5}
.depths {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.depths button {
  display:flex;
  min-width:44px;
  min-height:78px;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  padding:6px 8px;
  border:1px solid #765430;
  background:#1b1b19;
  text-align:left;
}
.depths button b {font-size:14px;color:var(--light)}
.depths button small {font-size:14px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.depths button.complete {border-color:#63896e}
.depths button:disabled {opacity:.55}
.depths button.selected {border:2px solid var(--light);background:#3a2b1b;color:var(--light)}
.depths button.selected small {color:#e4cfaa}
.log {max-height:130px;overflow:auto;color:var(--muted);font-size:14px;line-height:1.55}
.foot {margin:7px 0 0;color:var(--dim);font-size:14px;line-height:1.5}
.tree-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;font-size:14px}
.tree-heading > span {min-width:0}
.tree-heading b {flex:none;white-space:nowrap;color:var(--light)}
.material-chip {display:inline-block;margin-left:7px;color:var(--ore);font-size:13px}
.material-chip.locked {color:#8791a0}
.recipe-list {display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.recipe-item {display:flex;min-height:34px;align-items:center;gap:9px;padding:3px 8px;border:1px solid color-mix(in srgb,var(--ore) 62%,#293449);background:#242019;color:#e4eaf1;font-size:16px;white-space:nowrap}
.recipe-mineral {display:flex;align-items:center;gap:5px;color:var(--ore)}
.recipe-glyph {display:grid;width:20px;height:20px;place-items:center}
.recipe-glyph .node-icon-art {width:20px;height:20px;border:0;border-radius:0;background-color:transparent;box-shadow:none}
.recipe-glyph .node-icon-art svg {width:18px;height:18px}
.recipe-item strong {color:#e8f0f6;font-size:16px}
.recipe-item.enough {border-color:#69a98d}
.recipe-item.enough strong {color:#bdf2d8}
.recipe-item.shortage {border-color:#bd7755;background:#261a1c}
.recipe-item.shortage strong {color:#ffb492}
.recipe-item small {color:#ffb492;font-size:12px}
.tree-tools {display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:2px 0;color:#bcc9d8;font-size:14px}
.tree-help {min-width:0;white-space:nowrap}
.mobile-help {display:none}
.tree-tools>div {display:flex;gap:5px;flex:none}
.tree-tools button {min-width:44px;height:44px;border:1px solid #929078;background:#2b2923;color:#eef4fc;font-size:16px}
.tree-tools .tree-legend {display:flex;gap:12px;align-items:center;flex:1;justify-content:center}
.tree-legend span {display:flex;align-items:center;gap:4px;font-size:13px;white-space:nowrap}
.tree-legend i {display:block;width:10px;height:10px;background:#45546b;border:1px solid #8b9bb2}
.tree-legend .legend-owned {background:#69bd9e;border-color:#b6f0d5}
.tree-legend .legend-ready {background:#ddad58;border-color:#ffe2a0}
.tree-legend .legend-locked {background:#45546b;border-color:#8b9bb2}
.tree-viewport {
  position:relative;
  flex:1 1 auto;
  width:100%;
  min-width:0;
  min-height:100px;
  overflow:hidden;
  overscroll-behavior:contain;
  touch-action:none;
  cursor:grab;
  border:1px solid #525746;
  background-color:#191b18;
  background-image:radial-gradient(#35392e 1px,transparent 1px);
  background-size:30px 30px;
}
.tree-viewport:active {cursor:grabbing}
.tree-frame {position:relative;margin-inline:auto;flex:none}
.tree {position:absolute;top:0;left:0;transform-origin:top left;padding:0}
.tree > svg {position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.tree > svg path {fill:none;stroke:#95a9c4;stroke-width:2;stroke-linejoin:miter;stroke-linecap:square;opacity:.72}
.tree > svg path.ready {stroke:#edc877}
.tree > svg path.owned {stroke:#83d6b5}
.tree > svg path.dim {opacity:.36}
.tree > svg path.focus {stroke-width:3;opacity:1}
.node.branch-dim {opacity:.28}
.tree-stage {position:relative;min-width:0;min-height:0;height:100%}
.tree-minimap {position:absolute;z-index:4;top:8px;right:8px;width:120px;height:92px;border:1px solid #60718a;background:#211e19dd;cursor:crosshair;touch-action:none}
.tree-minimap circle {fill:#a4afbe;opacity:.75}
.tree-minimap .mini-impact {fill:#e0ad61}
.tree-minimap .mini-supply {fill:#77bfe0}
.tree-minimap .mini-salvage {fill:#8bd0a7}
.tree-minimap .mini-dim {opacity:.24}
.tree-minimap .mini-view {fill:#e9f2ff18;stroke:#fff0a6;stroke-width:16;pointer-events:none}
.node {
  position:absolute;
  z-index:2;
  display:flex;
  width:108px;
  height:112px;
  align-items:center;
  flex-direction:column;
  justify-content:flex-start;
  gap:3px;
  padding:0;
  border:0;
  background:transparent;
  color:#d9e3f0;
  transform:translate(-50%,-50%);
}
.node-icon-art-wrap {position:relative;display:grid;width:48px;height:48px;flex:none;place-items:center}
.node-icon-art {
  position:relative;
  display:grid;
  width:40px;
  height:40px;
  flex:none;
  place-items:center;
  border:2px solid #8c8b71;
  border-radius:2px;
  background-color:#242a25;
  background-image:url("assets/art/skill-icons-sheet.png");
  background-size:600% 600%;
  background-position:center;
  color:#e5edf7;
  box-shadow:0 2px 0 #080e17,inset 0 0 0 1px #101a2a;
  image-rendering:pixelated;
}
.node-icon-art svg {display:block;width:24px;height:24px;fill:currentColor;shape-rendering:crispEdges}
html.skill-icons-ready .node-icon-art svg {display:none}
.node.family-impact .node-icon-art {border-color:#ce8759;background-color:#472c2a;color:#ffd1a7}
.node.family-supply .node-icon-art {border-color:#719dd0;background-color:#304841;color:#d1e5ff}
.node.family-salvage .node-icon-art {border-color:#7eb59b;background-color:#24463c;color:#d4ffdf}
.node-mark,.node em {
  position:absolute;
  z-index:2;
  display:grid;
  min-width:19px;
  height:19px;
  place-items:center;
  border:1px solid #b5b292;
  background:#171a16;
  color:#edf4ff;
  font-size:14px;
  font-style:normal;
  font-weight:bold;
  line-height:17px;
}
.node-mark {left:-1px;top:-1px}
.node em {
  top:-1px;
  right:-1px;
  min-width:26px;
  height:19px;
  padding:0 3px;
  font-size:12px;
}
.node small {display:block;max-width:104px;overflow:hidden;color:inherit;font-size:15px;line-height:18px;text-align:center;text-overflow:ellipsis;white-space:nowrap;text-shadow:1px 1px #141510,-1px 1px #141510,1px -1px #141510,-1px -1px #141510}
.node-cost {display:flex;max-width:108px;min-height:20px;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px}
.node-cost-item {display:flex;min-width:0;align-items:center;gap:2px;padding:0 3px;border:1px solid color-mix(in srgb,var(--ore) 65%,#263247);background:#211e19;color:#c7d0dd;font-size:14px;font-style:normal;line-height:17px;white-space:nowrap}
.node-cost-item.enough {border-color:#75c3a1;color:#d7ffeb}
.node-cost-item.shortage {border-color:#c87955;color:#ffc19e}
.cost-glyph {display:block;width:15px;height:15px;flex:none}
.cost-glyph.iron-ore,.recipe-glyph.iron-ore {background-image:url("assets/art/warm-mine-atlas.png");background-position:0% 100%;background-size:300% 200%;image-rendering:pixelated}
.cost-glyph .node-icon-art {width:15px;height:15px;border:0;border-radius:0;background-color:transparent;box-shadow:none}
.cost-glyph .node-icon-art svg {width:14px;height:14px}
.node-cost-state {min-width:42px;padding:0 5px;border:1px solid #82cbb0;background:#193b37;color:#d4ffec;font-size:12px;line-height:18px;text-align:center}
.node.available {color:#ffe4a5}
.node.available .node-icon-art {border-color:#ffd17a;box-shadow:0 0 0 2px #ffd17a,0 2px 0 #080e17}
.node.available .node-mark {border-color:#ffe6a5;background:#76551f;color:#fff1ca}
.node.owned {color:#b9f1d5}
.node.owned .node-icon-art {border-color:#8bdcba;background-color:#234b43;color:#dcffec}
.node.owned .node-mark {border-color:#a5edcf;background:#1e5648;color:#e4fff2}
.node.materials-needed {color:#f2bd91}
.node.materials-needed .node-icon-art {border-color:#db9d67;box-shadow:inset 0 0 0 2px #492f24}
.node.materials-needed .node-mark {border-color:#e6b78c;background:#5e3b2a;color:#ffe4cf}
.node.locked {color:#9ca9bd}
.node.locked .node-icon-art {border-color:#727665;background-color:#252722;filter:saturate(.55) brightness(.78)}
.node.locked .node-mark {border-color:#8290a4;background:#353b32;color:#d7deea}
.node.locked .node-mark {font-size:0}
.node.locked .node-mark:before {position:absolute;top:2px;left:4px;width:9px;height:8px;border:1px solid currentColor;border-bottom:0;border-radius:5px 5px 0 0;content:""}
.node.locked .node-mark:after {position:absolute;bottom:2px;left:3px;width:11px;height:8px;border:1px solid currentColor;background:#d7deea;content:""}
.node.selected .node-icon-art {outline:2px solid #fff1c7;outline-offset:3px}
.node.selected small {color:#fff1c7}
.node-new {position:absolute;top:-1px;right:-2px;width:8px;height:8px;padding:0;border:1px solid #fff0b5;border-radius:50%;background:#ffcc57;box-shadow:0 0 0 2px #242a25,0 0 7px #ffd36b;font-size:0}
.node:hover .node-icon-art {filter:brightness(1.18)}
.detail {
  position:relative;
  display:grid;
  min-width:0;
  width:100%;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  flex:none;
  padding:8px 0 0;
  border-top:1px solid #394b65;
  background:#211e19;
}
.detail p {margin:5px 0;color:var(--muted);font-size:14px;line-height:1.55}
.detail>div {min-width:0;overflow-wrap:anywhere}
.detail button {min-width:135px}
.tree-workspace {display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,310px);gap:10px;flex:1 1 auto;min-height:0}
.tree-workspace .tree-stage {height:100%}
.tree-workspace .tree-viewport {min-height:0;height:100%}
.tree-workspace .detail {display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px;min-width:0;min-height:0;overflow:auto;padding:12px;border:1px solid #525746;background:#24231f}
.tree-workspace .detail button {width:100%;height:48px;min-height:48px;align-self:start;flex:none;margin-top:0}
.tree-branches {display:flex;gap:4px;min-width:0;overflow-x:auto;flex:none}
.tree-branches button {min-width:44px;height:40px;padding:0 9px;font-size:13px;white-space:nowrap}
.tree-branches button.active {border-color:#e4bd6e;background:#47351e;color:#ffe9b2}
.toast {
  position:fixed;
  z-index:9;
  bottom:max(18px,var(--safe-bottom));
  left:50%;
  transform:translateX(-50%);
  padding:10px 15px;
  border:2px solid var(--brass);
  background:#302216;
  color:var(--light);
  font-size:14px;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s;
}
.toast.show {opacity:1}
@media(max-width:700px) {
  .shell {grid-template-rows:54px minmax(0,1fr) 70px}
  .resource {gap:5px;padding-right:5px;padding-left:5px;font-size:14px}
  .resource b {font-size:16px}
  .actions {gap:7px;padding-right:10px;padding-left:10px}
  .btn {gap:6px;padding-right:5px;padding-left:5px;font-size:14px}
  .action-btn {max-width:none}
  .action-btn svg {width:22px;height:22px}
  .detail {grid-template-columns:1fr}
  .detail button {width:100%}
  .modal:has(.tree-viewport) {grid-template-columns:minmax(0,1fr);padding:0}
  .dialog:has(.tree-viewport) {width:100vw;max-width:100vw;min-width:0;height:100dvh;max-height:100dvh;padding:9px}
  .tree-tools {gap:5px;font-size:12px}
  .tree-tools {display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"help controls" "branches branches" "legend legend";justify-content:stretch;align-items:center;min-height:0;row-gap:4px;overflow:visible}
  .tree-help {grid-area:help}
  .tree-branches {grid-area:branches;width:100%;min-height:44px;overflow-x:auto;overscroll-behavior-x:contain}
  .tree-tools .tree-legend {grid-area:legend;justify-content:flex-start;gap:8px;overflow-x:auto}
  .tree-tools>div:not(.tree-legend) {grid-area:controls}
  .tree-tools>div:not(.tree-legend) button {min-width:44px;height:44px}
  .tree-help {font-size:12px}
  .desktop-help {display:none}
  .mobile-help {display:inline}
  .tree-workspace {grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(180px,1fr) minmax(160px,38%);gap:6px}
  .tree-workspace .detail {padding:7px;gap:5px}
  .tree-workspace .detail button {min-height:44px}
  .tree-branches button {min-width:44px;height:44px;padding:0 8px;font-size:11px}
  .tree-minimap {width:88px;height:68px}
}
@media(max-width:380px) {
  .top {grid-template-columns:1.15fr 1fr}
  .depth-resource span {display:none}
  .resource svg {width:18px;height:18px}
  .actions {gap:5px;padding-right:7px;padding-left:7px}
}
@media(max-height:480px) and (orientation:landscape) {
  .shell {grid-template-rows:48px minmax(0,1fr) 62px}
  .resource {padding-bottom:4px}
  .battery-meter {bottom:2px}
  .btn {min-height:46px}
  .field-hint {bottom:5px}
  .tree-heading {padding:3px 0;font-size:13px}
  .tree-tools {min-height:40px}
  .tree-tools button {height:44px}
  .detail {grid-template-columns:minmax(0,1fr) 140px;gap:8px;padding-top:5px}
  .detail p {margin:2px 0;font-size:12px;line-height:1.35}
  .detail button {min-width:120px;width:140px}
  .tree-dialog .foot {display:none}
}

/* Permanent progression uses the skill atlas in a spatial, prerequisite tree. */
.meta-dialog {width:min(1040px,96vw);max-height:min(92dvh,820px);overflow:auto;padding:14px;background:#201912}
.meta-dialog .dialog-head {top:-14px}
.meta-dialog>p {margin:8px 0;color:#e8bb65}
.meta-tree-panel {display:grid;min-height:344px;place-items:center;overflow-x:auto;overflow-y:hidden;border:2px solid #795333;background:#181914;box-shadow:inset 0 0 0 2px #171b22}
.meta-tree {position:relative;flex:none;max-width:none}
.meta-links {position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.meta-link {fill:none;stroke:#61523a;stroke-width:5;stroke-linecap:square;stroke-linejoin:miter;opacity:.55}
.meta-link.open {stroke:#bd8b45;opacity:.88}
.meta-node {position:absolute;z-index:1;display:flex;width:130px;min-height:108px;align-items:center;flex-direction:column;justify-content:center;gap:3px;padding:3px;border:2px solid #68778b;border-radius:2px;background:#242a25;color:#aab7c7;transform:translate(-50%,-50%);cursor:pointer;box-shadow:0 3px 0 #080e17,inset 0 0 0 1px #101a2a}
.meta-node .meta-icon {width:48px;height:48px;margin:0;border:2px solid currentColor;border-radius:2px;background-color:#242a25;box-shadow:none}
.meta-icon svg {display:block;width:29px;height:29px;fill:currentColor;shape-rendering:crispEdges}
.meta-node-name {max-width:122px;overflow:hidden;font-size:15px;line-height:18px;text-align:center;text-overflow:ellipsis;white-space:nowrap;text-shadow:1px 1px #141510,-1px 1px #141510}
.meta-node-state,.meta-node-cost {display:block;font-size:12px;line-height:15px;text-align:center}
.meta-node-cost {color:#f2d594}
.meta-node.root {border-color:#c89a51;background:#302619;color:#ffe3a1}
.meta-node.affordable {border-color:#ffd17a;background:#332916;color:#ffe4a5;box-shadow:0 0 0 2px #ffd17a,0 3px 0 #080e17}
.meta-node.owned {border-color:#8bdcba;background:#234b43;color:#dcffec}
.meta-node.locked {border-color:#727665;background:#252722;color:#9ca9bd;filter:saturate(.65)}
.meta-node.choice {border-color:#bd8b45;background:#28251f;color:#f1d398}
.meta-node.active {border-color:#8bdcba;background:#234b43;color:#dcffec;box-shadow:0 0 0 2px #8bdcba,0 3px 0 #080e17}
.meta-node.selected {outline:2px solid #fff1c7;outline-offset:4px;z-index:2}
.meta-node:focus-visible {outline:3px solid #fff1c7;outline-offset:5px}
.meta-lower {display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.meta-detail {display:grid;min-width:0;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:2px solid #795333;background:#29251f;box-shadow:inset 0 0 0 2px #171b22}
.meta-detail-icon .meta-icon {width:48px;height:48px;border:2px solid #c89a51;background-color:#302619;color:#ffe3a1}
.meta-detail.owned .meta-detail-icon .meta-icon,.meta-detail.active .meta-detail-icon .meta-icon {border-color:#8bdcba;background-color:#234b43;color:#dcffec}
.meta-detail-copy {min-width:0}
.meta-detail-heading {display:flex;flex-wrap:wrap;align-items:baseline;gap:7px}
.meta-detail-heading h3 {margin:0;color:#f5d48f;font-size:16px}
.meta-detail-heading span {color:#d7c7aa;font-size:12px}
.meta-detail p {margin:5px 0 0;color:#ddd1ba;font-size:13px;line-height:1.45}
.meta-detail-action .btn {min-width:138px;max-width:180px;padding:7px;font-size:14px;line-height:1.3}
.meta-detail-note {max-width:145px;color:#d9c8aa;font-size:12px;line-height:1.4;text-align:center}
.meta-prestige-info {margin:0;padding:8px 10px;border:2px solid #795333;background:#29251f;box-shadow:inset 0 0 0 2px #171b22}
.meta-prestige-info h3 {margin:0 0 5px;color:#f5d48f;font-size:16px}
.meta-prestige-info p {margin:4px 0;color:#d8cbb4;font-size:12px;line-height:1.4}
.meta-prestige-info #meta-prestige {margin-top:5px;padding:6px 10px;font-size:14px}
#meta-confirm {color:#ffd18c}
#meta-feedback {min-height:22px;margin:0;color:#e8bb65;font-size:13px}
#meta-open {max-width:160px;font-size:17px}
@media(max-width:900px) {
  .meta-dialog {width:min(780px,96vw)}
  .meta-lower {grid-template-columns:1fr}
  .meta-tree-panel {justify-content:start}
}
@media(max-width:560px) {
  .meta-dialog {width:100%;max-height:100dvh;padding:10px}
  .meta-tree-panel {min-height:330px}
  .meta-lower {gap:8px}
  .meta-detail {grid-template-columns:48px minmax(0,1fr);gap:7px;padding:8px}
  .meta-detail-icon .meta-icon {width:40px;height:40px}
  .meta-detail-action {grid-column:1 / -1}
  .meta-detail-action .btn {max-width:none;width:100%}
}

/* Facility tree: paid amber paths and free module choices share one compact map. */
.meta-tree-panel {min-height:380px;overflow:auto;place-items:center}
.meta-node {width:96px;min-height:94px;padding:3px;gap:2px}
.meta-node .meta-icon {width:40px;height:40px}
.meta-node-name {max-width:90px;font-size:13px;line-height:16px}
.meta-node-state,.meta-node-cost {font-size:11px;line-height:13px}
.meta-link {stroke-width:3}
.meta-link.module-link {stroke:#73b6b0;stroke-dasharray:7 4}
.meta-free-controls {display:flex;gap:16px;align-items:center;padding:7px 2px;color:#d8c9ac;font-size:13px}
#meta-controls {display:flex;gap:15px;flex-wrap:wrap}
.meta-free-controls input,.meta-detail input {accent-color:#d6ad67;vertical-align:middle}
.meta-rewards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:5px 0}
.meta-rewards span {padding:3px;border:1px solid #4d4b3e;color:#aaac9a;font-size:12px}
.meta-rewards span.completed {border-color:#a6874e;color:#ffe1a0}
.meta-rewards b {float:right;font-weight:normal}
.meta-detail {align-items:start;grid-template-columns:42px minmax(0,1fr);max-height:210px;overflow:auto;padding:9px}
.meta-detail-icon .meta-icon {width:40px;height:40px}
.meta-detail-action {grid-column:1 / -1;display:flex;gap:6px;justify-content:flex-end}

.save-actions {display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.exact-materials {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.exact-materials span {padding:5px;border:1px solid color-mix(in srgb,var(--ore) 55%,#393328);color:var(--ore);font-size:14px}
.exact-materials b {float:right;color:var(--text)}
#save-status {display:block;min-height:22px;margin-top:4px}
.save-actions .btn,.save-file-label {display:inline-flex;min-height:44px;align-items:center;justify-content:center;padding:7px 10px;font-size:13px}
#save-file {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.save-file-label:focus-within,.save-file-label:has(+ #save-file:focus-visible) {outline:2px solid var(--light);outline-offset:2px}
#save-text {display:block;width:100%;min-height:76px;margin:8px 0;padding:8px;border:1px solid #765734;background:#151513;color:var(--text);font:13px/1.4 monospace;resize:vertical}
#save-status {min-width:0;color:#e7c58b;font-size:12px;overflow-wrap:anywhere}
.meta-tree-panel {display:block;overflow:auto;overscroll-behavior:contain;touch-action:none}
.meta-tree-frame {position:relative;display:grid;flex:none;place-items:start;width:1000px;height:380px;margin:auto}
.meta-tree {transform-origin:top left}
.meta-tree-tools {display:flex;gap:5px;align-items:center;justify-content:flex-end;overflow-x:auto;min-height:48px}
.meta-tree-tools button {flex:none;min-width:44px;height:44px;border:1px solid #929078;background:#2b2923;color:#eef4fc;font:inherit}
.main {display:grid;grid-template-rows:auto minmax(0,1fr)}
.game-hud {position:relative;z-index:1;display:flex;min-width:0;align-items:center;justify-content:space-between;gap:8px;padding:5px 9px;background:#17120f;border-bottom:1px solid #63482d}
.game-hud .arena-hud {position:static;display:flex;min-width:0;max-width:min(58%,700px);flex-direction:column;gap:3px}
.game-hud .arena-hud > span {padding:2px 5px;font-size:13px}
.game-hud .arena-hud > #depth-progress {max-width:100%;font-size:12px}
.game-hud .mineral-hud {position:static;grid-template-columns:repeat(2,minmax(92px,1fr));flex:none;padding:3px;gap:1px 4px}
.game-hud .mineral-count {min-height:22px;font-size:12px}
.scene-wrap {min-height:0}
@media(max-width:700px) {
  .shell {grid-template-rows:54px minmax(0,1fr) 66px;height:100dvh;min-height:0;padding-bottom:var(--safe-bottom)}
  .top {grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(66px,.75fr)}
  .resource {min-height:50px;gap:4px;padding:0 4px 5px;font-size:12px}
  .resource svg {width:18px;height:18px}
  .resource b {font-size:14px}
  .depth-resource span {display:none}
  .sound-toggle {font-size:12px}
  .battery-meter {right:8%;left:8%}
  .game-hud {display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:3px 6px}
  .game-hud .arena-hud {max-width:100%;min-height:16px;gap:1px}
  .game-hud .arena-hud > span {padding:0 3px;font-size:11px;line-height:1.2}
  .game-hud .arena-hud > #depth-progress {display:block;max-height:18px;overflow:hidden;font-size:10px}
  .game-hud .mineral-hud {width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;padding:2px}
  .game-hud .mineral-count {grid-template-columns:14px auto;gap:2px;min-width:0;min-height:24px;font-size:10px}
  .game-hud .mineral-count .mineral-glyph {width:14px;height:18px}
  .game-hud .mineral-glyph svg {width:14px;height:14px}
  .game-hud .mineral-count b {grid-column:2;justify-self:start;font-size:11px}
  .game-hud .mineral-count > span:nth-child(2) {display:none}
  .field-hint {right:7px;bottom:7px;left:auto;max-width:calc(100% - 14px);padding:3px 6px;font-size:10px;opacity:.88}
  .deep-panel {bottom:42px;left:6px;width:min(300px,calc(100% - 12px));max-height:45%;overflow:auto;padding:6px;font-size:12px}
  .deep-panel .btn {min-height:44px}
  .actions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(44px,1fr);gap:5px;padding:5px 8px}
  .actions:before,.actions:after {display:none}
  .actions .btn {width:100%;min-width:0;min-height:44px;max-width:none;gap:5px;padding:4px;font-size:13px;line-height:1.1}
  .actions .btn svg {width:20px;height:20px}
  .shell[data-mode="town"] #meta-open {grid-column:3;grid-row:1}
  .shell[data-mode="town"] #depart {grid-column:1;grid-row:1}
  .shell[data-mode="town"] #tree-open {grid-column:2;grid-row:1}
  .shell[data-mode="town"] #return {display:none}
  .shell[data-mode="run"] {grid-template-rows:54px minmax(0,1fr) 58px}
  .shell[data-mode="run"] #meta-open,.shell[data-mode="run"] #depart {display:none}
  .shell[data-mode="run"] .actions {grid-template-columns:repeat(2,minmax(0,1fr))}
  .shell[data-mode="run"] #tree-open {grid-column:1;grid-row:1}
  .shell[data-mode="run"] #return {grid-column:2;grid-row:1}
  .node-more,.save-advanced {margin:4px 0;color:#d7c4a0}
  .node-more summary,.save-advanced summary,.meta-reward-details summary,.meta-free-controls summary {min-height:44px;display:flex;align-items:center;cursor:pointer}
  .tree-workspace {grid-template-rows:minmax(120px,1fr) minmax(220px,40%)}
  .tree-workspace .detail {display:flex;flex-direction:column;align-items:stretch;overflow:auto}
  .tree-workspace .detail>div:first-child {display:flex;flex-direction:column;gap:2px}
  .node-purchase-row {display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
  .node-purchase-row .recipe-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;margin:0}
  .node-purchase-row .recipe-item {justify-content:space-between;min-height:28px;gap:3px;padding:2px 5px;font-size:11px;white-space:normal}
  .node-purchase-row .recipe-item strong {font-size:11px}
  .tree-workspace .detail .node-purchase-row #buy-node {width:100%;min-width:0;min-height:48px;margin:0}
  .node-complete {padding:7px;color:#aee2c3}
  .meta-tree-panel {height:clamp(170px,24dvh,220px);min-height:170px}
  .meta-detail {max-height:none;overflow:visible;position:sticky;bottom:0;z-index:3;background:#201912}
  .meta-detail-action .btn {min-height:48px}
  .meta-prestige-info #meta-prestige {position:sticky;bottom:0;z-index:3;min-height:48px;width:100%}
  .meta-reward-details {margin:4px 0;color:#d8cbb4;font-size:12px}
  .meta-free-controls {display:block;min-width:0;padding:3px 0}
  #meta-controls {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:4px 0}
  #meta-controls label {white-space:nowrap}
  .dialog {max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 12px)}
  .dialog:has(.tree-viewport) {width:100%;max-width:100%;height:calc(100dvh - var(--safe-top) - var(--safe-bottom));max-height:none;padding:7px}
  .tree-workspace {grid-template-rows:minmax(160px,1fr) minmax(110px,34%)}
  .meta-tree-tools {justify-content:flex-start}
  .meta-tree-tools button {min-width:44px;height:44px}
}
@media(max-width:380px) {
  .top {grid-template-columns:minmax(0,1fr) minmax(0,1fr) 70px}
  .depth-resource span {display:none}
  .depth-resource {font-size:11px}
  .resource svg {width:16px;height:16px}
  .game-hud {padding-inline:4px}
  .game-hud .mineral-count {grid-template-columns:12px auto auto;gap:1px;font-size:9px}
  .game-hud .mineral-count b {font-size:10px}
}
@media(max-height:520px) and (orientation:landscape) {
  .shell {grid-template-rows:48px minmax(0,1fr) 68px}
  .top {grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(70px,.65fr)}
  .resource {min-height:44px;font-size:12px}
  .actions {display:flex;gap:6px;padding:4px 8px}
  .actions .btn {flex:1;min-height:48px;max-width:none;font-size:12px}
  .shell[data-mode="town"] #return {display:none}
  .shell[data-mode="run"] #meta-open,.shell[data-mode="run"] #depart {display:none}
  .actions .btn svg {width:18px;height:18px}
  .arena-hud {top:4px}
  .mineral-hud {top:4px}
  .field-hint {bottom:4px}
  .tree-workspace {grid-template-columns:minmax(0,1fr) 210px;grid-template-rows:minmax(0,1fr)}
}
.meta-detail-action .btn {min-height:48px;min-width:120px;padding:6px}
.meta-policy {display:block;margin-top:8px}
.meta-policy select {font:inherit;background:#192b2b;color:#f3e2bc;border:1px solid #9d8253;padding:4px}

/* Compact map presentation; the node button still has a large touch target. */
@media(max-width:700px) {
  .tree-dialog .dialog-head {padding-bottom:4px}
  .tree-dialog .dialog-head h2 {font-size:18px}
  .tree-heading {padding:1px 0;font-size:12px}
  .tree-heading>span {display:none}
  .tree-tools {row-gap:2px}
  .tree-tools>div:not(.tree-legend) button {min-width:44px;height:44px;font-size:14px}
  .tree-help {font-size:10px}
  .tree-workspace {grid-template-rows:minmax(120px,1fr) minmax(220px,40%)}
  .tree-workspace .detail {gap:4px;padding:6px}
  .tree-workspace .detail h3 {margin:0;font-size:14px}
  .tree-workspace .detail p {margin:2px 0;font-size:12px;line-height:1.35}
  .tree-minimap {width:68px;height:52px;top:5px;right:5px}
  .tree-dialog .foot {font-size:10px;margin:4px 0 0;line-height:1.3}
}
@media(max-width:700px),(max-width:1000px) and (max-height:520px) {
  .meta-tree-panel {height:clamp(170px,24dvh,220px);min-height:170px}
  .meta-tree-tools {min-height:44px}
}
@media(max-width:700px) {
  .tree-tools {display:flex;flex-wrap:wrap;flex:none;min-height:44px;gap:3px}
  .tree-tools .tree-branches,.tree-tools .tree-legend {display:none}
  .tree-dialog>.dialog-head,.tree-dialog>.tree-heading,.tree-dialog>.foot {flex-shrink:0}
  .tree-workspace .recipe-item {min-height:26px;gap:5px;padding:2px 5px;font-size:13px}
  .tree-workspace .recipe-item strong {font-size:13px}
  .tree-workspace .recipe-glyph,.tree-workspace .recipe-glyph .node-icon-art {width:16px;height:16px}
  .tree-workspace .detail button {height:44px;min-height:44px}
  .tree-workspace .detail .node-purchase-row #buy-node {height:48px;min-height:48px}
}

.recipe-legend,.recipe-amount-divider {display:none}
@media(max-width:700px) {
  .recipe-legend {display:block;color:var(--muted);font-size:11px}
  .recipe-amount-label {display:none}
  .recipe-amount-divider {display:inline}
  .node-purchase-row .recipe-list {display:flex;flex-wrap:wrap}
  .node-purchase-row .recipe-item {flex:0 1 auto;max-width:100%;white-space:nowrap;font-size:12px}
  .node-purchase-row .recipe-item strong {font-size:12px;white-space:nowrap}
  .node-purchase-row .recipe-mineral {white-space:nowrap;flex:none}
}