.loadout-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(10,8,12,0.86), rgba(4,3,6,0.96));
  backdrop-filter: blur(3px);
  font-family: 'Inter', system-ui, sans-serif;
}
.lo-panel {
  --fac: #e8c66a;
  width: min(1080px, 95vw); max-height: 92vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1c1822, #14111a);
  border: 1px solid rgba(232,198,106,0.28);
  border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.5) inset;
  overflow: hidden;
}
.lo-head {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  background: linear-gradient(180deg, rgba(40,34,24,0.5), rgba(20,17,26,0.2));
  border-bottom: 1px solid rgba(232,198,106,0.2);
}
.lo-crest { width: 56px; height: 56px; image-rendering: pixelated; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--fac) 50%, transparent)); }
.lo-head-txt { flex: 1; }
.lo-class { font-family: 'Cinzel', serif; font-size: 1.5rem; color: #f3e7c8; letter-spacing: 0.04em; }
.lo-faction { font-size: 0.85rem; color: var(--fac); margin-left: 8px; text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; display: inline-block; }
.lo-sub { font-size: 0.78rem; color: #9a8f7d; margin-top: 2px; }
.lo-x { background: none; border: 1px solid rgba(255,255,255,0.18); color: #cbb; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 1rem; }
.lo-x:hover { border-color: var(--fac); color: #fff; }

.lo-body { padding: 18px 20px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr 260px; gap: 18px; }

@media (max-width: 1024px) { .lo-body { grid-template-columns: 1fr; } }

.lo-stage-title { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--fac); margin-bottom: 10px; letter-spacing: 0.06em; }
.lo-gate-hint { font-family: 'Inter', sans-serif; font-size: 0.68rem; color: #8a8174; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.lo-tree { display: flex; flex-direction: column; gap: 8px; }
.lo-row { display: grid; gap: 8px; }
.lo-row-1 { grid-template-columns: 1fr 1fr; }
.lo-row-2 { grid-template-columns: 1fr 1fr; }
.lo-row-3 { grid-template-columns: 1fr 1fr; }

.lo-node {
  position: relative; text-align: left; cursor: pointer;
  background: linear-gradient(180deg, #241f2b, #1a1620);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 9px;
  padding: 8px 10px; color: #d8cdb8; transition: all .12s ease; min-height: 54px;
  display: flex; flex-direction: column; gap: 3px;
}
.lo-node:hover:not(.lo-locked) { border-color: var(--fac); transform: translateY(-1px); }
.lo-node-name { font-size: 0.82rem; font-weight: 600; color: #f0e6d0; }
.lo-node-eff { font-size: 0.7rem; color: #a89c87; line-height: 1.25; }
.lo-node.lo-picked {
  border-color: var(--fac);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fac) 22%, #241f2b), #1a1620);
  box-shadow: 0 0 0 1px var(--fac) inset, 0 0 14px color-mix(in srgb, var(--fac) 35%, transparent);
}
.lo-node.lo-picked .lo-node-name { color: #fff; }
.lo-node.lo-avail { border-color: rgba(232,198,106,0.4); }
.lo-node.lo-locked { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.6); }
.lo-loy { font-size: 0.6rem; color: #d4634f; border: 1px solid #d4634f; border-radius: 4px; padding: 0 3px; margin-left: 5px; letter-spacing: 0.08em; }
.lo-cost { position: absolute; top: 6px; right: 8px; font-size: 0.7rem; font-weight: 700; color: var(--fac); background: rgba(0,0,0,0.4); border-radius: 50%; width: 17px; height: 17px; text-align: center; line-height: 17px; }
.lo-points { margin-top: 10px; font-size: 0.78rem; color: #b3a88f; text-align: center; }
.lo-points b { color: var(--fac); font-size: 1rem; }

.lo-preview { background: rgba(0,0,0,0.25); border: 1px solid rgba(232,198,106,0.18); border-radius: 10px; padding: 14px; align-self: start; }
.lo-prev-title { font-family: 'Cinzel', serif; color: #f3e7c8; font-size: 0.95rem; margin-bottom: 10px; }
.lo-stat { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.82rem; color: #b3a88f; }
.lo-stat b { color: #ecdfc2; font-size: 0.95rem; }
.lo-stat i { font-style: normal; font-size: 0.75rem; margin-left: 4px; }
.lo-stat i.up { color: #6ec3a1; } .lo-stat i.dn { color: #d4634f; }
.lo-prev-note { margin-top: 12px; font-size: 0.7rem; color: #8a8174; line-height: 1.4; font-style: italic; }

.lo-foot { display: flex; gap: 12px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid rgba(232,198,106,0.18); background: rgba(0,0,0,0.2); }
.lo-btn { font-family: 'Cinzel', serif; padding: 9px 22px; border-radius: 8px; cursor: pointer; font-size: 0.85rem; letter-spacing: 0.06em; }
.lo-reset { background: none; border: 1px solid rgba(255,255,255,0.2); color: #cbb; }
.lo-reset:hover { border-color: #d4634f; color: #fff; }
.lo-save { background: linear-gradient(180deg, var(--fac), color-mix(in srgb, var(--fac) 70%, #000)); border: 1px solid var(--fac); color: #1a1410; font-weight: 700; }
.lo-save:hover { filter: brightness(1.1); }


.lo-trigger {
  display: block; width: 100%; margin-top: 12px; padding: 14px; cursor: pointer;
  font-family: 'Cinzel', serif; letter-spacing: 0.1em; font-size: 1.02rem; font-weight: 700;
  text-transform: uppercase;
  background: linear-gradient(180deg, #e8c66a, #b8923e);
  border: 1px solid #f0d27a; border-radius: 9px; color: #1a1410;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.3) inset;
}
.lo-trigger:hover { filter: brightness(1.12); box-shadow: 0 4px 16px rgba(232,198,106,0.5); transform: translateY(-1px); }
.lo-trigger-unset { animation: loTriggerPulse 1.6s ease-in-out infinite; }
@keyframes loTriggerPulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(0,0,0,0.4), 0 0 0 2px rgba(232,198,106,0.45); }
  50%      { box-shadow: 0 3px 20px rgba(232,198,106,0.75), 0 0 0 3px rgba(232,198,106,0.8); }
}
@media (prefers-reduced-motion: reduce) { .lo-trigger-unset { animation: none; } }




.loadout-overlay {
  background:
    radial-gradient(ellipse 58% 60% at center, rgba(8,6,12,0.34), rgba(3,2,5,0.80)),
    url(../assets/ui/loadout-tome.webp) center/cover no-repeat,
    #050308;
}


.lo-panel {
  width: min(1180px, 96vw);
  background: linear-gradient(180deg, rgba(26,22,32,0.94), rgba(17,14,22,0.97));
  border: 1px solid color-mix(in srgb, var(--fac) 45%, rgba(232,198,106,0.3));
  box-shadow: 0 30px 90px rgba(0,0,0,0.8), 0 0 60px color-mix(in srgb, var(--fac) 14%, transparent), 0 0 0 1px rgba(0,0,0,0.5) inset;
}


.lo-node { min-height: 66px; padding: 11px 13px; border-radius: 11px; gap: 4px; }
.lo-node-name { font-size: 0.92rem; }
.lo-node-eff { font-size: 0.76rem; color: #b7ab93; }
.lo-row { gap: 10px; }
.lo-tree { gap: 11px; }
.lo-stage-title { font-size: 1.08rem; }


.lo-row-3 .lo-node { min-height: 74px; background: linear-gradient(180deg, #2a2330, #1d1826); border-color: rgba(232,198,106,0.22); }
.lo-cost { width: 19px; height: 19px; line-height: 19px; font-size: 0.74rem; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fac) 50%, transparent); }


.lo-rewire {
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.1em; vertical-align: middle;
  color: #ffd98a; border: 1px solid #e8b85a; border-radius: 4px; padding: 1px 4px; margin-left: 6px;
  background: rgba(232,160,40,0.16); text-transform: uppercase;
}
.lo-node.lo-mechanic {
  border-color: rgba(255,193,94,0.55);
  background: linear-gradient(180deg, #322516, #211a12);
  box-shadow: 0 0 0 1px rgba(255,193,94,0.3) inset, 0 0 18px rgba(255,170,50,0.16);
}
.lo-node.lo-mechanic .lo-node-name { color: #ffe6b0; }
.lo-node.lo-mechanic:not(.lo-locked) { animation: loMechGlow 2.6s ease-in-out infinite; }
.lo-node.lo-mechanic.lo-picked { box-shadow: 0 0 0 1px #ffc15e inset, 0 0 22px rgba(255,170,50,0.5); }
@keyframes loMechGlow {
  0%,100% { box-shadow: 0 0 0 1px rgba(255,193,94,0.3) inset, 0 0 14px rgba(255,170,50,0.12); }
  50%     { box-shadow: 0 0 0 1px rgba(255,193,94,0.55) inset, 0 0 26px rgba(255,170,50,0.34); }
}
@media (prefers-reduced-motion: reduce) { .lo-node.lo-mechanic { animation: none; } }

.lo-preview { background: rgba(6,4,9,0.55); border-color: color-mix(in srgb, var(--fac) 30%, rgba(232,198,106,0.2)); }


.lo-node { flex-direction: row; align-items: center; gap: 11px; }
.lo-node-txt { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }

.lo-node:has(.lo-cost) .lo-node-txt { padding-right: 20px; }
.lo-ico {
  flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; background: radial-gradient(circle at 50% 38%, #2b2330, #110d15);
  box-shadow: 0 0 0 1px rgba(232,198,106,0.28) inset, 0 1px 3px rgba(0,0,0,0.55);
}
.lo-ico img { width: 32px; height: 32px; object-fit: contain; }
.lo-row-3 .lo-ico { flex-basis: 40px; width: 40px; height: 40px; }
.lo-node.lo-picked .lo-ico { box-shadow: 0 0 0 1px var(--fac) inset, 0 0 12px color-mix(in srgb, var(--fac) 50%, transparent); }
.lo-node.lo-mechanic .lo-ico { box-shadow: 0 0 0 1px rgba(255,193,94,0.6) inset, 0 0 12px rgba(255,170,50,0.45); }


.lo-tree { position: relative; }

.lo-row { position: relative; z-index: 1; }
.lo-connectors {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: visible;
}
.lo-conn {
  fill: none; stroke: rgba(232,198,106,0.14); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.lo-conn-on {
  stroke: var(--fac); stroke-width: 2.5; opacity: 0.95;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--fac) 70%, transparent));
}


.lo-node.lo-capstone {
  border-color: color-mix(in srgb, var(--fac) 40%, rgba(232,198,106,0.3));
  background:
    linear-gradient(180deg, rgba(232,198,106,0.06), transparent 46%),
    linear-gradient(180deg, #2c2533, #1c1726);
  
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--fac) 48%, transparent),
              inset 0 1px 0 rgba(255,236,184,0.13);
}
.lo-node.lo-capstone .lo-node-name { color: #f7edd2; }
.lo-node.lo-capstone .lo-ico {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fac) 42%, rgba(232,198,106,0.3)) inset, 0 1px 3px rgba(0,0,0,0.55);
}
.lo-node.lo-capstone.lo-picked {
  border-color: var(--fac);
  box-shadow: inset 3px 0 0 var(--fac),
              0 0 0 1px var(--fac) inset,
              0 0 16px color-mix(in srgb, var(--fac) 42%, transparent),
              inset 0 1px 0 rgba(255,236,184,0.2);
}
.lo-node.lo-capstone.lo-locked { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--fac) 22%, transparent); }



.lo-node.lo-locked { cursor: help; }


.lo-tip {
  position: fixed; z-index: 4100; max-width: 280px; pointer-events: none;
  padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(30,25,38,0.99), rgba(18,14,24,0.99));
  border: 1px solid color-mix(in srgb, var(--fac, #e8c66a) 45%, rgba(232,198,106,0.35));
  box-shadow: 0 14px 40px rgba(0,0,0,0.7), 0 0 18px color-mix(in srgb, var(--fac, #e8c66a) 16%, transparent);
  font-family: 'Inter', sans-serif; color: #d8cdb8;
  animation: loTipIn .12s ease;
}
@keyframes loTipIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lo-tip { animation: none; } }
.lo-tip-head {
  font-family: 'Cinzel', serif; font-size: 0.96rem; color: #f3e7c8;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 6px;
}
.lo-tip-badge { font-size: 0.52rem; font-weight: 800; letter-spacing: 0.1em; border-radius: 4px; padding: 1px 4px; text-transform: uppercase; }
.lo-tip-rewire { color: #ffd98a; border: 1px solid #e8b85a; background: rgba(232,160,40,0.18); }
.lo-tip-cap { color: #f0e0b0; border: 1px solid color-mix(in srgb, var(--fac,#e8c66a) 60%, transparent); background: rgba(232,198,106,0.12); }
.lo-tip-cost { margin-left: auto; font-size: 0.62rem; color: var(--fac, #e8c66a); letter-spacing: 0.04em; }
.lo-tip-effs { list-style: none; margin: 0 0 7px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lo-tip-eff { font-size: 0.78rem; line-height: 1.3; padding-left: 12px; position: relative; }
.lo-tip-eff::before { content: '•'; position: absolute; left: 2px; opacity: 0.6; }
.lo-eff-up { color: #7fd0ab; }   
.lo-eff-dn { color: #e08f7f; }   
.lo-eff-mech { color: #ffd07a; font-weight: 600; }
.lo-tip-desc { font-size: 0.72rem; line-height: 1.45; color: #b0a48c; font-style: italic; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 6px; }
.lo-tip-status { font-size: 0.72rem; margin-top: 6px; letter-spacing: 0.02em; }
.lo-tip-ok { color: #7fd0ab; } .lo-tip-av { color: var(--fac, #e8c66a); } .lo-tip-lock { color: #c79a8e; }


.lo-presets {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 20px; border-bottom: 1px solid rgba(232,198,106,0.14);
  background: linear-gradient(180deg, rgba(20,16,26,0.5), transparent);
}
.lo-presets-label { font-family: 'Cinzel', serif; font-size: 0.74rem; letter-spacing: 0.08em; color: #9a8f7d; text-transform: uppercase; margin-right: 2px; }
.lo-preset {
  font-family: 'Inter', sans-serif; font-size: 0.76rem; letter-spacing: 0.02em; cursor: pointer;
  color: #e6dcc4; padding: 5px 12px; border-radius: 7px;
  background: linear-gradient(180deg, rgba(46,38,28,0.6), rgba(26,21,16,0.6));
  border: 1px solid rgba(232,198,106,0.3); transition: all .12s ease;
}
.lo-preset:hover { border-color: var(--fac); color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--fac) 22%, rgba(46,38,28,0.6)), rgba(26,21,16,0.7)); transform: translateY(-1px); }
.lo-preset:active { transform: translateY(0); }
@media (max-width: 560px) { .lo-presets { padding: 8px 12px; } .lo-presets-label { width: 100%; margin-bottom: 2px; } }