/* Tree map and build planner, styled after the game's tree window (TreeStyle, RefinedUI, UiKit). */
.tw {
  --tw-font: "Averia Serif Libre", Georgia, "Times New Roman", serif;
  --tw-ink: #e9dabd; --tw-muted: #a19c88; --tw-gold: #f4c76f; --tw-gold-2: #efd18b; --tw-title: #e5c581;
  --tw-line: #2a3a3f; --tw-rule: #66543a; --tw-edge: rgba(177, 143, 83, .75); --tw-sheet: rgba(9, 15, 18, .97);
  --tw-value: #8f9bff; --tw-good: #b7cd8b; --tw-bad: #e8848a;
  position: relative; height: calc(100vh - var(--header-h) - 150px); min-height: 520px;
  border: 1px solid var(--tw-line); border-radius: 6px; overflow: hidden; background: rgb(13, 17, 18);
  color: var(--tw-ink); font-family: var(--tw-font); color-scheme: dark;
}
.tw.full {
  position: fixed; inset: 0; z-index: 45; height: auto; min-height: 0; border: 0; border-radius: 0;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.map-full { overflow: hidden; }
#map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#map:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: -3px; }
.tw-info, .tw-panel, .tw-tip {
  background: linear-gradient(rgba(8, 13, 16, .97), rgba(6, 10, 12, .97));
  border: 1px solid var(--tw-edge);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(42, 58, 63, .85), 0 12px 32px rgba(0, 0, 0, .55);
}

/* Top-left info panel (UnifiedInfo): points in place of the level line, search, attributes. */
.tw-info { position: absolute; left: 16px; top: 18px; width: min(360px, calc(100% - 32px)); padding: 12px 14px 10px; border-radius: 4px; z-index: 3; }
.tw-knot { position: absolute; top: -14px; width: 34px; pointer-events: none; }
.tw-knot.l { left: -12px; }
.tw-knot.r { right: -12px; }
.tw-clasp { position: absolute; top: -9px; left: 50%; width: 18px; transform: translateX(-50%); pointer-events: none; }
.tw-xp { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; padding-bottom: 8px; border-bottom: 1px solid var(--tw-rule); }
.tw-level { margin: 0; font-size: 1.15rem; color: var(--tw-ink); }
.tw-level b { color: var(--tw-gold); font-weight: 700; }
.tw-level span { color: var(--tw-muted); font-size: .9rem; }
.tw-left { margin: 0; font-size: .85rem; color: var(--tw-muted); text-align: right; }
.tw-left.bad { color: var(--tw-bad); }
.tw-track { grid-column: 1 / -1; height: 10px; padding: 2px; border: 1px solid var(--tw-line); border-radius: 2px; background: rgba(3, 6, 7, .9); }
.tw-fill { height: 100%; width: 0; background: linear-gradient(90deg, rgb(237, 203, 133), rgb(155, 109, 43)); transition: width .25s; }
.tw-need { grid-column: 1 / -1; margin: 0; font-size: .78rem; color: var(--tw-muted); }
.tw-need:empty { display: none; }
.tw-search { position: relative; display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 0 10px; height: 32px; border: 1px solid var(--tw-line); border-radius: 2px; background: rgba(3, 7, 9, .92); }
.tw-search img { width: 16px; height: 16px; opacity: .85; }
.tw-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--tw-ink); font: 1rem var(--tw-font); caret-color: var(--tw-gold); outline: none; }
.tw-search input::placeholder { color: var(--tw-muted); }
.tw-count { font-size: .8rem; color: var(--tw-gold-2); }
.tw-search .hits { position: absolute; left: -1px; right: -1px; top: calc(100% + 4px); max-height: 46vh; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--tw-sheet); border: 1px solid var(--tw-edge); z-index: 6; }
.tw-search .hits a { color: var(--tw-ink); font-family: var(--tw-font); }
.tw-search .hits a small { color: var(--tw-muted); }
.tw-search .hits a:hover, .tw-search .hits a.on { background: rgba(244, 199, 111, .14); }
.tw-search .hits .empty { color: var(--tw-muted); }
.tw-attrs { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 8px; border-top: 1px solid var(--tw-rule); }
.tw-attr { display: flex; flex-direction: column; padding: 0 10px; border-left: 1px solid #353c3b; }
.tw-attr:first-child { border-left: 0; padding-left: 2px; }
.tw-attr span { font-size: .85rem; color: var(--tw-ink); }
.tw-attr b { font-size: 1.3rem; line-height: 1.1; }
.tw-attr.str b, .tw-btn.str { color: #d88e75; }
.tw-attr.dex b, .tw-btn.dex { color: #b7cd8b; }
.tw-attr.int b, .tw-btn.int { color: #9ecfdf; }

/* Buttons (dark steel, bronze edge, gold when on). */
.tw-tools { position: absolute; top: 18px; right: 16px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: calc(100% - 410px); z-index: 3; }
.tw-btn {
  height: 32px; padding: 0 12px; border: 1px solid #5c4a2c; border-radius: 3px;
  background: linear-gradient(#1f2c30, #10181b); color: var(--tw-ink); font: .92rem var(--tw-font); cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 238, 190, .08);
}
.tw-btn:hover:not(:disabled) { border-color: #b18f53; color: #fff3d6; background: linear-gradient(#27373c, #141e22); }
.tw-btn:disabled { opacity: .45; cursor: default; }
.tw-btn[aria-pressed="true"] { border-color: var(--tw-gold); color: var(--tw-gold-2); }
.tw-btn.sq { width: 32px; padding: 0; font-size: 1.15rem; }
.tw-btn.gold { background: linear-gradient(rgb(237, 203, 133), rgb(155, 109, 43)); color: #1a1208; border-color: #e5c581; font-weight: 700; }
.tw-btn.gold:hover:not(:disabled) { background: linear-gradient(#ffe3a6, #b9853b); color: #120c04; }
.tw-btn.danger { color: var(--tw-bad); }
.tw-btn.mini { height: 26px; padding: 0 8px; font-size: .85rem; }
.tw-btn:focus-visible, .tw-x:focus-visible, .tw-opt:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: 2px; }

/* Builds manager on the right. */
.tw-panel { position: absolute; top: 62px; right: 16px; bottom: 16px; width: min(360px, calc(100% - 32px)); display: flex; flex-direction: column; border-radius: 4px; z-index: 4; }
.tw-panel[hidden] { display: none; }
.tw-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--tw-rule); background: linear-gradient(rgba(42, 58, 63, .35), transparent); }
.tw-panel-head h2 { margin: 0; font: 700 1.2rem var(--tw-font); color: var(--tw-title); letter-spacing: .02em; }
.tw-x { width: 28px; height: 28px; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--tw-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.tw-x:hover { color: var(--tw-gold); border-color: #5c4a2c; }
.tw-panel-body { flex: 1; overflow-y: auto; padding: 4px 14px 14px; scrollbar-color: #5c4a2c transparent; }
.tw-sec { padding: 10px 0; border-bottom: 1px solid rgba(102, 84, 58, .6); display: flex; flex-direction: column; gap: 8px; }
.tw-sec:last-child { border-bottom: 0; }
.tw-sec h3, .tw-sec summary { margin: 0; font: 700 .95rem var(--tw-font); color: var(--tw-gold-2); text-transform: uppercase; letter-spacing: .06em; }
.tw-sec summary { cursor: pointer; }
details.tw-sec { display: block; }
details.tw-sec > :not(summary) { margin-top: 8px; }
.tw-row { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .92rem; color: var(--tw-ink); }
.tw-row[hidden] { display: none; }
.tw-row input, .tw-row select { flex: 1; min-width: 0; }
.tw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.tw-grid[hidden] { display: none; }
.tw-grid label { display: flex; flex-direction: column; gap: 2px; font-size: .82rem; color: var(--tw-muted); }
.tw input[type="number"], .tw input[type="text"], .tw select, .tw textarea {
  height: 30px; padding: 0 8px; border: 1px solid var(--tw-line); border-radius: 2px; background: rgba(3, 7, 9, .92);
  color: var(--tw-ink); font: .92rem var(--tw-font);
}
.tw textarea { display: block; height: auto; padding: 6px 8px; width: 100%; font: .78rem/1.4 var(--font-mono); resize: vertical; }
.tw input:focus, .tw select:focus, .tw textarea:focus { outline: none; border-color: #b18f53; }
.tw-note { margin: 0; font-size: .8rem; color: var(--tw-muted); line-height: 1.35; }
.tw-note:empty { display: none; }
.tw-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tw-attr-set { flex-wrap: wrap; font-size: .85rem; color: var(--tw-muted); }
.import-box { display: flex; flex-direction: column; gap: 6px; }
.import-box[hidden] { display: none; }
.import-box .tw-btn { align-self: flex-start; }
.plan-msg { margin: 0; min-height: 1.2em; font-size: .85rem; color: var(--tw-gold-2); }
.plan-msg.bad { color: var(--tw-bad); }
.plan-msg:empty { display: none; }
.plan-list { margin: 0; padding-left: 18px; font-size: .88rem; color: var(--tw-ink); }
.plan-list li { margin: 3px 0; }
.plan-list li::marker { color: #8a7650; }
.plan-list a { color: var(--tw-ink); text-decoration: none; }
.plan-list a:hover { color: var(--tw-gold); }
.plan-list a.ks { color: var(--tw-gold); font-weight: 700; }
.tw .muted { color: var(--tw-muted); }
.tw-stats .v, .tw-tip .v { color: var(--tw-value); }
.tw-saved { padding-left: 0; list-style: none; }
.tw-saved li { display: flex; align-items: center; gap: 6px; }
.tw-saved li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-saved .tw-x { width: 22px; height: 22px; font-size: 1rem; }
.tw-add { color: #85e08c; font-weight: 700; }
.tw-drop { color: #ed7566; font-weight: 700; }
#cmp-saved { width: 100%; }

/* Minimap (bottom left; not in the game). */
.tw-mini { position: absolute; left: 16px; bottom: 16px; width: 190px; height: 170px; border: 1px solid var(--tw-edge); border-radius: 3px; cursor: crosshair; z-index: 2; }
.tw-mini[hidden] { display: none; }

/* Tooltip (BuildTooltip: header band with knots and clasp, gold title, affix lines with markers, option rows, foot). */
.tw-tip { position: absolute; z-index: 8; width: min(400px, calc(100% - 16px)); max-height: calc(100% - 16px); overflow-y: auto; border-radius: 3px; pointer-events: none; font-family: var(--tw-font); }
.tw-tip[hidden] { display: none; }
.tw-tip.pinned, .tw-tip.sheet { pointer-events: auto; }
.tw-tip.pinned { border-color: var(--tw-gold); }
.tw-tip.sheet { left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto; max-height: 62%; }
.tw-tip-head {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 12px 44px 8px; text-align: center;
  background: url(../art/refined-header-left.webp) left center / auto 100% no-repeat, url(../art/refined-header-right.webp) right center / auto 100% no-repeat, url(../art/refined-header-middle.webp) center / 100% 100% no-repeat;
}
.tw-tip-head::before { content: ""; position: absolute; top: -1px; left: 50%; width: 20px; height: 20px; transform: translateX(-50%); background: url(../art/refined-clasp.webp) center / contain no-repeat; }
.tw-tip-title { font-size: 1.32rem; line-height: 1.15; color: var(--tw-title); text-shadow: 0 1px 2px #000; }
.tw-tip-en { font-size: .8rem; color: var(--tw-muted); letter-spacing: .02em; }
.tw-tip-body { padding: 8px 18px 6px; font-size: .98rem; color: var(--tw-ink); }
.tw-tip-kind { margin: 0 0 6px; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; text-align: center; }
.tw-fx { margin: 0; padding: 0; list-style: none; }
.tw-fx li { position: relative; margin: 3px 0; padding-left: 20px; line-height: 1.35; }
.tw-fx img { position: absolute; left: 2px; top: .38em; width: 10px; height: 10px; }
.tw-lore { margin: 8px 0 0; font-style: italic; font-size: .88rem; color: #a6a18a; line-height: 1.35; }
.tw-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tw-opt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; text-align: left;
  border: 1px solid var(--tw-line); border-left: 3px solid transparent; border-radius: 2px; background: rgba(14, 22, 25, .92);
  color: #dcd3b8; font: inherit; cursor: pointer;
}
.tw-opt:hover:not(:disabled) { border-color: #5c4a2c; background: rgba(28, 40, 44, .95); }
.tw-opt:disabled { cursor: default; }
.tw-opt.here { border-left-color: var(--tw-gold); background: rgba(40, 34, 20, .9); }
.tw-opt.here b { color: #ead391; }
.tw-opt.here .tw-opt-text span { color: var(--tw-good); }
.tw-opt.elsewhere { opacity: .62; }
.tw-opt.elsewhere b { color: #9aa3a6; }
.tw-sel { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.tw-opt-ico { width: 34px; height: 34px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(177, 143, 83, .5); }
.tw-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tw-opt-text b { font-size: .98rem; font-weight: 700; }
.tw-opt-text span { font-size: .86rem; line-height: 1.3; color: #dcd3b8; }
.tw-opt-text em { font-size: .8rem; color: var(--tw-muted); }
.tw-more { align-self: flex-end; margin: -2px 2px 2px; font-size: .8rem; color: var(--tw-gold-2); }
.tw-more:hover { color: #fff3d6; }
.tw-tip-foot { margin: 6px 18px 0; padding: 8px 0 12px; border-top: 1px solid rgba(157, 135, 78, .45); font-size: .85rem; color: var(--tw-muted); line-height: 1.35; }
.tw-tip-foot b { color: var(--tw-gold-2); }
.tw-tip-btns { display: flex; gap: 8px; margin-top: 8px; }
.tw-tip-btns button { flex: 1; height: 38px; border: 1px solid #5c4a2c; border-radius: 3px; background: linear-gradient(#1f2c30, #10181b); color: var(--tw-ink); font: .95rem var(--tw-font); }
.tw-tip-btns button[data-act="take"] { background: linear-gradient(rgb(237, 203, 133), rgb(155, 109, 43)); color: #1a1208; font-weight: 700; }
.tw-help { margin-top: 10px; }

@media (max-width: 900px) {
  .tw { height: calc(100svh - var(--header-h) - 90px); min-height: 460px; }
  .tw-info { left: 8px; top: 10px; width: calc(100% - 16px); padding: 8px 10px 6px; }
  .tw-knot, .tw-clasp, .tw-attrs { display: none; }
  .tw-tools { top: auto; bottom: 8px; right: 8px; left: 8px; max-width: none; justify-content: center; }
  .tw-tools #zoom-fit, .tw-tools #mini-btn { display: none; }
  .tw-panel { top: 8px; right: 8px; bottom: 52px; left: 8px; width: auto; }
  .tw-mini { display: none; }
}