/* The in-game Legacy Tree window, shared by the Database and the Forge. */
/* ---- Legacy Tree window (in-game replica) ---- */
.lgwin { position: relative; max-width: 46rem; margin: 1rem 0 .6rem; border-radius: 10px; padding: 0 0 .9rem;
  background: linear-gradient(180deg, #2a241c, #1b1712 30%, #16130f); border: 2px solid #5b4a2c;
  box-shadow: 0 0 0 1px #0c0a07, 0 12px 34px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,220,150,.08); }
.lg-title { position: relative; text-align: center; font: 600 .82rem/1 var(--heading); color: #f5e6b8; letter-spacing: .03em;
  padding: .55rem 0; border-bottom: 1px solid #4a3c24; background: linear-gradient(180deg, #3a2f20, #231d15); border-radius: 8px 8px 0 0; }
.lg-emblem img { position: absolute; left: -.6rem; top: -.7rem; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 2px solid #8a6d3b; box-shadow: 0 2px 8px rgba(0,0,0,.7); }
.lg-bar { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem .6rem 3.2rem; }
.lg-crown { display: grid; place-items: center; min-width: 2rem; height: 2.1rem; font: 700 .85rem/1 var(--heading); color: #ffd76a;
  background: linear-gradient(180deg, #3b3226, #211b13); border: 1px solid #8a6d3b; clip-path: polygon(0 18%, 25% 0, 50% 14%, 75% 0, 100% 18%, 100% 78%, 50% 100%, 0 78%); }
.lg-avail { font: 600 .92rem var(--heading); color: #f1efe8; background: rgba(0,0,0,.35); padding: .3rem .8rem; border-radius: 4px; }
.lg-avail b { color: #3cff5a; }
.lg-search { margin-left: auto; width: 11rem; background: #0e0c09; border: 1px solid #5b4a2c; border-radius: 4px; color: #eee; padding: .3rem .5rem; font-size: .76rem; }
.lg-body { display: grid; grid-template-columns: 5.2rem 1fr; min-height: 21rem; margin: 0 .8rem; border: 1px solid #3a3022; border-radius: 6px;
  background: radial-gradient(ellipse at 60% 40%, #231e17, #15120e 70%); }
.lg-rail { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: .8rem 0; border-right: 2px solid #3a3022; align-items: center; }
.lg-port { position: relative; width: 3.8rem; height: 3.8rem; padding: 0; border-radius: 50%; cursor: pointer; overflow: visible;
  border: 3px solid #4a4a4a; background: #111; box-shadow: 0 3px 10px rgba(0,0,0,.7); transition: border-color .12s, transform .12s; }
.lg-port img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: brightness(.85); }
.lg-port:hover { transform: scale(1.05); border-color: #a08a5c; }
.lg-port.on { border-color: #ffd100; box-shadow: 0 0 0 2px #6b5410, 0 0 16px rgba(255,209,0,.45); }
.lg-port.on img { filter: none; }
.lg-port.hit::after { content: ""; position: absolute; right: -2px; top: -2px; width: .7rem; height: .7rem; border-radius: 50%; background: #3cff5a; box-shadow: 0 0 6px #3cff5a; }
.lg-port-n { position: absolute; bottom: -.35rem; right: -.35rem; font: 700 .62rem/1 var(--heading); color: #eee; background: #0c0a07; border: 1px solid #6b5a3a; border-radius: 999px; padding: .15rem .3rem; }
.lg-main { display: flex; align-items: center; justify-content: center; gap: 2.2rem; padding: 1rem 1.2rem; flex-wrap: wrap; }
.lg-hero { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.lg-tname { font: 600 1rem var(--heading); color: #f1efe8; }
.lg-big { position: relative; width: 8.2rem; height: 8.2rem; border-radius: 50%; border: 5px solid #3d3d3d;
  box-shadow: 0 0 0 2px #151515, 0 0 0 4px #5a5a5a, 0 8px 22px rgba(0,0,0,.8); }
.lg-big img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lg-art-adventure img { object-position: 30% 40%; }
.lg-art-professions img { object-position: 50% 35%; filter: brightness(1.6) saturate(1.1); }
.lg-art-resourcefulness img, .lg-port[title="Resourcefulness"] img { filter: sepia(.7) saturate(2.4) hue-rotate(-28deg) brightness(.9); object-position: 20% 60%; }
.lg-big-n { position: absolute; left: 50%; bottom: -1rem; transform: translateX(-50%); width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
  border-radius: 50%; background: #0c0a07; border: 3px solid #4d4d4d; font: 700 1rem/1 var(--heading); color: #fff; }
.lg-grid2 { position: relative; }
.lg-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lg-links line { stroke: #3a3a3a; stroke-width: .34; }
.lg-links line.lit { stroke: #f2d229; filter: drop-shadow(0 0 .12rem rgba(242,210,41,.8)); }
.lgn { position: absolute; width: 3.3rem; height: 3.3rem; cursor: pointer; user-select: none; padding: 3px;
  background: #4a4a4a; clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.8)); }
.lgn img { width: 100%; height: 100%; display: block; clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%); }
.lgn-r { position: absolute; right: .28rem; bottom: .08rem; font: 800 .95rem/1 var(--heading); color: #3cff4e;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 4px #000; }
.lgn.open { background: linear-gradient(160deg, #54ff5e, #15a82a 55%, #0c6d1b); }
.lgn.maxed { background: linear-gradient(160deg, #f7d2b8, #c9876a 50%, #7b4a36); }
.lgn.maxed .lgn-r { color: #ffe23b; }
.lgn.locked { cursor: default; background: #3a3a3a; }
.lgn.locked img { filter: grayscale(1) brightness(.5); }
.lgn.staged img { animation: lgStage 1.6s ease-in-out infinite; }
@keyframes lgStage { 50% { filter: brightness(1.35); } }
.lgn.hit { background: linear-gradient(160deg, #fff27a, #d9b21c); }
.lgn.dim { opacity: .35; }
.lgn.ph, .lgn.unk { cursor: help; display: grid; place-items: center; background: #3a3a3a; }
.lgn.ph span, .lgn.unk span { display: grid; place-items: center; width: 100%; height: 100%; clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%); background: linear-gradient(180deg, #2a2a2a, #161616); }
.lgn.ph span { font: 700 1.7rem/1 Georgia, serif; color: #6e6e6e; }
.lgn.unk { border-style: solid; }
.lgn.unk span { width: 55%; height: 55%; border-radius: 4px; background: repeating-linear-gradient(45deg, #2e2e2e 0 4px, #242424 4px 8px); }
.lg-foot { display: flex; justify-content: center; align-items: center; gap: .6rem; margin-top: .8rem; }
.lg-apply { font: 600 .8rem var(--heading); color: #ffd76a; padding: .45rem 2.4rem; border-radius: 4px; cursor: pointer;
  background: linear-gradient(180deg, #8e1414, #5a0909); border: 2px solid #c9a24a; box-shadow: 0 0 10px rgba(255,200,80,.35), inset 0 1px 0 rgba(255,255,255,.15); }
.lg-apply:disabled { cursor: default; color: #8a8a8a; background: linear-gradient(180deg, #3a3a3a, #262626); border-color: #555; box-shadow: none; }
.lg-undo { background: none; border: 0; color: #ffd100; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.lg-undo:disabled { color: #666; cursor: default; }
.lg-tray { margin: .2rem 0 .6rem; }
.lg-tray > span { display: block; font: 600 .7rem/1 var(--heading); letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); margin-bottom: .5rem; }
.lg-tray > div { display: flex; flex-wrap: wrap; gap: .7rem; }
.lg-tray .lgn { position: relative; }
.lg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .4rem 0; }
.lg-sum { font: 600 .74rem var(--heading); color: var(--subtle); }
.tip.lgtip { background: #0a1220; border: 1px solid #5d6b7e; border-radius: 4px; max-width: 19rem; padding: .55rem .7rem; box-shadow: 0 6px 18px rgba(0,0,0,.7); }
.lgtip b { color: #fff; font-size: .95rem; margin: 0; }
.lgtip .lt-w { display: block; color: #fff; font-size: .78rem; }
.lgtip .lt-gap { display: block; height: .45rem; }
.lgtip .lt-y { margin: 0; color: #ffd100; font-size: .78rem; line-height: 1.35; }
.lgtip .lt-g, .lgtip .lt-gr, .lgtip .lt-r { display: block; font-style: normal; font-size: .76rem; margin-top: .45rem; }
.lgtip .lt-g { color: #1eff00; } .lgtip .lt-gr { color: #9a9a9a; } .lgtip .lt-r { color: #ff3b30; }
.lgtip .lt-note { margin: .35rem 0 0; font-size: .66rem; color: #8aa0b5; }
.lt-split { display: flex !important; justify-content: space-between; gap: 1rem; }
.lt-split i { font-style: normal; }
.lgtip .lt-plain { font-size: .8rem; }
.tip.lgtip { background: #0b1322; border: 1px solid #8a7a5a; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 8px 20px rgba(0,0,0,.75); }
.lgtip b { font-size: 1rem; font-weight: 500; }
.lg-avail { cursor: help; }
.lg-reward { margin: 1rem 0 .4rem; max-width: 46rem; border: 1px solid #4a3c24; border-radius: 8px; padding: .8rem 1rem 1rem; background: linear-gradient(180deg, #1f1a14, #15120e); }
.lg-rw-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin-bottom: 2.2rem; }
.lg-rw-head b { font: 600 .95rem var(--heading); color: #f5e6b8; }
.lg-rw-head span { font-size: .74rem; color: var(--subtle); }
.lg-rw-bar { position: relative; height: .5rem; margin: 0 1.2rem 2.6rem; border-radius: 999px; background: #2b2419; border: 1px solid #5b4a2c; }
.lg-rw-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #7a5d1e, #e8b923); }
.lg-rw-cap { position: absolute; top: 1.7rem; transform: translateX(-50%); font: 700 .58rem/1 var(--heading); color: #e8b923; white-space: nowrap; }
.lg-rw-cap::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 1.5rem; margin-bottom: .12rem; background: rgba(232,185,35,.75); }
.lg-rw-end { position: absolute; right: -1.2rem; top: -.28rem; font: 700 .62rem/1 var(--heading); color: var(--subtle); }
.lg-rw-pt { position: absolute; top: 50%; transform: translate(-50%, -50%); cursor: help; text-align: center; }
.lg-rw-pt img { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 2px solid #8a6d3b; box-shadow: 0 0 0 2px #15120e, 0 3px 8px rgba(0,0,0,.7); display: block; }
.lg-rw-pt em { position: absolute; left: 50%; top: -1.05rem; transform: translateX(-50%); font: 700 .64rem/1 var(--heading); font-style: normal; color: #f5e6b8; }
.lg-rw-cats { margin: 0; font-size: .76rem; color: var(--card-text); }
.lg-rw-cats b { color: #f5e6b8; font-weight: 600; }
@media (max-width: 700px) {
  .lg-body { grid-template-columns: 1fr; }
  .lg-rail { flex-direction: row; border-right: 0; border-bottom: 2px solid #3a3022; }
  .lg-bar { flex-wrap: wrap; padding-left: 2.8rem; }
  .lg-search { margin-left: 0; width: 100%; }
  .lg-main { gap: 1.6rem; }
  .lg-big { width: 6.4rem; height: 6.4rem; }
}

.lg-close { position: absolute; right: .4rem; top: .28rem; width: 1.6rem; height: 1.6rem; border-radius: 4px; cursor: pointer;
  border: 1px solid #c9a24a; background: linear-gradient(180deg, #8e1414, #5a0909); color: #ffd76a; font-size: 1.05rem; line-height: 1; }
.lg-done { margin-left: auto; color: #06131c; background: var(--gold); border-color: var(--gold); }

/* No pills */
.lg-port-n { border-radius: 2px; }
.lg-rw-bar, .lg-rw-fill { border-radius: 1px; }