/* Калькулятор талантів WoW Forever.
   Макет: шапка з класом і фактами на арті гілки-спеціалізації → панель дій → три гілки на фонах із гри.
   Стиль — як у головної й кабінету: нічна синь, золото, заголовки Kyiv*Type, текст Inter. */
@font-face{font-family:"KyivType Titling";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/kyivtype-titling-medium.woff2) format("woff2")}
@font-face{font-family:"KyivType Titling";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/kyivtype-titling-bold2.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-500-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-600-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-700-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"KyivType Serif";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/kyivtype-serif-heavy2.woff2) format("woff2")}

:root{
  --night:#07101f;
  --card:#0d1a33;
  --line:rgba(216,178,94,.16);
  --line2:rgba(216,178,94,.26);
  --edge:rgba(216,178,94,.42);
  --frame:rgba(201,160,76,.9);
  --gold:#d8b25e;
  --gold-hot:#f5c534;
  --btn:#e9b949;
  --ink:#1e1404;
  --ivory:#f6ebd0;
  --ivory2:#fff3d6;
  --parch:#ede3c9;
  --soft:#d9cfb4;
  --text-c:#bdb49c;
  --muted:#958c76;
  --dim:#7d7564;
  --green:#3fd16b;
  --crit:#e0564f;
  --display:"KyivType Titling",Georgia,"Times New Roman",serif;
  --serif:"KyivType Serif",Georgia,"Times New Roman",serif;
  --text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gut:clamp(16px,4vw,32px);
  --cls:#d8b25e;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;color:var(--parch);font-family:var(--text);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums;background:var(--night)}
img{max-width:100%;display:block}
a{color:var(--gold)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid #8cb8ff;outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}
.tban__in,.tbar__in,.wrap{width:min(1232px,calc(100% - 2 * var(--gut)));margin-inline:auto}

/* ---------- шапка: арт гілки-спеціалізації, розмитий, у колір класу ---------- */
.tban{position:relative;isolation:isolate;overflow:hidden;padding:clamp(28px,4vw,48px) 0 clamp(24px,3vw,34px)}
.tban::before{content:"";position:absolute;inset:-40px;z-index:-2;pointer-events:none;
  background:var(--bn,none) center 30%/cover no-repeat;filter:blur(18px) saturate(1.15);opacity:.75;transition:background-image .4s}
.tban::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 90% at 12% 20%,color-mix(in srgb,var(--cls) 22%,transparent),transparent 70%),
    linear-gradient(90deg,rgba(7,16,31,.92) 0%,rgba(7,16,31,.62) 55%,rgba(7,16,31,.8) 100%),
    linear-gradient(180deg,rgba(7,16,31,.2) 0%,rgba(7,16,31,.5) 70%,var(--night) 100%)}
.tban__head{display:flex;align-items:center;gap:clamp(16px,2.4vw,28px)}
.tban__crest{flex:none;width:clamp(76px,8vw,104px);aspect-ratio:1;border-radius:50%;padding:4px;
  background:linear-gradient(135deg,#ffe6a0,#8a5e17);box-shadow:0 0 0 2px rgba(10,7,3,.9),0 0 28px color-mix(in srgb,var(--cls) 45%,transparent),0 10px 24px rgba(0,0,0,.6)}
.tban__crest img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.tban__id{min-width:0}
.tban__k{font:600 14px/1.3 var(--ui);color:var(--soft)}
.tban h1{margin-top:4px;font:800 clamp(40px,5vw,64px)/1.04 var(--serif);color:var(--ivory2);text-shadow:0 2px 24px rgba(0,0,0,.6)}
.tban h1::after{content:"";display:block;width:64px;height:3px;margin-top:10px;border-radius:2px;background:var(--cls);box-shadow:0 0 12px var(--cls)}
.tban__lede{margin-top:12px;max-width:64ch;font-size:16px;line-height:25px;color:var(--soft)}

/* вибір класу: дев'ять знаків, поточний — у золотій рамці з сяйвом кольору класу */
.classes{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;margin-top:clamp(22px,3vw,32px)}
.cls{--cc:#d8b25e;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px 10px;border-radius:8px;
  font:600 13px/1.2 var(--ui);color:var(--soft);text-align:center;
  background:rgba(7,16,31,.62);border:1px solid var(--line2);transition:background .15s,border-color .15s,color .15s,transform .15s}
.cls img{width:40px;height:40px;border-radius:50%;flex:none;box-shadow:0 0 0 1.5px rgba(10,7,3,.9),0 0 0 3px rgba(216,178,94,.35);filter:saturate(.75) brightness(.85);transition:filter .15s,box-shadow .15s}
.cls span{white-space:nowrap}
.cls:hover{border-color:rgba(216,178,94,.6);color:var(--ivory)}
.cls:hover img{filter:none}
.cls[aria-pressed="true"]{color:var(--ivory2);border-color:color-mix(in srgb,var(--cc) 70%,#f5c534);
  background:radial-gradient(90% 80% at 50% 0%,color-mix(in srgb,var(--cc) 26%,transparent),transparent 80%),rgba(13,26,51,.9)}
.cls[aria-pressed="true"] img{filter:none;box-shadow:0 0 0 1.5px rgba(10,7,3,.9),0 0 0 3.5px var(--gold-hot),0 0 14px color-mix(in srgb,var(--cc) 70%,transparent)}

/* смуга фактів, як на головній */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px;border-radius:8px;
  border:1px solid var(--line2);background:rgba(7,16,31,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.fact{display:flex;align-items:center;gap:14px;min-width:0;padding:16px 20px}
.fact+.fact{border-left:1px solid var(--line2)}
.fact__ic{width:44px;height:44px;flex:none;border-radius:6px;object-fit:cover;box-shadow:0 0 0 1.5px var(--frame),0 2px 8px rgba(0,0,0,.5)}
.fact dt{font:500 13px/1.3 var(--ui);color:var(--muted)}
.fact>div{min-width:0}
.fact dd{margin-top:2px;font:700 19px/1.25 var(--display);color:var(--ivory);overflow-wrap:break-word}

/* ---------- панель дій: прилипає під верхньою панеллю ---------- */
.tbar{position:sticky;top:var(--abar-h,60px);z-index:40;background:rgba(7,16,31,.92);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tbar__in{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;min-height:62px;padding:10px 0}
.tbar__sum{display:flex;align-items:baseline;gap:14px;font:500 14px/1.2 var(--ui);color:var(--muted)}
.tbar__sum>b{font:700 26px/1 var(--display);color:var(--ivory2);letter-spacing:.02em}
.tbar__sum span b{color:var(--gold-hot);font-weight:700}
.tbar__acts{display:flex;flex-wrap:wrap;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:6px;border:1px solid transparent;
  font:600 14px/1.2 var(--ui);white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s,color .15s}
.btn--ghost{background:rgba(255,243,214,.08);border-color:var(--edge);color:var(--ivory2)}
.btn--ghost:hover{background:rgba(255,243,214,.14);border-color:rgba(216,178,94,.7)}
.btn--ghost[aria-pressed="true"]{border-color:var(--crit);background:rgba(224,86,79,.16);color:#ffd3cf}
.btn--gold{background:var(--btn);color:var(--ink);box-shadow:0 6px 18px rgba(233,185,73,.16)}
.btn--gold:hover{background:#f3c95c}
.btn.is-saved{color:var(--green);border-color:rgba(63,209,107,.5)}

/* ---------- мій білд у кабінеті, підказка ---------- */
.wrap{padding:22px 0 64px}
.mine{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:12px;padding:12px 16px;border-radius:8px;
  font:500 14px/1.45 var(--ui);color:var(--soft);
  background:linear-gradient(180deg,rgba(245,197,52,.07),rgba(245,197,52,.02)),var(--card);border:1px solid rgba(245,197,52,.35)}
.mine b{color:var(--ivory2);font-weight:700}
.mine__ok{color:var(--green);font-weight:700}
.mine__sep{color:var(--dim)}
.mine__tag{padding:2px 8px;border-radius:4px;font:600 12px/15px var(--ui);color:#8cb8ff;background:rgba(140,184,255,.14)}
.linkbtn{padding:0;font:inherit;color:#f0c76b;text-decoration:underline;text-decoration-color:rgba(240,199,107,.45);text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{text-decoration-color:currentColor}
.hint{margin-bottom:14px;font:500 13px/1.4 var(--ui);color:var(--muted)}

/* ---------- гілки ---------- */
.ttabs{display:none}
.trees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.tree{position:relative;min-width:0;border-radius:10px;overflow:hidden;border:1px solid var(--line2);
  background:#070c18 center top/cover no-repeat;box-shadow:0 18px 40px rgba(0,0,0,.4);transition:border-color .2s,box-shadow .2s}
.tree::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,9,20,.9) 0,rgba(5,9,20,.45) 110px,rgba(5,9,20,.25) 60%,rgba(5,9,20,.8) 100%)}
.tree.is-top{border-color:rgba(245,197,52,.6);box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px rgba(245,197,52,.18)}
.tree.is-top::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#8a5e17,#ffe6a0 50%,#8a5e17)}
.tree__h{position:relative;display:flex;align-items:center;gap:12px;padding:16px 16px 8px}
.tree__h img{width:40px;height:40px;border-radius:6px;flex:none;box-shadow:0 0 0 1.5px var(--frame),0 2px 8px rgba(0,0,0,.6)}
.tree__id{min-width:0;flex:1}
.tree__name{font:700 20px/1.2 var(--display);color:var(--ivory2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree__next{font:500 12.5px/1.3 var(--ui);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree__pts{font:700 30px/1 var(--display);color:var(--gold-hot);text-shadow:0 0 14px rgba(245,197,52,.35)}
.tree__reset{width:32px;height:32px;flex:none;border-radius:6px;border:1px solid var(--line2);color:var(--muted);font-size:1rem;line-height:1;background:rgba(7,16,31,.5)}
.tree__reset:hover{color:var(--ivory);border-color:var(--gold)}
/* сім рядів гілки */
.tree__tier{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:2px 16px 10px}
.tree__tier i{height:4px;border-radius:2px;background:rgba(255,255,255,.12)}
.tree__tier i.on{background:linear-gradient(90deg,#c99a24,#f5c534);box-shadow:0 0 6px rgba(245,197,52,.45)}
.tree__grid{position:relative;display:grid;grid-template-columns:repeat(4,52px);grid-auto-rows:52px;gap:14px 16px;
  justify-content:center;padding:8px 10px 20px}
.links{position:absolute;inset:0;pointer-events:none}
.link{position:absolute;background:rgba(150,150,150,.45);border-radius:2px}
.link.is-on{background:linear-gradient(180deg,#ffe08a,#d8a43a);box-shadow:0 0 6px rgba(245,197,52,.6)}

.tal{position:relative;width:52px;height:52px;border-radius:7px;padding:0;
  box-shadow:0 0 0 2px #0b0904,0 0 0 3px rgba(150,150,150,.6),0 4px 10px rgba(0,0,0,.6);
  transition:transform .08s,box-shadow .15s}
.tal img{width:100%;height:100%;border-radius:6px;filter:grayscale(1) brightness(.55);transition:filter .15s}
.tal.is-open img{filter:none}
.tal.is-open{box-shadow:0 0 0 2px #0b0904,0 0 0 3px var(--green),0 0 10px rgba(63,209,107,.45),0 4px 10px rgba(0,0,0,.6)}
.tal.is-some img,.tal.is-max img{filter:none}
.tal.is-some{box-shadow:0 0 0 2px #0b0904,0 0 0 3px var(--green),0 0 12px rgba(63,209,107,.55),0 4px 10px rgba(0,0,0,.6)}
.tal.is-max{box-shadow:0 0 0 2px #0b0904,0 0 0 3px var(--gold-hot),0 0 14px rgba(245,197,52,.65),0 4px 10px rgba(0,0,0,.6)}
.tal:active{transform:scale(.96)}
.tal__r{position:absolute;right:-7px;bottom:-7px;min-width:30px;padding:0 4px;border-radius:5px;
  font:700 11.5px/17px var(--ui);text-align:center;color:#cfcfcf;background:#06080f;border:1px solid rgba(150,150,150,.6)}
.tal.is-open .tal__r,.tal.is-some .tal__r{color:var(--green);border-color:var(--green)}
.tal.is-max .tal__r{color:var(--gold-hot);border-color:var(--gold-hot)}
.tal__m{position:absolute;left:-6px;top:-6px;width:17px;height:17px;border-radius:50%;
  font:700 10.5px/17px var(--ui);text-align:center}
.mark{display:inline-block;width:17px;height:17px;border-radius:50%;font:700 10.5px/17px var(--ui);text-align:center;vertical-align:middle}
.mark--scaled,.tal__m--scaled{background:#24345c;color:#bcd0ff;border:1px solid #6b86c9}
.mark--era,.tal__m--era{background:#3d2a12;color:#ffd08a;border:1px solid #b8862f}

/* підказка — як ігровий тултіп */
.tip{position:fixed;z-index:60;width:min(330px,calc(100vw - 24px));padding:12px 14px;border-radius:6px;
  font:400 14px/1.45 var(--ui);color:#f2f2f2;pointer-events:none;
  background:rgba(8,12,26,.97);border:1px solid rgba(190,190,190,.45);box-shadow:0 14px 40px rgba(0,0,0,.7)}
.tip__n{font-weight:700;font-size:16px;color:#fff}
.tip__r{color:#ccc}
.tip__req{color:#ff6b5e}
.tip__cur{margin-top:6px;color:#ffd100;white-space:pre-line}
.tip__next{margin-top:8px;color:#fff;white-space:pre-line}
.tip__next b{color:#fff;font-weight:600}
.tip__note{margin-top:8px;font-size:12px;color:#9fb3e0}
.tip__act{margin-top:8px;color:#3fd16b}
.tip.is-sheet{left:12px!important;right:12px;bottom:12px;top:auto!important;width:auto}

.foot{margin-top:28px;max-width:80ch;font:400 13px/1.55 var(--ui);color:var(--muted);display:flex;flex-direction:column;gap:8px}
.foot b{color:var(--soft)}
.toast{position:fixed;left:50%;bottom:24px;z-index:80;transform:translateX(-50%) translateY(10px);opacity:0;pointer-events:none;
  padding:12px 20px;border-radius:8px;font:600 14px/1.3 var(--ui);color:var(--ivory2);
  background:var(--card);border:1px solid rgba(216,178,94,.55);box-shadow:0 14px 40px rgba(0,0,0,.65);transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- планшет і телефон ---------- */
@media (max-width:1100px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact:nth-child(3){border-left:0}
  .fact:nth-child(n+3){border-top:1px solid var(--line2)}
  .classes{display:flex;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding:0 var(--gut) 4px}
  .classes::-webkit-scrollbar{display:none}
  .cls{flex:none;width:92px}
}
@media (max-width:1100px) and (min-width:861px){
  .trees{gap:12px}
  .tree__grid{grid-template-columns:repeat(4,46px);grid-auto-rows:46px;gap:12px 12px}
  .tal{width:46px;height:46px}
  .tree__h{padding:14px 12px 8px;gap:10px}
  .tree__name{font-size:18px}
  .tree__h img{width:34px;height:34px}
  .tree__next,.tree__reset{display:none}
  .tree__pts{font-size:26px}
  .tree__tier{padding:2px 12px 10px}
}
@media (max-width:860px){
  /* гілки — вкладками, видно одну */
  .ttabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:12px;padding:4px;border-radius:10px;
    background:rgba(7,16,31,.7);border:1px solid var(--line2)}
  .ttab{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:46px;padding:0 8px;border-radius:7px;
    font:600 14px/1.1 var(--ui);color:var(--soft)}
  .ttab img{width:26px;height:26px;border-radius:5px;flex:none;box-shadow:0 0 0 1px var(--frame)}
  .ttab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ttab b{font:700 16px/1 var(--display);color:var(--gold-hot)}
  .ttab[aria-selected="true"]{background:var(--ivory);color:var(--night)}
  .ttab[aria-selected="true"] b{color:#7a5410}
  .trees{grid-template-columns:minmax(0,1fr);max-width:440px;margin-inline:auto}
  .tree{display:none}
  .tree.is-active{display:block}
}
@media (max-width:640px){
  .tban__lede{display:none}
  .fact{gap:8px;padding:12px 10px}
  .fact__ic{width:32px;height:32px}
  .fact dt{font-size:12px}
  .fact dd{font-size:14px}
  .tbar{position:static}
  .tbar__in{min-height:0}
  .tbar__sum>b{font-size:22px}
  .tbar__acts{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .tbar__acts .btn{height:36px;padding:0 10px;font-size:13px}
  .ttab{flex-wrap:wrap;height:auto;padding:7px 4px;gap:2px 6px}
  .ttab span{order:3;flex-basis:100%;text-align:center;font-size:12px}
}
@media (max-width:420px){
  .tree__grid{grid-template-columns:repeat(4,46px);grid-auto-rows:46px;gap:12px 12px}
  .tal{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms!important} }