/* ==========================================================================
   TALENT CALCULATOR STYLES
   Extends css/style.css. Talent tree data lives in js/talent-calculator.js —
   this file is purely presentational.
   ========================================================================== */

.tc-hero{max-width:900px; margin:0 auto; padding:170px 5% 20px; text-align:center;}
.tc-hero .page-eyebrow{justify-content:center;}
.tc-hero h1{
  font-family:var(--font-display); font-size:clamp(2.2rem,5.5vw,4rem);
  text-transform:uppercase; letter-spacing:2px; font-weight:800; color:var(--text);
}
.tc-hero h1 span{
  background:linear-gradient(135deg, var(--frost-glow), var(--frost));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tc-hero p{color:var(--text-dim); margin-top:16px; line-height:1.8;}

/* ---------- CLASS SELECTOR ---------- */
.tc-class-bar{
  max-width:900px; margin:0 auto; padding:0 5%;
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
.tc-class-btn{
  padding:10px 18px; border-radius:30px; border:1px solid var(--border);
  background:var(--panel); color:var(--text-dim);
  font-size:0.8rem; letter-spacing:0.5px; font-weight:600; cursor:pointer;
  transition:all .2s ease;
}
.tc-class-btn:hover{border-color:var(--c, var(--frost-dim)); color:var(--text);}
.tc-class-btn.active{
  border-color:var(--c, var(--frost)); color:var(--c, var(--frost-glow));
  background:color-mix(in srgb, var(--c, var(--frost)) 14%, var(--panel));
  box-shadow:0 0 20px color-mix(in srgb, var(--c, var(--frost)) 30%, transparent);
}

/* ---------- CONTROL BAR ---------- */
.tc-controls{
  max-width:1100px; margin:40px auto 0; padding:20px 5%;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.tc-level{display:flex; align-items:center; gap:12px; font-size:0.85rem; color:var(--text-dim);}
.tc-level input[type="range"]{width:160px; accent-color:var(--frost);}
.tc-level strong{color:var(--frost-glow); font-family:var(--font-display); min-width:22px; display:inline-block; text-align:center;}
.tc-points{font-size:0.9rem; color:var(--text-dim);}
.tc-points strong{color:var(--frost-glow); font-family:var(--font-display); font-size:1.05rem;}
.tc-points strong.tc-capped{color:#ff8a8a;}

/* ---------- TREES ---------- */
.tc-empty-state{max-width:600px; margin:80px auto 150px; padding:0 5%; text-align:center; color:var(--text-dim); line-height:1.8;}
.tc-trees{max-width:1200px; margin:0 auto; padding:44px 5% 150px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.tc-tree{border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--panel);}
.tc-tree-head{
  padding:18px 20px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  background:var(--bg-alt);
}
.tc-tree-head h3{font-family:var(--font-display); font-size:1.05rem; letter-spacing:0.5px;}
.tc-tree-head .tc-tree-points{
  font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--frost-glow);
}
.tc-tree-body{padding:18px 16px;}

.tc-tier{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  padding:12px 0; border-bottom:1px dashed var(--border);
  transition:opacity .25s ease;
}
.tc-tier:last-child{border-bottom:none;}
.tc-tier.locked{opacity:0.35;}

.tc-talent{
  position:relative; width:56px; height:56px; border-radius:10px; cursor:pointer;
  border:2px solid var(--border);
  background:linear-gradient(160deg, var(--bg-alt), var(--panel));
  display:flex; align-items:center; justify-content:center;
  font-size:0.68rem; text-align:center; line-height:1.15; padding:4px;
  color:var(--text-dim); user-select:none;
  transition:all .2s ease;
}
.tc-tier.locked .tc-talent{cursor:not-allowed;}
.tc-talent:not(.locked):hover{border-color:var(--frost-dim); color:var(--text); transform:translateY(-2px);}
.tc-talent.has-points{
  border-color:var(--frost-dim); color:var(--text);
  background:linear-gradient(160deg, color-mix(in srgb, var(--frost) 20%, var(--panel)), var(--panel));
  box-shadow:0 0 16px rgba(111,216,255,0.25);
}
.tc-talent.maxed{border-color:var(--frost); box-shadow:0 0 20px rgba(111,216,255,0.45);}
.tc-talent .tc-rank{
  position:absolute; bottom:-8px; right:-6px;
  background:var(--bg); border:1px solid var(--frost-dim); border-radius:20px;
  padding:1px 6px; font-size:0.62rem; font-weight:700; color:var(--frost-glow);
  font-family:var(--font-body);
}

.tc-reset-row{text-align:center; margin-top:36px;}

@media(max-width:900px){
  .tc-trees{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .tc-talent{width:48px; height:48px; font-size:0.6rem;}
}

/* ---------- POPULAR BUILDS ---------- */
.popular-builds{max-width:1100px; margin:0 auto; padding:0 5% 150px;}
.build-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px;}
.build-card{
  text-align:center; padding:26px 20px; border-radius:12px;
  border:1px solid var(--border); background:linear-gradient(160deg, var(--panel), var(--bg-alt));
  transition:border-color .25s ease, transform .25s ease;
}
.build-card:hover{border-color:var(--frost-dim); transform:translateY(-4px);}
.build-card img{filter:drop-shadow(0 0 10px rgba(111,216,255,0.3)); margin-bottom:14px;}
.build-card h3{font-family:var(--font-display); font-size:1rem; margin-bottom:6px;}
.build-card p{color:var(--text-dim); font-size:0.82rem; font-family:monospace;}
.build-usage{
  display:inline-block; margin-top:14px; font-size:0.68rem; font-weight:700; letter-spacing:0.5px;
  color:var(--frost-glow); border:1px solid var(--frost-dim); background:rgba(111,216,255,0.08);
  padding:4px 12px; border-radius:20px;
}