.global-overlay .modal.skill-modal{max-width:1040px}
.skill-modal .promotion-track{margin:12px 0 18px}
.skill-slots{position:sticky;top:-28px;z-index:2;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:12px;background:#101c15;border:1px solid #4c6142;box-shadow:0 6px 14px #0b140ca0}
.loadout-slot{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 5px 9px;border:1px solid #4c5943;background:#1d2b20;text-align:center;min-width:0}
.loadout-slot:disabled{opacity:1}
.loadout-slot>small{font-size:10px;color:var(--muted)}
.loadout-slot>strong{font-size:11px;line-height:1.5;min-height:33px;word-break:keep-all;overflow-wrap:anywhere}
.loadout-slot>span:last-child{font-size:9px;color:#9aab8b}
.loadout-slot.compatible{border:1px solid #e5c483;background:linear-gradient(#465032,#273520);box-shadow:inset 0 0 0 1px #d9b27155}
.loadout-slot.compatible>span:last-child{color:#ffe2a6;font-weight:700}
.skill-icon{--skill-color:var(--gold);position:relative;width:50px;height:50px;display:inline-flex;flex:none;align-items:center;justify-content:center;border:1px solid var(--skill-color);border-radius:6px;background:radial-gradient(circle at 40% 30%,#405443,#14211a 75%);color:var(--skill-color);box-shadow:inset 0 0 0 3px #09160c88,0 3px 9px #0004}
.skill-icon svg{width:39px;height:39px;display:block}
.skill-icon>i{position:absolute;bottom:-4px;right:-4px;min-width:15px;padding:1px 3px;background:#142017;border:1px solid currentColor;border-radius:2px;font:8px Georgia;line-height:11px;text-align:center}
.awakened-icon{border-color:#f4cd75;box-shadow:inset 0 0 0 3px #e6ba6230,0 0 13px #dbc27830}
.empty-icon{font-size:24px;color:#78876a;border-style:dashed;background:#152017}
.skill-choice{display:flex;align-items:center;gap:16px;padding:16px;margin:12px 0 20px;min-height:110px;background:#263323;border-left:2px solid #d6bd82}
.skill-choice>div{min-width:0}
.skill-choice strong{display:block;font-size:16px;margin:4px 0 6px;color:#efe1bf}
.skill-choice small{color:var(--muted);font-size:10px}
.skill-choice p{font-size:12px;line-height:1.8;color:#cad6c0}
.skill-choice span:not(.skill-icon){display:block;font-size:10px;color:#d6c187;margin-top:6px}
.skill-choice>.skill-icon{width:64px;height:64px}
.skill-choice>.skill-icon svg{width:48px;height:48px}
.skill-library-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.skill-library-heading h3{font-size:14px}
.skill-library-heading h3 small{display:inline-block;font-size:10px;color:var(--muted);margin-left:10px;font-weight:400}
.skill-library-heading button{padding:7px 12px}
.skill-filters{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.skill-filters button{padding:6px 13px;border:1px solid #506043;color:var(--muted);font-size:11px}
.skill-filters button.selected{background:#3a462b;color:#e8d7ad;border-color:#b6a271}
.skill-library{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.skill-tile{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;border:1px solid #4a5c3e;background:#142218;padding:13px 6px 10px;text-align:center}
.skill-tile.selected{border-color:#f2d491;background:#36432a;box-shadow:inset 0 0 0 1px #d6bc7770}
.skill-tile strong{font-size:11px;line-height:1.5;min-height:33px;word-break:keep-all;overflow-wrap:anywhere}
.skill-tile small{font-size:9px;color:var(--muted)}
.skill-tile.locked{background:#172019;color:#89977f}
.skill-tile.locked .skill-icon{filter:grayscale(1);opacity:.5}
.skill-state{font-size:9px;color:#c6b487}
.skill-tile.locked .skill-state{color:#8c9584}
.skill-status{margin-top:12px;min-height:18px;font-size:11px;color:#dceac7}
@media(max-width:800px){
 .skill-slots{position:static;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px;gap:6px}
 .skill-library{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .skill-icon{width:43px;height:43px}
 .skill-icon svg{width:34px;height:34px}
 .skill-tile{padding:10px 4px 8px}
 .skill-tile strong,.loadout-slot strong{font-size:10px}
 .skill-choice{padding:12px;gap:12px}
}
@media(max-width:420px){
 .skill-slots,.skill-library{grid-template-columns:repeat(3,minmax(0,1fr))}
 .skill-filters button{padding:6px 9px}
}

/* Painted icons share one source rectangle in library, loadout, galleries and HUD. */
.painted-skill-icon{background-color:#0d1012;box-shadow:inset 0 0 0 1px #d5c1912b,0 3px 9px #0005}
.skill-tile.locked .painted-skill-icon{filter:grayscale(.45) brightness(.7)}
.combat-skill-art{display:inline-flex;flex:none;order:-1;font-style:normal;pointer-events:none}
.combat-skill-art .skill-icon{width:32px;height:32px;border-radius:4px}
.combat-skill-art .skill-icon>i{display:none}
.skill-button.has-skill-art{max-width:185px;min-width:112px}
.play-footer .combat-skill-art .skill-icon{width:24px;height:24px;margin-right:6px;vertical-align:middle}
@media(max-width:800px){.combat-skill-art .skill-icon{width:26px;height:26px}.skill-button.has-skill-art{min-width:90px}.skill-button.has-skill-art>span{overflow-wrap:anywhere}}