/* wgf-forever-talent-frame.css - the WoW Forever class talent planner as the in-game Talents window
   (assets/wgf-forever-talent-frame.js, forever_talents/frame_art.py). Measured off Blizzard's WoW
   Forever Talents screenshot (BlizzCon 2026): bronze frame, class crest, gold "Talents" title,
   Primary/Secondary tabs, search, gold "Unspent Talents" banner, three spec columns on the client's
   talent backgrounds, 60px talent pitch, green = learnable, gold = full rank, grey = locked.
   Loaded after wgf-forever-talents.css and only overrides it inside .ftf. */
@font-face{font-family:"FrizQT";src:url(/assets/fonts/frizqt.woff2) format("woff2");font-display:swap}

.ftf{--bronze:#7a5a35;--bronze-hi:#b48a55;--bronze-lo:#3a2a18;--gold:#ffd100;--green:#1eff00;font-family:"FrizQT",Georgia,serif}
.ftf-frame{position:relative;margin:26px 0 10px;padding:30px 10px 10px;border:2px solid var(--bronze);border-radius:3px;
  background:#120d08;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)}
.ftf-crest{position:absolute;left:-16px;top:-18px;z-index:3;width:64px;height:64px;border-radius:50%;
  box-shadow:0 0 0 3px #8a6438,0 0 0 4px #2a1c0e,0 0 0 6px #b48a55,0 3px 8px #000}
.ftf-title{position:absolute;left:0;right:0;top:0;height:24px;line-height:24px;text-align:center;font-size:13px;color:var(--gold);
  background:linear-gradient(#2a1f14,#17110b);border-bottom:1px solid var(--bronze);text-shadow:0 1px 1px #000}

/* Primary / Secondary, search */
.ftf-spectabs{display:flex;gap:8px;margin:8px 0 0 70px;position:relative;z-index:1}
.ftf-spectab{display:inline-flex;align-items:center;gap:6px;min-width:140px;justify-content:center;padding:6px 16px 5px;
  border:1px solid #4a3a26;border-bottom:0;border-radius:4px 4px 0 0;background:linear-gradient(#2b2620,#1a1713);font-size:13px;color:#8a8478}
.ftf-spectab--on{border-color:#e2b13a;color:#fff;background:linear-gradient(#6a4f17,#2b2009);box-shadow:inset 0 1px 0 rgba(255,220,120,.35)}
.ftf-check::before{content:"\2714";color:var(--gold);font-size:13px}
.ftf-lock{width:9px;height:11px;border-radius:1px;background:#8a8478;position:relative;top:1px}
.ftf-lock::before{content:"";position:absolute;left:1px;top:-6px;width:5px;height:6px;border:2px solid #8a8478;border-bottom:0;border-radius:4px 4px 0 0}
.ftf-search{position:absolute;right:14px;top:34px;display:flex;align-items:center;width:250px}
.ftf-search__input{width:100%;height:24px;padding:0 8px 0 24px;border:1px solid #6b5636;border-radius:10px;font:12px "FrizQT",Georgia,serif;color:#fff;
  background:#0b0a09 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5' fill='none' stroke='%23aaa' stroke-width='1.6'/%3E%3Cpath d='M10 10l4 4' stroke='%23aaa' stroke-width='1.8'/%3E%3C/svg%3E") 7px 50%/12px no-repeat}
.ftf-search__input::placeholder{color:#6f6a62}

/* gold banner with Unspent Talents */
.ftf-banner{display:flex;justify-content:flex-end;align-items:center;gap:14px;height:46px;padding:0 18px;
  border-top:1px solid var(--bronze);border-bottom:1px solid var(--bronze);
  background:linear-gradient(90deg,#1d1608 0%,#4a3509 30%,#5a420c 55%,#3d2c08 80%,#1d1608 100%)}
.ftf-unspent__label{font-size:13px;color:#f4ecd8;text-shadow:0 1px 1px #000}
.ftf-unspent{min-width:44px;height:32px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #8a6a3e;border-radius:3px;background:#070807;box-shadow:inset 0 0 6px #000;font-size:24px;color:var(--green)}

/* the three spec columns */
.ftf .ff-trees{gap:0;margin:0;border:1px solid #000}
.ftf .ff-tree{border:0;border-radius:0;border-right:2px solid #0d0a06;background-color:#15110c;
  background-position:center top;background-size:cover;background-repeat:no-repeat;min-height:560px;box-shadow:inset 0 0 40px rgba(0,0,0,.65)}
.ftf .ff-tree:last-child{border-right:0}
.ftf .ff-tree-head{position:relative;min-height:0;justify-content:center;align-items:center;gap:12px;padding:26px 10px 22px;
  background:none;border:0}
.ftf .ff-tree-head::after{content:"";position:absolute;left:10%;right:10%;bottom:6px;height:2px;
  background:linear-gradient(90deg,transparent,#a07a3e 20%,#f3cf7a 50%,#a07a3e 80%,transparent);box-shadow:0 0 8px rgba(255,190,80,.45)}
.ftf .ff-tree-head h2{margin:0;font:400 19px/1.2 "FrizQT",Georgia,serif;color:#f4ecd8;text-shadow:0 1px 3px #000,0 0 6px #000;letter-spacing:0;text-transform:none}
.ftf-specicon{position:relative;display:inline-block;width:40px;height:40px;flex:0 0 40px}
.ftf-specicon img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 3px #8a6438,0 0 0 4px #000,0 2px 6px #000}
.ftf .ftf-specicon .ff-tree-count{position:absolute;right:-12px;bottom:-8px;min-width:20px;height:18px;padding:0 3px;
  border:1px solid #6b5636;border-radius:2px;background:#000;font:13px/16px "FrizQT",Georgia,serif;color:var(--gold);text-align:center}

/* talent grid: icon-only nodes on a 60px pitch */
.ftf .ff-grid{width:240px;margin:6px auto 18px;padding:0;grid-template-columns:repeat(4,60px);grid-template-rows:repeat(var(--ff-rows,7),60px)}
.ftf .ff-connectors{inset:0;width:100%;height:100%}
.ftf .ff-connectors path{stroke:#4a4a4a;stroke-width:3;stroke-dasharray:none;opacity:1}
.ftf .ff-node{justify-content:center;padding:0}
.ftf .ff-node-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ftf .ff-node-icon{width:42px;height:42px;margin:0;border:2px solid var(--green);border-radius:7px;background:#000;
  box-shadow:0 0 0 1px #000,0 0 6px rgba(30,255,0,.35),0 2px 5px #000}
.ftf .ff-node-icon img{width:36px;height:36px;border-radius:4px}
.ftf .ff-node-rank{right:-4px;bottom:-4px;min-width:16px;padding:0 3px;border:1px solid #333;border-radius:3px;background:#000;
  font:400 14px/16px "FrizQT",Georgia,serif;color:var(--green)}
.ftf .ff-node--allocated .ff-node-icon{border-color:var(--green);background:#000}
.ftf .ff-node--allocated .ff-node-rank{color:var(--green);border-color:#333}
.ftf .ff-node--maxed .ff-node-icon{border-color:#f2c94c;box-shadow:0 0 0 1px #000,0 0 8px rgba(255,209,0,.5),0 2px 5px #000}
.ftf .ff-node--maxed .ff-node-rank{color:var(--gold);border-color:#333}
.ftf .ff-node--locked .ff-node-icon{border-color:#3d3d3d;box-shadow:0 0 0 1px #000,0 2px 5px #000}
.ftf .ff-node--locked .ff-node-icon img{filter:grayscale(1) brightness(.5)}
.ftf .ff-node--locked .ff-node-rank{display:none}
.ftf .ff-node:hover .ff-node-icon,.ftf .ff-node:focus-visible .ff-node-icon{outline:0;box-shadow:0 0 0 1px #000,0 0 10px rgba(255,255,255,.55)}
.ftf--searching .ff-node:not(.ftf-hit) .ff-node-icon{opacity:.35}
.ftf .ff-node.ftf-hit .ff-node-icon{box-shadow:0 0 0 2px var(--gold),0 0 12px rgba(255,209,0,.8)}

/* bottom bar: points + buttons, like the window's Apply Changes strip */
.ftf-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 6px 0}
.ftf .ff-summary{flex-direction:row;align-items:baseline;gap:10px}
.ftf .ff-count{font-size:15px;color:#f4ecd8}
.ftf .ff-split{font-size:12px;color:#9a8e74}
.ftf .ftf-btn{min-height:26px;padding:3px 18px;border:1px solid #c79a3c;border-radius:3px;font:13px/1.2 "FrizQT",Georgia,serif;
  color:var(--gold);background:linear-gradient(#8c1414,#4a0606);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px #000;text-shadow:0 1px 1px #000}
.ftf .ftf-btn:hover{color:#fff;background:linear-gradient(#a81c1c,#5a0909);border-color:#e6b552}
.ftf .ff-notice{min-height:0;padding:8px 2px}

@media(max-width:899px){
  .ftf-spectabs{margin-left:56px}
  .ftf-spectab{min-width:0;padding:6px 10px 5px}
  .ftf-search{position:static;width:auto;margin:8px 0}
  .ftf .ff-tabs{margin:8px 0}
  .ftf .ff-tab{min-height:36px;border-color:#6b5636;background:#1a1713;font-family:"FrizQT",Georgia,serif}
  .ftf .ff-tab[aria-pressed="true"]{color:#fff;background:linear-gradient(#6a4f17,#2b2009);border-color:#e2b13a}
  .ftf .ff-tree{border-right:0}
}