/* Ultimate Poke Idle - Arvore de Maestria
   A interface apenas apresenta o estado autoritativo recebido do servidor. */

body.mastery-open { overflow: hidden; }

#mastery-tree-overlay {
  --mt-ink: #f3feff;
  --mt-muted: #9bc5d0;
  --mt-panel: rgba(5, 39, 55, .94);
  --mt-panel-2: rgba(7, 55, 72, .9);
  position: fixed;
  inset: 0;
  z-index: 18050;
  display: none;
  place-items: center;
  padding: clamp(10px, 2vw, 28px);
  background:
    radial-gradient(circle at 18% 18%, rgba(64, 218, 196, .16), transparent 28%),
    radial-gradient(circle at 84% 78%, rgba(69, 142, 225, .17), transparent 30%),
    rgba(1, 15, 25, .82);
  backdrop-filter: blur(12px);
  color: var(--mt-ink);
  font-family: "Segoe UI Variable", "Segoe UI", Inter, system-ui, sans-serif;
}

#mastery-tree-overlay.is-open { display: grid; }

.mastery-shell {
  position: relative;
  width: min(1480px, 100%);
  height: min(940px, calc(100dvh - 28px));
  overflow: hidden;
  border: 1px solid rgba(70, 231, 213, .42);
  border-radius: 28px;
  background:
    linear-gradient(rgba(4, 28, 43, .88), rgba(4, 28, 43, .96)),
    repeating-linear-gradient(135deg, transparent 0 25px, rgba(88, 227, 205, .025) 26px 27px);
  box-shadow: 0 28px 90px rgba(0, 8, 19, .68), inset 0 0 0 1px rgba(255,255,255,.04);
}

.mastery-shell::before,
.mastery-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
}
.mastery-shell::before { width: 320px; height: 320px; right: -120px; top: -130px; background: rgba(54, 213, 184, .08); }
.mastery-shell::after { width: 260px; height: 260px; left: -100px; bottom: -130px; background: rgba(57, 130, 218, .08); }

.mastery-header {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(400px, 1.35fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 132px;
  padding: 20px 22px 18px 26px;
  border-bottom: 1px solid rgba(104, 220, 217, .23);
  background: linear-gradient(105deg, rgba(7, 62, 80, .98), rgba(7, 44, 62, .95) 58%, rgba(10, 78, 72, .86));
}

.mastery-title { display: flex; align-items: center; gap: 15px; min-width: 0; }
.mastery-title-icon {
  width: 66px;
  height: 66px;
  flex: none;
  border: 1px solid rgba(92, 242, 214, .55);
  border-radius: 19px;
  background: rgba(4, 31, 46, .74) url('/assets/items/up_grade.png') center / 40px no-repeat;
  image-rendering: pixelated;
  box-shadow: inset 0 0 20px rgba(71, 233, 206, .12), 0 10px 25px rgba(0,0,0,.24);
}
.mastery-title small { display: block; margin-bottom: 4px; color: #71e3cf; font-size: 10px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.mastery-title h2 { margin: 0; color: #fff; font-size: clamp(23px, 2vw, 34px); line-height: 1.05; letter-spacing: -.03em; }
.mastery-title p { margin: 7px 0 0; color: var(--mt-muted); font-size: 12px; }

.mastery-progress { min-width: 0; }
.mastery-progress-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mastery-progress-copy strong { font-size: 15px; }
.mastery-progress-copy span { color: #9fd0da; font-size: 11px; font-weight: 700; }
.mastery-progress-track {
  position: relative;
  height: 13px;
  overflow: hidden;
  border: 1px solid rgba(134, 227, 225, .25);
  border-radius: 99px;
  background: rgba(1, 21, 33, .76);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.42);
}
.mastery-progress-fill {
  width: var(--mastery-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38a9da, #3ee0a6);
  box-shadow: 0 0 16px rgba(61, 224, 172, .46);
  transition: width .35s ease;
}
.mastery-milestones { display: flex; justify-content: space-between; margin-top: 7px; color: #6899a7; font-size: 9px; font-weight: 800; }
.mastery-milestones .is-reached { color: #67e2c5; }

.mastery-wallet { display: flex; align-items: center; gap: 10px; }
.mastery-points {
  min-width: 144px;
  padding: 12px 16px;
  border: 1px solid rgba(92, 230, 198, .35);
  border-radius: 17px;
  background: rgba(3, 29, 42, .69);
  text-align: center;
}
.mastery-points span { display: block; color: #87b9c5; font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.mastery-points strong { display: block; margin-top: 2px; color: #77f0c8; font-size: 26px; line-height: 1; }
.mastery-close {
  border: 1px solid rgba(126, 212, 216, .3);
  border-radius: 15px;
  background: rgba(5, 36, 50, .74);
  color: #dffcff;
  font: 800 12px inherit;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.mastery-close { width: 48px; height: 48px; font-size: 25px; }
.mastery-close:hover { transform: translateY(-1px); border-color: #58dbc6; background: rgba(12, 76, 83, .9); }

.mastery-body {
  position: relative;
  z-index: 2;
  height: calc(100% - 132px);
  overflow: auto;
  padding: 22px;
  scrollbar-color: #2faeaa rgba(4,30,42,.7);
  scrollbar-width: thin;
}
.mastery-body::-webkit-scrollbar { width: 8px; height: 8px; }
.mastery-body::-webkit-scrollbar-thumb { border-radius: 99px; background: #2faeaa; }

.mastery-status {
  min-height: 430px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #a8cbd3;
}
.mastery-status[hidden] { display: none; }
.mastery-status-card { max-width: 460px; padding: 28px; border: 1px solid rgba(102, 211, 208, .2); border-radius: 22px; background: rgba(6, 42, 57, .72); }
.mastery-status-card strong { display: block; margin-bottom: 8px; color: #efffff; font-size: 18px; }
.mastery-status-card p { margin: 0 0 18px; line-height: 1.55; }
.mastery-retry { padding: 11px 18px; border: 0; border-radius: 12px; background: linear-gradient(90deg,#39a9d4,#3bc995); color: #fff; font: 800 12px inherit; cursor: pointer; }
.mastery-spinner { width: 40px; height: 40px; margin: 0 auto 16px; border: 4px solid rgba(105,220,215,.18); border-top-color: #5de0c7; border-radius: 50%; animation: mastery-spin .8s linear infinite; }
@keyframes mastery-spin { to { transform: rotate(360deg); } }

.mastery-branches {
  display: grid;
  grid-template-columns: repeat(4, minmax(250px, 1fr));
  align-items: start;
  gap: 16px;
}
.mastery-branches[hidden] { display: none; }

.mastery-branch {
  --branch: #4cd7c0;
  --branch-rgb: 76, 215, 192;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--branch-rgb), .28);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(var(--branch-rgb), .1), rgba(4, 31, 45, .88) 170px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 34px rgba(0,8,17,.18);
}
.mastery-branch[data-theme="shiny"] { --branch:#67ddf1; --branch-rgb:103,221,241; }
.mastery-branch[data-theme="gold"] { --branch:#ffd25a; --branch-rgb:255,210,90; }
.mastery-branch[data-theme="xp"] { --branch:#a58bf4; --branch-rgb:165,139,244; }
.mastery-branch[data-theme="utility"] { --branch:#5ee09d; --branch-rgb:94,224,157; }

.mastery-branch-head {
  position: relative;
  min-height: 136px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  overflow: hidden;
  border-bottom: 1px solid rgba(var(--branch-rgb), .2);
}
.mastery-branch-head::after { content:""; position:absolute; width:120px; height:120px; right:-36px; top:-48px; border-radius:50%; background:rgba(var(--branch-rgb),.11); }
.mastery-branch-art {
  width: 82px;
  height: 82px;
  flex: none;
  background-image: var(--mastery-pokemon);
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: 400% 400%;
  image-rendering: pixelated;
  filter: drop-shadow(0 9px 7px rgba(0,0,0,.35));
  animation: mastery-walk .72s steps(1) infinite;
}
.mastery-branch-art.is-static { display:grid; place-items:center; background:none; animation:none; }
.mastery-branch-art.is-static img { width:76px; height:76px; object-fit:contain; image-rendering:pixelated; }
@keyframes mastery-walk { 0%,24%{background-position:0% 0%}25%,49%{background-position:33.333% 0%}50%,74%{background-position:66.666% 0%}75%,100%{background-position:100% 0%} }
.mastery-branch-copy { position: relative; z-index: 1; min-width: 0; }
.mastery-branch-copy small { color: var(--branch); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.mastery-branch-copy h3 { margin: 3px 0 5px; color: #fff; font-size: 19px; line-height: 1; }
.mastery-branch-copy p { margin: 0; color: #99bec8; font-size: 10.5px; line-height: 1.35; }

.mastery-node-list { padding: 17px 13px 20px; }
.mastery-node-wrap { position: relative; padding-bottom: 24px; }
.mastery-node-wrap:last-child { padding-bottom: 0; }
.mastery-node-wrap:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 30px;
  top: 57px;
  bottom: -3px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--branch), rgba(var(--branch-rgb), .16));
  opacity: .45;
}
.mastery-node {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 10px;
  border: 1px solid rgba(110, 176, 188, .2);
  border-radius: 17px;
  background: rgba(5, 39, 54, .9);
  color: var(--mt-ink);
  text-align: left;
  cursor: default;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.mastery-node[data-state="available"] { border-color: rgba(var(--branch-rgb), .72); cursor: pointer; box-shadow: 0 0 0 2px rgba(var(--branch-rgb), .08), 0 0 23px rgba(var(--branch-rgb), .1); }
.mastery-node.is-pending { pointer-events:none; opacity:.78; }
.mastery-node.is-pending::after { content:""; position:absolute; right:13px; top:13px; width:15px; height:15px; border:2px solid rgba(var(--branch-rgb),.24); border-top-color:var(--branch); border-radius:50%; animation:mastery-spin .65s linear infinite; }
.mastery-node[data-state="purchased"] { border-color: rgba(var(--branch-rgb), .5); background: linear-gradient(110deg, rgba(var(--branch-rgb), .17), rgba(5,39,54,.94)); }
.mastery-node[data-state="blocked"] { filter: saturate(.42); opacity: .62; }
.mastery-node:focus-visible { outline: 3px solid rgba(var(--branch-rgb), .38); outline-offset: 2px; }
.mastery-node-icon {
  position: relative;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--branch-rgb), .35);
  border-radius: 14px;
  background: rgba(2, 22, 34, .85);
}
.mastery-node-icon img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); }
.mastery-node-lock { position: absolute; right: -3px; bottom: -4px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #203b48; color:#c9e0e3; font-size:10px; }
.mastery-node[data-state="purchased"] .mastery-node-lock { background: var(--branch); color:#04272d; }
.mastery-node-copy { min-width: 0; }
.mastery-node-copy strong { display:block; overflow:hidden; color:#efffff; font-size:12px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.mastery-node-copy span { display:block; margin-top:4px; color:#83aeb9; font-size:9.5px; line-height:1.25; }
.mastery-node-rank { min-width: 38px; padding: 6px 7px; border-radius: 10px; background: rgba(var(--branch-rgb),.12); color:var(--branch); font-size:10px; font-weight:900; text-align:center; }
.mastery-node-cost { display:block; margin-top:4px; color:#a9cbd1; font-size:8px; font-weight:800; }

.mastery-tooltip {
  position: absolute;
  z-index: 12;
  left: 7px;
  right: 7px;
  top: calc(100% + 8px);
  display: none;
  padding: 12px;
  border: 1px solid rgba(var(--branch-rgb), .38);
  border-radius: 13px;
  background: rgba(2, 20, 31, .98);
  box-shadow: 0 16px 38px rgba(0,0,0,.48);
  color: #b9d9df;
  font-size: 10px;
  line-height: 1.45;
}
.mastery-tooltip strong { color: #fff; }
.mastery-tooltip .mastery-bonus { display:block; margin:6px 0; color:var(--branch); font-weight:850; }
.mastery-node:hover + .mastery-tooltip,
.mastery-node:focus + .mastery-tooltip,
.mastery-node:focus-visible + .mastery-tooltip { display: block; }
.mastery-node-wrap:has(.mastery-tooltip:hover) .mastery-tooltip { display:block; }
.mastery-node-wrap:last-child .mastery-tooltip {
  top: auto;
  bottom: calc(100% + 8px);
}

.mastery-empty { padding: 22px 14px; color:#769fac; font-size:11px; line-height:1.45; text-align:center; }
.mastery-live { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

#dashboard-screen .nav a[data-upi-icon="mastery"]::before {
  background-image: url('/assets/items/up_grade.png');
}

@media (max-width: 1150px) {
  .mastery-branches { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
  .mastery-header { grid-template-columns: minmax(240px, 1fr) minmax(340px, 1.25fr); }
  .mastery-wallet { grid-column: 1 / -1; justify-content: flex-end; position:absolute; right:20px; top:18px; }
  .mastery-title { padding-right:190px; }
}

@media (max-width: 760px) {
  #mastery-tree-overlay { padding: 0; place-items: stretch; }
  .mastery-shell { width:100%; height:100dvh; border:0; border-radius:0; }
  .mastery-header { min-height: 180px; display:block; padding:16px 15px 14px; }
  .mastery-title { padding-right:122px; }
  .mastery-title-icon { width:52px; height:52px; border-radius:15px; background-size:32px; }
  .mastery-title p { display:none; }
  .mastery-progress { margin-top:14px; }
  .mastery-wallet { top:14px; right:14px; gap:6px; }
  .mastery-points { min-width:74px; padding:8px 9px; border-radius:13px; }
  .mastery-points span { font-size:7px; }
  .mastery-points strong { font-size:20px; }
  .mastery-close { width:41px; height:41px; border-radius:12px; }
  .mastery-body { height:calc(100% - 180px); padding:12px; }
  .mastery-branches { grid-template-columns:1fr; gap:12px; }
  .mastery-branch-head { min-height:106px; }
  .mastery-branch-art { width:66px; height:66px; }
  .mastery-node-list { padding:12px 10px 16px; }
  .mastery-node { min-height:68px; }
  .mastery-tooltip { position:relative; left:auto; right:auto; top:auto; bottom:auto; margin:7px 3px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mastery-branch-art, .mastery-spinner { animation:none!important; }
  .mastery-progress-fill { transition:none; }
}

/* ==========================================================================================================
   Árvore de Maestria v2 (estilo Path of Exile 2): mapa em SVG com arrastar/zoom, rascunho + Aplicar.
   Tudo sob #mastery-tree-v2; a tela v1 acima continua para quem ainda não está na v2.
   ========================================================================================================== */
#mastery-tree-v2 {
  --mt2-bg: #070b15;
  --mt2-panel: rgba(13, 19, 34, .92);
  --mt2-panel-solid: #111a2e;
  --mt2-line: rgba(233, 196, 106, .22);
  --mt2-gold: #e9c46a;
  --mt2-gold-soft: #f4dc9b;
  --mt2-ink: #eef1f8;
  --mt2-muted: #98a3bb;
  --mt2-good: #74e0a0;
  --mt2-bad: #ff7b7b;
  --mt2-buy: #ffd166;
  position: fixed;
  inset: 0;
  z-index: 18050;
  display: none;
  flex-direction: column;
  color: var(--mt2-ink);
  font-family: "Segoe UI Variable", "Segoe UI", Inter, system-ui, sans-serif;
  background:
    radial-gradient(1200px 800px at 50% 55%, rgba(38, 52, 92, .55), transparent 70%),
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 65%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(2px 2px at 35% 80%, rgba(255,255,255,.25), transparent 60%),
    var(--mt2-bg);
  -webkit-font-smoothing: antialiased;
}
#mastery-tree-v2.is-open { display: flex; }
#mastery-tree-v2 *, #mastery-tree-v2 *::before, #mastery-tree-v2 *::after { box-sizing: border-box; }
#mastery-tree-v2 button { font: inherit; color: inherit; }
#mastery-tree-v2 [hidden] { display: none !important; }

/* --- topo ------------------------------------------------------------------------------------------ */
.mt2-top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px 18px;
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(17, 25, 44, .97), rgba(10, 15, 28, .94));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.mt2-brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: none; }
.mt2-brand-icon {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  border: 1px solid rgba(233, 196, 106, .55);
  background: radial-gradient(circle, rgba(233, 196, 106, .18), rgba(8, 12, 24, .9) 70%) center / cover,
    url('/assets/items/up_grade.png') center / 30px no-repeat;
  background-blend-mode: normal;
  image-rendering: pixelated;
  box-shadow: 0 0 18px rgba(233, 196, 106, .18);
}
.mt2-brand small { display: block; color: var(--mt2-gold); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.mt2-brand h2 { margin: 1px 0 0; font-size: 22px; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; color: #fff; white-space: nowrap; }
.mt2-stats { display: flex; gap: 8px; flex: none; }
.mt2-stat {
  display: grid; grid-template-rows: auto auto auto; min-width: 104px; padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .035);
}
.mt2-stat span { color: var(--mt2-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mt2-stat strong { font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.mt2-stat small { color: var(--mt2-muted); font-size: 11px; font-variant-numeric: tabular-nums; min-height: 14px; }
.mt2-stat small.is-bad { color: var(--mt2-bad); font-weight: 700; }
.mt2-stat-points strong { color: var(--mt2-gold-soft); }
.mt2-builds { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; padding: 2px 0; }
.mt2-build {
  flex: none; display: grid; text-align: left; gap: 1px; padding: 6px 12px; min-width: 96px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: rgba(255, 255, 255, .04);
}
.mt2-build strong { font-size: 13px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt2-build small { color: var(--mt2-muted); font-size: 11px; }
.mt2-build:hover { border-color: rgba(233, 196, 106, .45); }
.mt2-build.is-active { border-color: var(--mt2-gold); background: rgba(233, 196, 106, .12); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .25); }
.mt2-build.is-active small { color: var(--mt2-gold-soft); }
.mt2-build.is-empty strong { color: var(--mt2-muted); }
.mt2-build-add { border-style: dashed; }
.mt2-close {
  flex: none; margin-left: auto; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 26px; line-height: 1;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05);
}
.mt2-close:hover { background: rgba(255, 123, 123, .16); border-color: rgba(255, 123, 123, .5); }

/* --- mapa --------------------------------------------------------------------------------------------- */
.mt2-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; overflow: clip; isolation: isolate; background: #070b15; }
.mt2-stage::before, .mt2-stage::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mt2-stage::before {
  background: url('/assets/ui/mastery-tree/fx/fumaca-ambiente.webp?v=20260925b') center 42% / 116% auto no-repeat;
  opacity: .62;
  filter: blur(10px);
  animation: mt2-smoke-drift 32s ease-in-out infinite alternate;
}
.mt2-stage::after {
  background: radial-gradient(ellipse 28% 22% at 8% 57%, rgba(80, 101, 145, .2), transparent 76%),
    radial-gradient(ellipse 32% 26% at 92% 38%, rgba(62, 115, 119, .15), transparent 80%),
    radial-gradient(ellipse 30% 22% at 42% 96%, rgba(140, 108, 78, .12), transparent 82%);
  filter: blur(48px);
  animation: mt2-smoke-drift 44s ease-in-out infinite alternate-reverse;
}
@keyframes mt2-smoke-drift {
  from { transform: translate3d(-2%, 1%, 0) scale(1.02); }
  to { transform: translate3d(3%, -2%, 0) scale(1.09); }
}
.mt2-svg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.mt2-svg.is-dragging { cursor: grabbing; }
.mt2-ring-guide { fill: none; stroke: rgba(233, 196, 106, .055); stroke-width: 1; stroke-dasharray: 6 12; vector-effect: non-scaling-stroke; }
.mt2-bg { pointer-events: none; opacity: .92; }
.mt2-halos { opacity: .35; }
.mt2-area-emblem { pointer-events: none; opacity: .9; }
.mt2-fx, .mt2-fx-layer { pointer-events: none; }
/* Arte nova (128–256 px) aparece menor que o original: redução suave; os itens antigos seguem pixelados. */
.mt2-icon.is-art, .mt2-area-emblem, .mt2-bonus-row img { image-rendering: auto; }
.mt2-area-label { fill: var(--c); fill-opacity: .42; font-size: 34px; font-weight: 900; letter-spacing: .32em; text-anchor: middle; pointer-events: none; }
.mt2-edge { stroke: #3a4a67; stroke-opacity: .72; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke .18s, stroke-width .18s; }
.mt2-edge[data-state="owned"] { stroke: var(--c); stroke-opacity: .42; }
.mt2-edge[data-state="active"] { stroke: var(--c); stroke-width: 3.5; stroke-opacity: .95; }
.mt2-edge.is-draft { stroke: var(--mt2-good); stroke-dasharray: 10 7; }
.mt2-edge[data-state="owned"].is-draft { stroke: var(--mt2-buy); }
.mt2-edge.is-dealloc { stroke: var(--mt2-bad); stroke-opacity: .7; stroke-dasharray: 6 8; }

.mt2-node { cursor: pointer; outline: none; }
.mt2-hit { fill: transparent; }
.mt2-ring { fill: #30405d; stroke: none; stroke-width: 1.25; vector-effect: non-scaling-stroke; transition: stroke .16s, stroke-width .16s; }
.mt2-core { fill: var(--c); opacity: 0; transition: opacity .16s; }
.mt2-core-bridge { fill: var(--c2); }
.mt2-k-bridge .mt2-ring { stroke-linejoin: round; }
.mt2-mark { fill: none; stroke: transparent; stroke-width: 2; vector-effect: non-scaling-stroke; }
.mt2-icon { opacity: .38; pointer-events: none; image-rendering: pixelated; }
.mt2-skin-img { opacity: .5; }
.mt2-egg { fill: #f3e7c9; fill-opacity: .35; stroke: var(--c); stroke-width: 1.6; }
.mt2-egg-crack { fill: none; stroke: #7a5a22; stroke-width: 1.4; stroke-linejoin: round; opacity: .6; }
.mt2-node-labels { pointer-events: none; }
.mt2-label {
  fill: #edf1fa; font-size: 14px; font-weight: 700; letter-spacing: .01em; pointer-events: none;
  paint-order: stroke; stroke: #070b15; stroke-width: 3px; stroke-linejoin: round;
}
.mt2-node-label.mt2-k-keystone .mt2-label { font-size: 15px; fill: var(--mt2-gold-soft); }
.mt2-node-label.is-selected .mt2-label { fill: #fff; font-weight: 800; }
.mt2-lock { display: none; fill: #aab2c5; font-size: 9px; font-weight: 800; text-anchor: middle; pointer-events: none; }
.mt2-k-notable .mt2-lock, .mt2-k-keystone .mt2-lock, .mt2-k-skin .mt2-lock, .mt2-k-perk .mt2-lock, .mt2-k-bridge .mt2-lock { font-size: 12px; }

.mt2-node[data-state="origin"] .mt2-ring { fill: var(--mt2-gold); fill-opacity: .54; filter: drop-shadow(0 0 9px rgba(233, 196, 106, .7)); }
.mt2-node[data-state="origin"] .mt2-core { fill: var(--mt2-gold); opacity: .22; }
.mt2-node[data-state="origin"] .mt2-icon { opacity: 1; }
.mt2-node[data-state="buyable"] .mt2-ring { fill: var(--c); fill-opacity: .38; filter: drop-shadow(0 0 5px var(--c)); }
.mt2-node[data-state="buyable"] .mt2-core { opacity: .12; }
.mt2-node[data-state="buyable"] .mt2-icon { opacity: .7; }
.mt2-node[data-state="owned"] .mt2-ring { fill: var(--c); fill-opacity: .56; }
.mt2-node[data-state="owned"] .mt2-core { opacity: .42; }
.mt2-node[data-state="owned"] .mt2-icon, .mt2-node[data-state="owned"] .mt2-skin-img { opacity: .95; }
.mt2-node[data-state="allocated"] .mt2-ring { fill: var(--c); fill-opacity: .82; filter: drop-shadow(0 0 5px var(--c)); }
.mt2-node[data-state="allocated"] .mt2-core { opacity: 1; }
.mt2-node[data-state="allocated"] .mt2-icon { opacity: 1; }
.mt2-node[data-state="allocated"].mt2-k-keystone, .mt2-node[data-state="allocated"].mt2-k-notable { filter: url(#mt2-glow); }
.mt2-node[data-state="levellock"] .mt2-ring { fill: #4a4e5c; }
.mt2-node[data-state="levellock"] .mt2-lock { display: block; }
.mt2-node[data-state="levellock"] .mt2-icon { opacity: .18; }
.mt2-node[data-state="locked"] .mt2-icon { opacity: .28; }
.mt2-node.is-diamond:not([data-state="allocated"]):not([data-state="owned"]) .mt2-ring { stroke-dasharray: none; }
.mt2-node.is-draft-buy .mt2-mark { stroke: var(--mt2-buy); stroke-dasharray: 5 4; animation: mt2-march 1.2s linear infinite; }
.mt2-node.is-draft-alloc .mt2-core { opacity: 1; }
.mt2-node.is-draft-alloc .mt2-mark { stroke: var(--mt2-good); }
.mt2-node.is-draft-alloc .mt2-icon { opacity: 1; }
.mt2-node.is-draft-dealloc .mt2-core { opacity: .14; }
.mt2-node.is-draft-dealloc .mt2-mark { stroke: var(--mt2-bad); stroke-dasharray: 3 4; }
.mt2-node:hover .mt2-ring { filter: drop-shadow(0 0 8px var(--c)); }
.mt2-node.is-selected .mt2-ring {
  fill: var(--mt2-gold-soft); fill-opacity: .72;
  filter: drop-shadow(0 0 10px var(--mt2-gold-soft)) drop-shadow(0 0 20px rgba(233, 196, 106, .55));
}
.mt2-node:focus-visible .mt2-mark { stroke: #fff; stroke-opacity: .9; stroke-width: 2; }
@keyframes mt2-march { to { stroke-dashoffset: -18; } }

/* --- painéis flutuantes ------------------------------------------------------------------------------ */
.mt2-bonus, .mt2-detail, .mt2-banner, .mt2-status-card, .mt2-dialog {
  border: 1px solid var(--mt2-line); border-radius: 16px; background: var(--mt2-panel);
  backdrop-filter: blur(10px); box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
.mt2-bonus, .mt2-detail { border: 0; }
.mt2-bonus { position: absolute; left: 14px; top: 14px; z-index: 2; width: 250px; padding: 12px 14px; display: grid; gap: 10px; }
.mt2-bonus h3 { margin: 0; color: var(--mt2-gold); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mt2-bonus-row { display: grid; grid-template-columns: 26px 1fr; gap: 9px; align-items: center; }
.mt2-bonus-row img { width: 26px; height: 26px; image-rendering: auto; }
.mt2-bonus-copy { display: grid; gap: 3px; min-width: 0; }
.mt2-bonus-copy span { font-size: 12px; font-weight: 700; color: var(--c); }
.mt2-bonus-copy span em { font-style: normal; color: var(--mt2-muted); font-weight: 500; margin-left: 6px; }
.mt2-bonus-copy strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.mt2-bonus-copy strong small { color: var(--mt2-muted); font-weight: 500; font-size: 11px; }
.mt2-bonus-copy strong b { margin-left: 6px; font-size: 12px; }
.mt2-bonus-copy strong b.is-up { color: var(--mt2-good); }
.mt2-bonus-copy strong b.is-down { color: var(--mt2-bad); }
.mt2-bonus-bar { display: block; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mt2-bonus-bar i { display: block; height: 100%; border-radius: inherit; background: var(--c); box-shadow: 0 0 10px var(--c); }
.mt2-bonus-note { margin: 0; color: var(--mt2-muted); font-size: 12px; line-height: 1.35; }
.mt2-cap { margin-left: 6px; padding: 1px 6px; border-radius: 99px; font-style: normal; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: #1d1405; background: var(--mt2-gold); }
.mt2-over { color: var(--mt2-muted); font-size: 11px; }
.mt2-detail-cap { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(233, 196, 106, .1); color: var(--mt2-gold-soft); font-size: 12px; line-height: 1.4; }
.mt2-bonus-note.is-gold { color: var(--mt2-gold-soft); }

.mt2-detail { position: absolute; right: 14px; top: 14px; z-index: 3; width: 320px; max-height: calc(100% - 28px); overflow: auto; padding: 16px; }
.mt2-detail-close {
  position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05);
}
.mt2-detail-head { padding-right: 30px; }
.mt2-detail-head small { display: block; color: var(--c); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mt2-detail-head h3 { margin: 4px 0 8px; font-size: 21px; line-height: 1.15; }
.mt2-chip {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 6px 4px 0; padding: 3px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 700; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); color: var(--mt2-ink);
}
.mt2-chip.is-allocated { background: rgba(116, 224, 160, .14); border-color: rgba(116, 224, 160, .45); color: #bff5d3; }
.mt2-chip.is-owned { background: rgba(233, 196, 106, .12); border-color: rgba(233, 196, 106, .4); color: var(--mt2-gold-soft); }
.mt2-chip.is-levellock, .mt2-chip.is-locked { color: var(--mt2-muted); }
.mt2-chip.is-draft, .mt2-chip.is-buy { background: rgba(255, 209, 102, .14); border-color: rgba(255, 209, 102, .5); color: var(--mt2-buy); }
.mt2-chip.is-alloc { background: rgba(116, 224, 160, .14); border-color: rgba(116, 224, 160, .45); color: #bff5d3; }
.mt2-chip.is-dealloc { background: rgba(255, 123, 123, .12); border-color: rgba(255, 123, 123, .45); color: #ffc2c2; }
.mt2-detail-skin { display: block; width: 112px; height: 112px; margin: 8px auto 4px; image-rendering: pixelated; border-radius: 14px; background: rgba(255, 255, 255, .04); }
.mt2-effects { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.mt2-effects li { padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-weight: 700; font-size: 14px; }
.mt2-detail-desc { margin: 10px 0 0; color: var(--mt2-muted); font-size: 13px; line-height: 1.4; }
.mt2-facts { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin: 12px 0 0; }
.mt2-facts div { padding: 7px 9px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .07); }
.mt2-facts dt { color: var(--mt2-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mt2-facts dd { margin: 2px 0 0; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mt2-facts dd.is-bad { color: var(--mt2-bad); }
.mt2-detail-actions { display: grid; gap: 8px; margin-top: 14px; }
.mt2-detail-note { margin: 10px 0 0; color: var(--mt2-muted); font-size: 12px; line-height: 1.4; }
.mt2-detail-flash { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 209, 102, .1); color: var(--mt2-buy); font-size: 12px; font-weight: 600; }
.mt2-pay { display: inline-flex; margin-top: 10px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; overflow: hidden; }
.mt2-pay button { border: 0; padding: 7px 11px; background: transparent; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--mt2-muted); }
.mt2-pay button[aria-pressed="true"] { background: rgba(233, 196, 106, .18); color: var(--mt2-gold-soft); }

.mt2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 16px; cursor: pointer;
  border-radius: 11px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); font-weight: 700; font-size: 14px;
}
.mt2-btn:hover:not([disabled]) { border-color: rgba(233, 196, 106, .5); }
.mt2-btn.is-primary { border-color: #d4a93f; background: linear-gradient(180deg, #f0cf78, #c99a33); color: #1d1405; }
.mt2-btn.is-primary:hover:not([disabled]) { filter: brightness(1.06); }
.mt2-btn.is-danger { border-color: rgba(255, 123, 123, .6); background: rgba(255, 123, 123, .16); color: #ffd0d0; }
.mt2-btn[disabled] { opacity: .45; cursor: not-allowed; }

.mt2-zoom { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: grid; gap: 6px; }
.mt2-zoom button {
  width: 40px; height: 40px; border-radius: 12px; cursor: pointer; font-size: 19px; font-weight: 700;
  border: 1px solid var(--mt2-line); background: var(--mt2-panel);
}
.mt2-zoom button:hover { border-color: var(--mt2-gold); }
.mt2-bonus-toggle { display: none; }
.mt2-banner {
  position: absolute; left: 50%; bottom: 14px; z-index: 2; transform: translateX(-50%); width: min(640px, calc(100% - 150px));
  display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-color: rgba(233, 196, 106, .45);
}
.mt2-banner p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--mt2-ink); }
.mt2-banner strong { color: var(--mt2-gold-soft); }
.mt2-status { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.mt2-status:empty { display: none; }
.mt2-status-card { pointer-events: auto; display: grid; justify-items: center; gap: 8px; padding: 22px 26px; text-align: center; max-width: 360px; }
.mt2-status-card p { margin: 0; color: var(--mt2-muted); font-size: 13px; }
.mt2-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(233, 196, 106, .2); border-top-color: var(--mt2-gold); animation: mt2-spin .9s linear infinite; }
@keyframes mt2-spin { to { transform: rotate(360deg); } }

/* --- barra do rascunho ------------------------------------------------------------------------------- */
.mt2-bar {
  position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 0; background: linear-gradient(0deg, rgba(17, 25, 44, .98), rgba(10, 15, 28, .95));
}
.mt2-hint { margin: 0; color: var(--mt2-muted); font-size: 13px; }
.mt2-bar-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.mt2-bar-summary .mt2-chip { margin: 0; }
.mt2-bar-cost { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.mt2-bar-short { color: var(--mt2-bad); font-size: 12px; font-weight: 700; }
.mt2-bar-actions { display: flex; gap: 8px; flex: none; }

/* --- diálogos -------------------------------------------------------------------------------------------- */
.mt2-modal { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: rgba(3, 5, 12, .62); }
.mt2-dialog { width: min(460px, 100%); max-height: calc(100% - 32px); overflow: auto; padding: 20px; background: var(--mt2-panel-solid); }
.mt2-dialog h3 { margin: 0 0 12px; font-size: 20px; }
.mt2-dialog-lead { margin: 0 0 12px; color: var(--mt2-muted); font-size: 14px; line-height: 1.45; }
.mt2-summary { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.mt2-summary li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: 14px; }
.mt2-summary b { font-variant-numeric: tabular-nums; }
.mt2-choice { margin: 12px 0 0; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; display: grid; gap: 6px; }
.mt2-choice legend { padding: 0 4px; color: var(--mt2-muted); font-size: 12px; }
.mt2-choice label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.mt2-free { color: var(--mt2-gold-soft); }
.mt2-total { display: flex; justify-content: space-between; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 16px; }
.mt2-total b { color: var(--mt2-gold-soft); font-variant-numeric: tabular-nums; }
.mt2-after { margin: 6px 0 0; color: var(--mt2-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.mt2-warn { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 209, 102, .1); color: var(--mt2-buy); font-size: 13px; }
.mt2-error { margin: 12px 0 0; padding: 9px 11px; border-radius: 10px; background: rgba(255, 123, 123, .12); color: #ffc9c9; font-size: 13px; }
.mt2-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.mt2-dialog-block { display: grid; gap: 8px; justify-items: start; margin-top: 12px; padding: 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; }
.mt2-dialog-block p { margin: 0; color: var(--mt2-muted); font-size: 13px; line-height: 1.4; }
.mt2-dialog-block .mt2-pay { margin-top: 0; }
.mt2-field { display: grid; gap: 4px; }
.mt2-field span { color: var(--mt2-muted); font-size: 12px; }
.mt2-field input {
  padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(0, 0, 0, .25);
  color: var(--mt2-ink); font: inherit; font-size: 14px;
}
.mt2-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- telas médias: o topo quebra em duas linhas -------------------------------------------------------- */
@media (max-width: 1180px) {
  .mt2-top { flex-wrap: wrap; row-gap: 8px; }
  .mt2-builds { order: 4; flex-basis: 100%; }
  .mt2-banner { width: min(560px, calc(100% - 150px)); }
}

/* --- celular -------------------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .mt2-top { gap: 8px 10px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; }
  .mt2-brand-icon { width: 34px; height: 34px; background-size: auto, 22px; }
  .mt2-brand small { display: none; }
  .mt2-brand h2 { font-size: 17px; }
  .mt2-close { width: 38px; height: 38px; font-size: 22px; }
  .mt2-stats { order: 3; flex-basis: 100%; gap: 6px; }
  .mt2-stat { flex: 1; min-width: 0; padding: 5px 8px; }
  .mt2-stat strong { font-size: 15px; }
  .mt2-stat span { font-size: 9px; }
  .mt2-builds { order: 4; }
  .mt2-build { min-width: 84px; padding: 5px 10px; }
  .mt2-bonus { display: none; left: 10px; right: 10px; top: 10px; width: auto; }
  .mt2-bonus.is-open { display: grid; }
  .mt2-bonus-toggle { display: block; }
  .mt2-zoom { right: 10px; bottom: 10px; }
  .mt2-zoom button { width: 44px; height: 44px; }
  .mt2-detail { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 62%; border-radius: 18px 18px 0 0; padding: 16px 16px 18px; }
  .mt2-banner { left: 10px; right: 10px; top: 10px; bottom: auto; transform: none; width: auto; min-width: 0; flex-direction: column; align-items: stretch; }
  .mt2-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .mt2-bar-actions .mt2-btn { flex: 1; }
  .mt2-hint { font-size: 12px; text-align: center; }
  .mt2-facts { grid-template-columns: 1fr 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mt2-node.is-draft-buy .mt2-mark, .mt2-spinner { animation: none; }
  .mt2-edge, .mt2-ring, .mt2-core { transition: none; }
  .mt2-stage::before, .mt2-stage::after { animation: none; }
}

/* leilao-v5 (08/10/2026): no comprado sem ponto deixa de parecer alocado (relato: "a segunda árvore veio clonada").
   Build vazia: os nós comprados ficavam quase tão acesos quanto os alocados. Comprado sem ponto = anel escuro com o
   contorno da cor do ramo, sem miolo, ícone apagado; caminho entre comprados fraco e pontilhado. Alocado, rascunho,
   selecionado, skin e vantagem seguem como antes. */
.mt2-node[data-state="owned"]:not(.mt2-k-skin):not(.mt2-k-perk):not(.is-selected) .mt2-ring { fill: #30405d; fill-opacity: 1; stroke: var(--c); stroke-opacity: .85; stroke-width: 1.75; }
.mt2-node[data-state="owned"]:not(.mt2-k-skin):not(.mt2-k-perk):not(.is-draft-alloc) .mt2-core { opacity: 0; }
.mt2-node[data-state="owned"]:not(.mt2-k-skin):not(.mt2-k-perk):not(.is-draft-alloc) .mt2-icon { opacity: .5; }
.mt2-edge[data-state="owned"]:not(.is-draft) { stroke-opacity: .2; stroke-dasharray: 3 6; }