/* wgf-forever-legacy-ui.css - the in-game Legacy window on /wow-forever/legacy-calculator/
   (forever_newsys/legacy_ui.py). Measured off Blizzard's WoW Forever screenshots from the BlizzCon
   2026 Deep Dive (Legacy Tree, Legacy Challenges, Progress Track): bronze frame, crowned crest,
   gold title, 60px perk pitch with 40px icons, green = learnable, gold = full rank, grey = locked.
   Art crops live in /assets/forever-legacy-ui/. */
@font-face{font-family:"FrizQT";src:url(/assets/fonts/frizqt.woff2) format("woff2");font-display:swap}

.flu{--cell:60px;--bronze:#7a5a35;--bronze-hi:#b48a55;--bronze-lo:#3a2a18;--gold:#ffd100;--green:#1eff00;
  position:relative;margin:0 52px 18px 6px;font-family:"FrizQT",Georgia,serif;color:#f0e6d2}
.flu-frame{position:relative;min-height:470px;padding:30px 12px 14px;border:2px solid var(--bronze);
  border-radius:3px;background:#140e09 url(/assets/forever-legacy-ui/bg.jpg) center/cover;
  box-shadow:inset 0 0 0 1px #000,inset 0 0 0 3px var(--bronze-lo),inset 0 0 0 4px var(--bronze-hi),0 6px 22px rgba(0,0,0,.7)}
.flu-crest{position:absolute;left:-14px;top:-14px;width:64px;height:64px;z-index:3;filter:drop-shadow(0 2px 3px #000)}
.flu-title{position:absolute;left:0;right:0;top:0;height:24px;margin:0;line-height:24px;text-align:center;
  font:400 13px/24px "FrizQT",Georgia,serif;color:var(--gold);letter-spacing:.02em;
  background:linear-gradient(#2a1f14,#17110b);border-bottom:1px solid var(--bronze);text-shadow:0 1px 1px #000}

/* top strip: crowned badge + "Available points" */
.flu-top{display:flex;align-items:center;gap:6px;margin:4px 0 10px 120px;padding:0 0 8px;border-bottom:1px solid var(--bronze)}
.flu-avail{display:inline-block;padding:3px 10px;border:1px solid var(--bronze);border-radius:2px;background:rgba(0,0,0,.55);
  font-size:15px;color:#f0e6d2}
.flu-avail strong{font-weight:400;color:#fff}
.flu-badge{position:relative;display:inline-flex;align-items:flex-end;justify-content:center;width:34px;height:42px;flex:0 0 34px;
  padding-bottom:7px;box-sizing:border-box;font-size:14px;color:var(--gold);text-shadow:0 1px 1px #000;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 42'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d6a876'/%3E%3Cstop offset='1' stop-color='%236e4a2a'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234a4a4a'/%3E%3Cstop offset='1' stop-color='%231a1a1a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M9 12 L9 3 L13 7 L17 1 L21 7 L25 3 L25 12 Z' fill='url(%23b)' stroke='%23000' stroke-width='.8'/%3E%3Cpath d='M3 12 H31 V24 C31 33 24 38 17 41 C10 38 3 33 3 24 Z' fill='url(%23b)' stroke='%23000' stroke-width='.8'/%3E%3Cpath d='M6 15 H28 V24 C28 31 23 35 17 37.5 C11 35 6 31 6 24 Z' fill='url(%23s)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.flu-badge--lg{width:72px;height:88px;flex-basis:72px;padding-bottom:21px;font-size:28px;color:#fff}
.flu-steps{display:none;gap:2px;margin-left:4px}
.flc-js .flu-steps{display:inline-flex}
.flu-step{width:22px;height:22px;padding:0;border:0;cursor:pointer;background:center/contain no-repeat}
.flu-step--down{background-image:url(/assets/ui/128-redbutton-minus.png)}
.flu-step--up{background-image:url(/assets/ui/128-redbutton-plus.png)}
.flu-step--down:hover{background-image:url(/assets/ui/128-redbutton-minus-highlight.png)}
.flu-step--up:hover{background-image:url(/assets/ui/128-redbutton-plus-highlight.png)}

/* ---- Legacy Tree ---- */
.flu-panel--tree{display:flex;gap:0;min-height:360px}
.flu-tabs{flex:0 0 108px;display:flex;flex-direction:column;justify-content:flex-end;gap:0;margin:-10px 12px 0 0;
  padding-top:70px;border-right:1px solid var(--bronze)}
.flu-tab{position:relative;display:flex;align-items:center;justify-content:center;height:84px;margin:0;padding:0;cursor:pointer;
  border:1px solid var(--bronze);border-right:0;border-bottom-width:0;background:rgba(0,0,0,.35)}
.flu-tab:last-child{border-bottom-width:1px}
.flu-tab img{width:60px;height:60px;border-radius:50%;box-shadow:0 0 0 3px #6b4a2a,0 0 0 4px #000,0 2px 6px #000}
.flu-tab:hover img{box-shadow:0 0 0 3px #a87a46,0 0 0 4px #000,0 2px 6px #000}
.flu-tab.is-sel{background:rgba(70,55,10,.55);box-shadow:inset 0 0 0 2px #e8c21e,inset 0 0 10px rgba(255,209,0,.35)}
.flu-tab.is-sel::after{content:"";position:absolute;right:-1px;top:50%;margin-top:-10px;border:10px solid transparent;
  border-right-color:#c9a36a;border-left:0}
.flu-stage{flex:1 1 auto;min-width:0}
.flu-tree{display:flex;align-items:flex-start;gap:24px;padding:14px 4px 6px}
.flc-js .flu-tree--off{display:none}
.flu-tree+.flu-tree{border-top:1px solid var(--bronze-lo)}
.flc-js .flu-tree+.flu-tree{border-top:0}
.flu-tree__head{flex:0 0 170px;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:36px}
.flu .flu-tree__name{margin:0;font:400 20px/1.2 "FrizQT",Georgia,serif;color:#f0e6d2;text-shadow:0 1px 2px #000;text-align:center;letter-spacing:0;text-transform:none}
.flu-tree__portrait{position:relative;width:108px;height:108px;margin-bottom:20px}
.flu-tree__portrait img{width:108px;height:108px;border-radius:50%;box-shadow:0 0 0 4px #6b4a2a,0 0 0 5px #000,0 3px 10px #000}
.flu-tree__spent{position:absolute;left:50%;bottom:-24px;width:44px;height:44px;margin-left:-22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#000;box-shadow:0 0 0 3px #6b4a2a,0 0 0 4px #000;
  font:400 22px/1 "FrizQT",Georgia,serif;color:#fff}

.flu-grid{position:relative;display:grid;grid-template-columns:repeat(4,var(--cell));grid-auto-rows:var(--cell);margin-top:10px}
.flu-lines{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.flu-line{stroke:#3c3c3c;stroke-width:4;vector-effect:non-scaling-stroke}
.flu-line.is-on{stroke:#e9cf2a}
.flu-r0{grid-row:1}.flu-r1{grid-row:2}.flu-r2{grid-row:3}.flu-r3{grid-row:4}.flu-r4{grid-row:5}
.flu-c0{grid-column:1}.flu-c1{grid-column:2}.flu-c2{grid-column:3}.flu-c3{grid-column:4}

.flu-node{position:relative;align-self:center;justify-self:center;width:44px;height:44px;margin:0;padding:0;
  border:2px solid #4a4a4a;border-radius:4px;background:#000;cursor:pointer;box-shadow:0 0 0 1px #000,0 2px 4px rgba(0,0,0,.8)}
.flu-node>img{display:block;width:40px;height:40px;border-radius:2px}
.flu-node__rank{position:absolute;right:-5px;bottom:-5px;min-width:14px;height:15px;padding:0 2px;border-radius:2px;
  background:#000;border:1px solid #3a3a3a;font:400 12px/14px "FrizQT",Georgia,serif;color:var(--green);text-align:center}
.flu-node.is-open,.flu-node.is-on{border-color:var(--green);box-shadow:0 0 0 1px #000,0 0 6px rgba(30,255,0,.35)}
.flu-node.is-max{border-color:#e6c18f;box-shadow:0 0 0 1px #000,0 0 7px rgba(255,209,0,.45)}
.flu-node.is-max .flu-node__rank{color:var(--gold)}
.flu-node.is-locked>img{filter:grayscale(1) brightness(.55)}
.flu-node.is-locked .flu-node__rank{display:none}
.flu-node--unknown{cursor:default}
.flu-node--unknown>img{filter:grayscale(1) brightness(.35)}
.flu-node:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Classic game tooltip */
.flu-tip{position:absolute;left:calc(100% + 10px);top:-6px;z-index:20;display:none;width:250px;padding:8px 10px;
  border:2px solid #b5b5b5;border-radius:5px;background:rgba(6,8,22,.94);box-shadow:0 0 0 1px #000,0 4px 14px rgba(0,0,0,.8);
  text-align:left;font:400 12px/1.35 "FrizQT",Georgia,serif;color:#fff;pointer-events:none}
.flu-tip--left{left:auto;right:calc(100% + 10px)}
.flu-node:hover .flu-tip,.flu-node:focus-visible .flu-tip{display:block}
.flu-tip>span{display:block}
.flu-tip__name{font-size:15px;color:#fff;margin-bottom:1px}
.flu-tip__rank{color:#fff;margin-bottom:6px}
.flu-tip__req{color:#ff2020}
.flu-tip__req.is-met{display:none}
.flu-tip__desc{color:var(--gold);margin-top:6px}
.flu-tip__req+.flu-tip__desc{margin-top:6px}
.flu-tip__hint{color:#808080;margin-top:8px;display:none!important}
.flc-js .flu-node.can-learn .flu-tip__hint--learn,.flc-js .flu-node.can-unlearn .flu-tip__hint--unlearn{display:block!important}
.flc-js .flu-node.can-learn.can-unlearn .flu-tip__hint--unlearn{margin-top:0}

/* side tabs outside the right edge */
.flu-sidetabs{display:none;position:absolute;right:-48px;top:44px;flex-direction:column;gap:4px}
.flc-js .flu-sidetabs{display:flex}
.flu-side{width:46px;height:50px;padding:3px 4px 3px 2px;cursor:pointer;border:2px solid var(--bronze);border-left:0;
  border-radius:0 8px 8px 0;background:#0b0805;box-shadow:0 2px 5px rgba(0,0,0,.7)}
.flu-side img{display:block;width:38px;height:42px;object-fit:contain;filter:brightness(.7)}
.flu-side:hover img{filter:none}
.flu-side.is-sel{border-color:#e8c21e;box-shadow:inset 0 0 6px rgba(255,209,0,.4),0 2px 5px rgba(0,0,0,.7)}
.flu-side.is-sel img{filter:none}

/* panels: all show without JS; with JS only the active one */
.flu-panel+.flu-panel{margin-top:22px}
.flc-js .flu-panel{display:none}
.flc-js .flu-panel+.flu-panel{margin-top:0}
.flc-js .flu[data-active=tree] .flu-panel--tree{display:flex}
.flc-js .flu[data-active=chal] .flu-panel--chal,.flc-js .flu[data-active=track] .flu-panel--track{display:block}
.flc-js .flu:not([data-active=tree]) .flu-top{display:none}

/* ---- Legacy Challenges ---- */
.flu-meter{display:flex;align-items:center;gap:6px;margin:2px 0 12px 110px}
.flu-bar{position:relative;display:block;flex:1 1 auto;height:16px;border:1px solid var(--bronze);border-radius:2px;background:#0b0b0b;overflow:hidden}
.flu-bar__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(#3fd13f,#0f8f0f)}
.flu-bar__text{position:relative;display:block;text-align:center;font:400 12px/15px "FrizQT",Georgia,serif;color:#fff;text-shadow:0 1px 1px #000}
.flu-chal{display:flex;gap:10px;min-height:340px}
.flu-cats{flex:0 0 250px;list-style:none;margin:0;padding:6px;border:1px solid var(--bronze-lo);background:rgba(0,0,0,.35)}
.flu-cats li{margin:0 0 3px}
.flu-cat{position:relative;display:block;width:100%;padding:3px 26px 3px 6px;border:1px solid #2e2213;border-radius:2px;cursor:pointer;
  text-align:left;font:400 14px/1.35 "FrizQT",Georgia,serif;color:var(--gold);background:linear-gradient(90deg,#3d2a14,#241809)}
.flu-cat:hover,.flu-cat.is-sel{background:linear-gradient(90deg,#5a3e1c,#33220e);color:#fff3a8}
.has-sub>.flu-cat::after{content:"+";position:absolute;right:8px;top:0;font:700 18px/24px Arial,sans-serif;color:var(--gold)}
.has-sub.is-open>.flu-cat::after{content:"\2212"}
.flu-cats__sub{list-style:none;margin:3px 0 4px 12px;padding:0}
.flc-js .flu-cats__item:not(.is-open) .flu-cats__sub{display:none}
.flu-cat--sub{font-size:13px;color:#f0e6d2;background:rgba(0,0,0,.4)}
.flu-chal__list{flex:1 1 auto;min-width:0;max-height:420px;overflow-y:auto;padding:4px 6px;border:1px solid var(--bronze-lo);background:rgba(0,0,0,.25)}
.flc-js .flu-achs:not(.is-shown){display:none}
.flu-achs__h{margin:4px 0 6px;font:400 14px/1.3 "FrizQT",Georgia,serif;color:var(--gold)}
.flu-achs__list{list-style:none;margin:0 0 10px;padding:0}
.flu-ach{display:flex;align-items:center;gap:10px;margin:0 0 4px;padding:6px 8px;border:1px solid #3a2a17;border-radius:3px;
  background:linear-gradient(90deg,rgba(60,42,20,.75),rgba(25,17,9,.75))}
.flu-ach__icon{flex:0 0 36px;width:36px;height:36px;border:1px solid #000;border-radius:3px;box-shadow:0 0 0 1px #6b4a2a;background:#000}
.flu-ach__text{flex:1 1 auto;min-width:0}
.flu-ach__title{display:block;font-size:14px;color:#fff}
.flu-ach__desc{display:block;font-size:12px;line-height:1.35;color:#cfc3a5}
.flu-ach__pts{flex:0 0 28px;height:34px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;box-sizing:border-box;
  font-size:13px;color:var(--gold);position:relative;z-index:0}
.flu-ach__pts::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 42'%3E%3Cpath d='M9 12 L9 3 L13 7 L17 1 L21 7 L25 3 L25 12 Z' fill='%23b8875a' stroke='%23000' stroke-width='.8'/%3E%3Cpath d='M3 12 H31 V24 C31 33 24 38 17 41 C10 38 3 33 3 24 Z' fill='%23b8875a' stroke='%23000' stroke-width='.8'/%3E%3Cpath d='M6 15 H28 V24 C28 31 23 35 17 37.5 C11 35 6 31 6 24 Z' fill='%23222'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- Progress Track ---- */
.flu-panel--track{padding:6px 10px 4px}
.flu-track__crown{display:flex;flex-direction:column;align-items:center;gap:8px;margin:6px 0 18px}
.flu-track__label{font-size:15px;color:#f0e6d2}
.flu-bar--track{height:12px;margin:0 6px 26px}
.flu-rewards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;list-style:none;margin:0;padding:0}
.flu-reward{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:150px;padding:26px 8px 12px;
  border:2px solid #5a4630;border-radius:3px;background:linear-gradient(#2a2016,#17120c);box-shadow:inset 0 0 0 1px #000}
.flu-reward__need{position:absolute;z-index:0;left:50%;top:-14px;width:28px;height:28px;margin-left:-14px;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#fff}
.flu-reward__need::before{content:"";position:absolute;inset:3px;z-index:-1;transform:rotate(45deg);background:#24461f;
  border:2px solid #6f8f4a;box-shadow:0 0 0 1px #000}
.flu-reward__icon{width:54px;height:54px;border:1px solid #000;box-shadow:0 0 0 2px #6b4a2a}
.flu-reward__name{font-size:13px;line-height:1.25;text-align:center;color:#fff}
.flu-reward__check{display:none;position:absolute;right:8px;top:6px;width:18px;height:14px;
  background:url(/assets/ui/auctionhouse-icon-checkmark.png) center/contain no-repeat}
.flu-reward.is-got .flu-reward__check{display:block}
.flu-reward:not(.is-got){background:linear-gradient(#232323,#141414);border-color:#3e3e3e}
.flu-reward:not(.is-got) .flu-reward__name{color:#7d7d7d}
.flu-reward:not(.is-got) .flu-reward__icon{filter:grayscale(1) brightness(.6)}
.flu-reward:not(.is-got) .flu-reward__need::before{background:#333;border-color:#666}
.flu-note{margin:14px 4px 0;font:400 12px/1.4 Georgia,serif;color:#a99c80}

.flu-status{min-height:1.3em;margin:8px 0 0 120px;font-size:13px;color:var(--gold)}

/* ---- under the window ---- */
.flu-controls{margin:0 0 20px;padding:12px 14px;border:1px solid #3a2a17;border-radius:3px;background:rgba(10,7,4,.75);
  font-family:"FrizQT",Georgia,serif;color:#cfc3a5}
.flu-controls .flc-summary{margin:0 0 8px;font-size:14px}
.flu-controls .flc-summary strong{color:var(--gold,#ffd100);font-weight:400}
.flu-controls .flc-controls,.flu-controls .flc-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px;font-size:13px}
.flu-controls input{min-height:28px;padding:0 8px;border:1px solid #5a4630;border-radius:2px;background:#000;color:#fff;font:inherit}
.flu-controls #flc-budget{width:5em;margin-left:6px}
.flu-controls .flc-share input{flex:1 1 16rem;min-width:0}
.flu-btn{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:0 16px;cursor:pointer;
  border:1px solid #c79a3c;border-radius:3px;background:linear-gradient(#8c1414,#4a0606);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px #000;
  font:400 13px/1 "FrizQT",Georgia,serif;color:var(--gold,#ffd100);text-decoration:none;text-shadow:0 1px 1px #000}
.flu-btn:hover{background:linear-gradient(#a81c1c,#5a0909);color:#fff}

.flu-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(max-width:720px){
  .flu{--cell:54px;margin-right:6px}
  .flu-top,.flu-meter,.flu-status{margin-left:56px}
  .flu-panel--tree{flex-direction:column}
  .flu-tabs{flex-direction:row;flex-basis:auto;margin:0 0 8px;padding:0;border-right:0;border-bottom:1px solid var(--bronze)}
  .flu-tab{flex:1 1 0;height:74px;border-bottom-width:0}
  .flu-tab.is-sel::after{display:none}
  .flu-tree{flex-direction:column;align-items:center}
  .flu-tree__head{flex-basis:auto;padding-top:0}
  .flu-sidetabs{position:static;flex-direction:row;justify-content:flex-end;margin-top:6px}
  .flu-side{border-left:2px solid var(--bronze);border-radius:0 0 8px 8px}
  .flu-chal{flex-direction:column}
  .flu-cats{flex-basis:auto}
  .flu-rewards{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .flu-tip{width:200px}
}