/* poe2-deep-detail.css �??�?�? / �??�??/ 弹�?详�??样式 */

/* ===== Equipment Section ===== */

.equip-cont {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.wg-equip-list {
    position: relative;
    flex-shrink: 0;
}

.equip-detail-box {
    position: relative;
    display: flex;
    width: 774px;
    height: 600px;
    flex-shrink: 0;
    background:
        url("../wegame-local-assets/assets/equip-bg-D8S81SLb.webp") no-repeat center / 100% 100%;
    overflow: hidden;
}

/* Weapon rows: absolute positioned over the columns */
.row {
    position: absolute;
    top: 30px;
    display: flex;
    z-index: 2;
}

.left-row {
    left: 32px;
}

.right-row {
    right: 10px;
}

/* Weapon set switch buttons */
.check-btn-box {
    position: absolute;
    top: -13px;
    display: flex;
    gap: 0px;
    z-index: 3;
}

.left-row .check-btn-box {
    left: 71px;
}

.right-row .check-btn-box {
    right: 95px;
}

.equip-switch-btn {
    width: 38px;
    height: 31px;
    border: none !important;
    padding: 0;
    margin: 0;
    border-radius: 0;
    cursor: pointer;
    background-color: transparent !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    appearance: none;
    opacity: 1;
    filter: saturate(0) brightness(0.6);
    transition: filter 0.2s ease;
}

.equip-switch-btn:focus,
.equip-switch-btn:focus-visible,
.equip-switch-btn:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

.equip-switch-btn:hover {
    background-color: transparent !important;
    box-shadow: none !important;
}

.equip-switch-btn[data-weapon-set="0"] {
    background-image: url("../wegame-local-assets/1.png");
}

.equip-switch-btn[data-weapon-set="1"] {
    background-image: url("../wegame-local-assets/2.png");
}

.equip-switch-btn.cur,
.equip-switch-btn:hover {
    filter: none;
}

/* Weapon slot image container */
.equip-img-box {
    display: flex;
    gap: 12px;
    padding-top: 23px;
}

/* Columns: flex direction, positioned via margin */
.column {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.column-1 {
    align-items: flex-end;
    margin: 234px 0 0 189px;
    gap: 19.5px;
}

.column-2 {
    align-items: center;
    margin: 41px 0 0 4px;
    gap: 23px;
}

.column-2 .equip-img-box {
    gap: 3px;
    padding-top: 0;
}

.column-3 {
    margin: 159px 0 0 2px;
    gap: 19px;
}

/* Individual equipment slot image wrapper */
.equip-img {
    position: relative;
    flex-shrink: 0;
    transition: box-shadow 0.15s;
}

.equip-img.equip-sync-highlight {
    box-shadow: 0 0 0 2px rgba(201, 171, 96, 0.6), 0 0 12px rgba(201, 171, 96, 0.3);
    border-radius: 4px;
    z-index: 2;
}

.equip-img img {
    width: 100%;
    object-fit: contain;
    display: block;
}

/* Only ACTIVE weapon (img-2 equivalent) gets the 3px top offset per WeGame rule */
.equip-img-box .equip-img:has(.slot-weapon) {
    margin-top: 3px;
}

/* Slot sizes via :has() �??mirrors WeGame img-1 through img-7 classes */
/* img-2: active weapon (main/offhand) */
.equip-img:has(.slot-weapon) {
    width: 112px;
    height: 230px;
}

/* img-1: inactive weapon (alternate set) */
.equip-img:has(.slot-weapon-inactive) {
    width: 56px;
    height: 112px;
}

/* img-6: body armour */
.equip-img:has(.slot-body) {
    width: 112px;
    height: 168px;
}

/* img-5: tall flask (Flask0 left, Flask1 right) */
.equip-img:has(.slot-small) {
    width: 56px;
    height: 112px;
}

/* img-3: center flask row (Flask2/3/4) �??square format */
.equip-img:has(.slot-center-flask) {
    width: 56px;
    height: 56px;
}

/* Positional sizes by data-slot */
/* Ring3: �??�?��?��?��?�?�??�??格子尺寸 */
.equip-img[data-slot="ring3"]   {
    width: 56px;
    height: 56px;
    position: absolute;
}

.equip-img[data-slot="ring3"]::before {
    content: "";
    position: absolute;
    width: 72px;
    height: 72px;
    top: 45%;
    left: 52%;
    transform: translate(-50%, -50%);
    background: url("../wegame-local-assets/123.webp") no-repeat center/contain;
    pointer-events: none;
    z-index: -1;
}

.equip-img[data-slot="ring3"] .equip-slot-frame {
    background: transparent;
}
.equip-img[data-slot="ring"]    { width: 56px; height: 56px; }    /* Ring */
.equip-img[data-slot="gloves"]  { width: 112px; height: 112px; }  /* Gloves */
.equip-img[data-slot="helmet"]  { width: 112px; height: 112px; }  /* Helmet */
.equip-img[data-slot="belt"]    { width: 112px; height: 56px; }   /* Belt */
.equip-img[data-slot="amulet"]  { width: 56px; height: 56px; }    /* Amulet */
.equip-img[data-slot="ring2"]   { width: 56px; height: 56px; }    /* Ring2 */
.equip-img[data-slot="boots"]   { width: 112px; height: 112px; }  /* Boots */

/* Flask offset adjustments �??only side flasks (img-5) get margins per WeGame */
.column-1 > .equip-img:has(.slot-small) { margin-right: 28px; }
.column-3 > .equip-img:has(.slot-small) { margin-left: 31px; }
/* Center flask row (img-3, Flask2/3/4) has NO margin per WeGame source */

/* Flask row in column-2 */
.equip-img-box--flasks {
    display: flex;
    gap: 3px;
}

/* Slot card: fills the equip-img container */
.equip-slot-card {
    position: relative;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    color: inherit;
}

.equip-slot-card:hover .equip-slot-frame,
.equip-slot-card.active .equip-slot-frame {
    outline: none;
    box-shadow: none;
}

.equip-slot-frame {
    position: relative;
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 14, 12, 0.55);
    overflow: hidden;
}

/* Remove old fixed heights (sizes now come from parent .equip-img) */
.slot-weapon .equip-slot-frame,
.slot-body .equip-slot-frame,
.slot-small .equip-slot-frame {
    height: auto;
}

.equip-slot-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.equip-slot-placeholder {
    padding: 4px;
    color: rgba(236, 229, 209, 0.35);
    font-size: 9px;
    line-height: 1.3;
    text-align: center;
}

/* Hide slot text labels in WeGame-style layout */
.equip-slot-meta,
.equip-slot-name,
.equip-slot-title {
    display: none;
}

/* �??�?? Socketed Rune Display (WeGame .socketed-list) �??�?? */
.socketed-list {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 8px;
    bottom: 4px;
    left: 0;
    z-index: 4;
    pointer-events: none;
}

.rune-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    pointer-events: auto;
}

.rune-box::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: url("../wegame-local-assets/assets/rune-bg-BxzydIwX.png") no-repeat;
    background-size: 100% 100%;
}

.rune-box img {
    position: relative;
    width: 32px;
    height: 32px;
    object-fit: cover;
    z-index: 2;
}

/* 右侧详�??面板�?�?��?符�??�??�?��?�?*/
.mod-line-rune-header {
    color: var(--muted, #7a6a4a);
    font-size: 11px;
    text-align: center;
    margin-top: 6px;
    margin-bottom: 2px;
}

.mod-line-rune {
    color: #c8a96e;
}

/* PoB 模式�?�?��?��?�?��?�符�??名称�??�?代�?� */
.rune-name {
    position: relative;
    z-index: 2;
    font-size: 8px;
    line-height: 1.2;
    color: #c8a96e;
    text-align: center;
    word-break: break-all;
    padding: 2px 3px;
    pointer-events: none;
}

/* Rarity colours kept for potential tooltip use */
.equip-slot-title.rarity-unique { color: #af6025; }
.equip-slot-title.rarity-rare { color: #ffff77; }
.equip-slot-title.rarity-magic { color: #8888ff; }
.equip-slot-title.rarity-normal { color: #c8c8c8; }

/* �??�?? Attribute/Detail Panel �??�?? */
.equip-msg-box {
    position: relative;
    flex-shrink: 0;
    width: 390px;
    height: 600px;
    padding: 61px 40px 61px 42px;
    background:
        url("../wegame-local-assets/assets/equip-msg-bg-ebkz6IIH.png") no-repeat center/100% 100%;
    overflow: hidden;
}

.equip-msg-inner {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.equip-msg-inner::-webkit-scrollbar {
    width: 4px;
}

.equip-msg-inner::-webkit-scrollbar-thumb {
    background: rgba(185, 173, 133, 0.3);
    border-radius: 2px;
}

.equip-msg-list {
    margin-bottom: 12px;
}

.msg-tit {
    position: relative;
    color: #b9ad85;
    font-size: 14px;
    padding-bottom: 6px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(185, 173, 133, 0.15);
}

.msg-tit::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(185, 173, 133, 0.7), rgba(185, 173, 133, 0.04));
}

.msg-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 8px;
}

.msg-list .label {
    color: #8a8875;
    font-size: 13px;
}

.msg-list .num {
    color: #6f604a;
    font-size: 13px;
    text-align: right;
}

.msg-list .num.with-detail {
    cursor: help;
    text-decoration: underline dotted rgba(185, 173, 133, 0.4);
}

.jewel-showcase {
    margin-top: 0px;
    margin-bottom: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.equip-skill-row > .jewel-showcase {
    flex: 0 0 76px;
    align-self: stretch;
    min-width: 64px;
    height: 600px;
    margin: 0;
    overflow: hidden;
    align-items: center;
}

.jewel-showcase:empty {
    display: none;
}

.jewel-showcase-header {
    margin-bottom: 10px;
}

.jewel-showcase-title {
    color: #b9ad85;
    font-size: 14px;
    text-align: center;
}

.jewel-showcase-subtitle {
    margin-top: 4px;
    color: #6f604a;
    font-size: 12px;
    text-align: center;
}

.gem-box-wrapper.static-open {
    display: inline-block;
    padding: 2px 8px;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.gem-box-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 8px;
}

.equip-skill-row > .jewel-showcase .gem-box-wrapper.static-open {
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
}

.equip-skill-row > .jewel-showcase .gem-box-wrap {
    height: min(100%, 604px);
    padding: 0;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 4px;
}

.gem-box {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        url("../wegame-local-assets/assets/gem-bg-p7piAg1D.png") no-repeat center/100% 100%;
    cursor: pointer;
}

@media (max-width: 720px) {
    .equip-skill-row > .jewel-showcase {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        min-height: 0;
        overflow-x: auto;
    }

    .equip-skill-row > .jewel-showcase .gem-box-wrapper.static-open {
        height: auto;
    }

    .equip-skill-row > .jewel-showcase .gem-box-wrap {
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.gem-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gem-box-fallback {
    color: #f1e4c2;
    font-size: 11px;
    text-align: center;
    line-height: 1.2;
}

.equip-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(185, 173, 133, 0.15);
    margin-bottom: 8px;
    flex-direction: column;
}

.equip-detail-header .equip-detail-name {
    font-size: 14px;
    font-weight: 700;
    color: #f0e1ac;
    line-height: 1.3;
}

.equip-detail-header .equip-detail-base {
    font-size: 11px;
    color: #8a8875;
}

.equip-detail-slot {
    margin-bottom: 6px;
    color: #8a8875;
    font-size: 11px;
}

.equip-detail-mods {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.equip-detail-mods .mod-line {
    font-size: 12px;
    line-height: 1.5;
    color: #b9ad85;
    padding-left: 10px;
    position: relative;
}

.equip-detail-mods .mod-line::before {
    content: "·";
    position: absolute;
    left: 0;
    color: var(--brand);
}

.equip-empty-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

/* ===== Skill Section ===== */

.skill-content {
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* �??�?? Buff/Skill list box �??�?? */
.buff-box {
    width: 770px;
    height: 600px;
    padding: 44px 24px 38px 40px;
    flex-shrink: 0;
    background:
        url("../wegame-local-assets/assets/skill-buff-bg-Bvd0k17P.webp") no-repeat center / 100% 100%;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

.buff-list {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.buff-list::-webkit-scrollbar {
    width: 4px;
}

.buff-list::-webkit-scrollbar-thumb {
    background: rgba(185, 173, 133, 0.3);
    border-radius: 2px;
}

/* Each skill group row */
.buff-item {
    width: 680px;
    height: 74px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background:
        url("../wegame-local-assets/assets/skill-row-bg-Dx4lobaU.webp") no-repeat center/100% 100%;
    cursor: grab;
    user-select: none;
}

.buff-item.is-dragging {
    opacity: 0.35;
    cursor: grabbing;
    transform: scale(0.97);
}

.buff-item.drag-over-top {
    box-shadow: 0 -2px 0 0 #e8c56a;
    position: relative;
}

.buff-item.drag-over-top::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 16px;
    right: 16px;
    height: 3px;
    background: #e8c56a;
    border-radius: 2px;
    pointer-events: none;
    z-index: 5;
}

.buff-item.drag-over-bottom {
    box-shadow: 0 2px 0 0 #e8c56a;
    position: relative;
}

.buff-item.drag-over-bottom::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 16px;
    right: 16px;
    height: 3px;
    background: #e8c56a;
    border-radius: 2px;
    pointer-events: none;
    z-index: 5;
}

/* Left part: name + slot label */
.buff-intro {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.main-buff {
    position: relative;
    width: 54px;
    height: 54px;
    padding: 4px;
    flex-shrink: 0;
}

.main-buff::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    background:
        url("../wegame-local-assets/assets/skill-bg-D3gsSAqw.png") no-repeat center/100% 100%;
    pointer-events: none;
}

.main-buff-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f6e9bd;
    font-size: 16px;
    font-weight: 700;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(18, 16, 12, 0.7);
    position: relative;
    z-index: 1;
}

.main-buff-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.text-intro {
    display: flex;
    flex-direction: column;
    width: 140px;
    flex-shrink: 0;
}

.buff-name {
    color: #b9ad85;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buff-slot {
    color: #8a8875;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buff-level {
    color: #8a8875;
    font-size: 14px;
}

/* Right part: gem icons */
.buff-img-box {
    display: flex;
    align-items: center;
    gap: 27px;
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Base gem icon styles */
.buff-img {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #f7ecc4;
    font-size: 11px;
    text-align: center;
}

.buff-img::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.buff-img img {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    z-index: 1;
}

.buff-img span {
    position: relative;
    z-index: 1;
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
    padding: 2px;
}

/* Main gem: larger, with golden frame background */
.buff-img-main {
    width: 54px;
    height: 54px;
    padding: 8px;
    margin-right: 5px;
}

.buff-img-main::after {
    background:
        url("../wegame-local-assets/assets/main-buff-bg-BH5euifF.png") no-repeat center/100% 100%;
}

/* Support gems: smaller, with different frame */
.buff-img-support {
    width: 40px;
    height: 40px;
    padding: 1px;
}

.buff-img-support::after {
    background:
        url("../wegame-local-assets/assets/buff-bg-D9XU9Qz5.png") no-repeat center/100% 100%;
}

.buff-img.empty {
    opacity: 0.35;
}

.buff-empty-hint {
    padding: 40px 0;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

/* �??�?? Right: Skill list summary panel �??�?? */
.skill-list-box {
    position: relative;
    flex-shrink: 0;
    width: 390px;
    height: 600px;
    padding: 27px 47px 98px 42px;
    background:
        url("../wegame-local-assets/assets/equip-msg-bg-ebkz6IIH.png") no-repeat center/cover;
    z-index: 0;
}

.skill-list-title {
    color: #bdbcbc;
    font-size: 14px;
    text-align: center;
}

.skill-list {
    margin-top: 16px;
    height: 100%;
    overflow-y: auto;
    padding-right: 10px;
}

.skill-list::-webkit-scrollbar {
    width: 4px;
}

.skill-list::-webkit-scrollbar-thumb {
    background: rgba(185, 173, 133, 0.3);
    border-radius: 2px;
}

.skill-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(185, 173, 133, 0.12);
}

.skill-item:last-child {
    border-bottom: 0;
}

.skill-intro {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.skill-intro .img-box {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(18, 14, 12, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b9ad85;
    font-weight: 700;
    font-size: 13px;
}

.skill-intro .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.skill-intro .name {
    min-width: 0;
}

.skill-item-name {
    color: #b9ad85;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skill-item-slot {
    color: #8a8875;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skill-item .num {
    flex-shrink: 0;
    color: #b9ad85;
    font-size: 14px;
    text-align: right;
    font-family: var(--helper-font-family-custom-bold);
    margin-left: 8px;
}

.entity-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}

.entity-subtitle,
.entity-meta,
.muted-text {
    color: var(--muted);
    font-size: 13px;
}

.entity-meta {
    margin-bottom: 10px;
}

.tag-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.tag {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(201, 171, 96, 0.22);
    background: rgba(33, 34, 45, 0.92);
    color: #e8dcc0;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
}

.mini-list {
    margin: 10px 0 0;
    padding-left: 18px;
    color: #d9dfeb;
    line-height: 1.6;
}

.kv-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.kv-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(201, 171, 96, 0.14);
    color: #d9dfeb;
    font-size: 14px;
}

.secondary-section-grid {
    margin-top: 22px;
}

.empty-block {
    padding: 20px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.02);
}

.pob-tree-tooltip {
    position: fixed;
    z-index: 1000;
    display: none;
    min-width: 220px;
    max-width: 360px;
    min-height: 80px;
    padding: 3px 2px;
    pointer-events: none;
    background: #050605;
    border: 1px solid rgba(62, 58, 44, 0.9);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    color: #dbd9ce;
    overflow: visible;
}

.pob-tree-tooltip.jewel-item-tooltip {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    max-width: 420px;
    min-width: auto;
    overflow: visible;
}

.tree-tooltip-inner {
    position: relative;
    min-height: 100px;
    padding: 1px 1px 18px;
    background:
        url("../wegame-local-assets/assets/p-bg-BTr7eRYQ.png") center/100% 100% no-repeat,
        linear-gradient(180deg, rgba(23, 22, 25, 0.98), rgba(10, 10, 12, 0.98));
}

.tree-tooltip-header {
    position: relative;
    width: 100%;
    min-height: 48px;
    padding: 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.tree-tooltip-header::before,
.tree-tooltip-header::after {
    position: absolute;
    top: 0;
    content: "";
    width: 38px;
    height: 48px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.tree-tooltip-header::before {
    left: 0;
    background-image: url("../wegame-local-assets/assets/header1-left-bg-CT9OxHk3.png");
}

.tree-tooltip-header::after {
    right: 0;
    background-image: url("../wegame-local-assets/assets/header1-right-bg-C2Vxg2al.png");
}

.tree-tooltip-header .title {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url("../wegame-local-assets/assets/header1-middle-bg-B1u3RldC.png") center/100% 100% no-repeat;
}

.tree-tooltip-header strong {
    font-size: 16px;
    line-height: 1.2;
    color: #f1e4c2;
    font-weight: 500;
}

.tree-tooltip-header.notable strong,
.tree-tooltip-header.keystone strong { color: #f1e4c2; }
.tree-tooltip-header.socket strong { color: #73c9be; }
.tree-tooltip-header.allocated strong { text-shadow: 0 0 10px rgba(115, 201, 190, 0.35); }

.tree-tooltip-en {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #6e9a97;
    text-align: center;
}

.tree-tooltip-stats,
.tree-tooltip-reminder {
    padding: 8px 15px 4px;
    text-align: center;
}

.tree-tooltip-stat,
.tree-tooltip-reminder div {
    font-size: 13px;
    line-height: 1.45;
    color: #8787fe;
    margin-bottom: 6px;
}

.tree-tooltip-flavour {
    margin: 6px 14px 0;
    padding: 10px 12px 0;
    border-top: 1px solid rgba(64, 64, 64, 0.75);
    font-size: 12px;
    line-height: 1.5;
    color: #baad85;
    font-style: italic;
    text-align: center;
}

.hover-record-tooltip {
    position: fixed;
    z-index: 3000;
    pointer-events: none;
}

.hover-record-tooltip__card {
    min-width: 220px;
    max-width: 300px;
    padding: 11px 12px 10px;
    border: 1px solid color-mix(in srgb, var(--line-bright, #cbd5e1) 72%, transparent);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    color: var(--text, #111827);
    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-size: 12px;
    line-height: 1.45;
}

.hover-record-tooltip__card--with-media {
    min-width: 280px;
    max-width: 340px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
}

.hover-record-tooltip__media {
    width: 54px;
    aspect-ratio: 2 / 3;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line-bright, #cbd5e1) 64%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel, #ffffff) 72%, var(--brand, #b7791f) 8%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.hover-record-tooltip__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.hover-record-tooltip__content {
    min-width: 0;
}

.hover-record-tooltip__title {
    color: var(--text, #111827);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
}

.hover-record-tooltip__subtitle {
    margin-top: 3px;
    color: color-mix(in srgb, var(--brand, #b7791f) 72%, var(--text, #111827));
    font-size: 12px;
    font-weight: 800;
}

.hover-record-tooltip__body,
.hover-record-tooltip__footer {
    display: grid;
    gap: 3px;
    margin-top: 8px;
}

.hover-record-tooltip__footer {
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--line-bright, #cbd5e1) 58%, transparent);
}

.hover-record-tooltip__line {
    color: color-mix(in srgb, var(--muted, #64748b) 78%, var(--text, #111827));
    font-weight: 650;
}

[data-theme="dark"] .hover-record-tooltip__card {
    border-color: color-mix(in srgb, var(--line-bright, #64748b) 76%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--panel, #1f2937) 88%, #fff 4%) 0%,
        color-mix(in srgb, var(--panel, #1f2937) 90%, #000 10%) 100%);
    color: var(--text, #f8fafc);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
}

[data-theme="dark"] .hover-record-tooltip__media {
    border-color: color-mix(in srgb, var(--line-bright, #64748b) 78%, transparent);
    background: color-mix(in srgb, var(--panel, #1f2937) 84%, var(--brand, #fbbf24) 10%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
}

[data-theme="dark"] .hover-record-tooltip__subtitle {
    color: color-mix(in srgb, var(--brand-2, var(--brand, #fbbf24)) 82%, #fff);
}

[data-theme="dark"] .hover-record-tooltip__line {
    color: color-mix(in srgb, var(--muted, #94a3b8) 70%, #fff);
}

.record-popup,
.skill-popup,
.equip-message-tips {
    position: relative;
    pointer-events: none;
}

.record-popup {
    min-width: 248px;
    max-width: 400px;
    padding: 7px 7px 0;
    position: relative;
    z-index: 20;
    background-image:
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFnSURBVHgBfVKLTsMwDDwnbjsNxJD4/z9ECGkI2NbEnPPougdL5TZyfNfzOfK03dicMk5zhmWD8PFl+H/Zcsr6aZpMAzDwpb7hkkcEhhXcoDP/vNkqds8jY4DxVEJVIfzYAynGQ02UP8SI15cJb7sJh2Mqka0WSLgF9jZ9acvAWHlKgq+fhM/9oXiSckaQdXkjcGlSvyptE0LEkQT774T3j1+SJUYjkEsPCri+XIGVZgsrM8QwrPZuBmueO8BbWrtrvYWiQCI3ETkL5uwj9b8DUSNiCBXnhC1Ck6XNAiZCidZeMTFGwTQqxkELgd8T98XPI80lrxNU6eJg9FaqwMjpDEqCcVjAIVdPtBBII2DGlq6uDHM1BPtt9ZF7pRPMRiLm9WZGvSfHS71t3rOTZCroxvYivQFX+88kLe2mpTKJej8AaVOw+3+/Ti7mlpZyu6kkxqPVxJw3dnVsdwhkBb7IVQLpCasS/gDrW8JgX2p+ZgAAAABJRU5ErkJggg==),
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8gAAAAQCAYAAADK11bdAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAG6SURBVHgB7dqxUupAFIDhc5LlOlwbZxwb3//dbKytwBUhQuJEMBSOO35/A0n2O0ubWbLLVY1dNfYfX7R7OqyKyMmTLrvgeZ7neZ7neZ7n+dZ9ub+7OQ0ZZoyXZoyuZ2Z0XfI8z/M8z/M8z/N88748PqzjjJ82syDz7GOe53me53me53meb8KXvs9Y1OcpCznP8zzP8zwfy+J5nud/xJen55dYXI3lP4zneZ7neZ7neZ7nf7HPvusvnkxPxcxmPM/zPM/zPM/zPN+4z111zn23+sW+PM/zPM/zPM/zPN+SL/9WJSRJkiRJ+uuV9c0q3t+fl55Uf5TDH7p5nud5nud5nud5vmVfVsMJ8vUbBM/zcV08z/M8z/M8z/8eX7bbj8fXbtHxfPA8z/M8z/M8z7fuy2b7OlpQF29zeAPneZ7neZ7neZ7n+bZ93v5f19Mxcx0+cw/rEY+HHe7k6C7P8zzP8zzP8zzPt+7LZrOZ8NO4mFxnzJefVvA8z/M8z/M8z/N8iz5L39c4W06+5nFQHaZd4DzP8zzP8zzP8zzfgM8us14envtBedjhWK01zm/A8zzP8zzP8zzP8234N/ocsYbZBW0lAAAAAElFTkSuQmCC),
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFzSURBVHgBfVPtTsMwDDwnWTcGCMQP/vD+DwcSAqRpVG0S44+2KesgXbo2yZ3PZ5dAgQGSS4ffrw3dYXtihEBIMSAlmU8Phwb/G78iAHKuGDMjF0Z6eT4uBNdAmIGsP7a1r9OIz9OA73NB6mJsh5YYbTC7siC3ros4yKQQcOoLahmQXj96O6UHmXkDrkIaBbCTfB/v9ggWMCxn0tv72eLyfKOWgBLWymZWlxJiTLg5BpD8qyIi2Rtz+e0AqWQBS+w5IyUqVacqosltR6X9Lk4K2IAwZre11IoiAVjBApVXWY+IUxAjuL/tjL0au2Qn+bo8YBgy+uppmDhZDBRM+ly5tBMFscJJeCKw6R4MY0ZR7fB2MxJ/cgJtCHN7qoTKVqN3EsmNxba0mC2QjuyHsiw7q8uvlRZTm8u8IUy51Gnf600ULE8ro11zdXgdf0WgZaTWbcKxOMytsg180fXhsvu846tF3HwjV7624HnxKhRf8v07fgB1MbNBFgu59wAAAABJRU5ErkJggg==);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: left top, 7px top, right top;
    background-size: 8px 8px, calc(100% - 10px) 8px, 8px 8px;
}

.record-popup-inner {
    min-height: 153px;
    padding: 1px;
    background:
        url("../wegame-local-assets/assets/p-bg-BTr7eRYQ.webp") no-repeat center/100% 100%;
}

.record-popup::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    bottom: 7px;
    background-image:
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAI+CAYAAAC1yooOAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJ2SURBVHgB7dTLjhMxEIXhspNwWbCABWLD+z8ZSIjFPMBMdxGcYE8d26G9HOmvUWuiinOqOpcvnc4X//rlk33/9tnOp2w/fj3Zz99Ptr24XS4n+/Dxvb27nM333Z6fN9u26/+Xzdx3290t26h88nhQfUCypcrD6claUFoNGG0zuA2vAf+5xxAkrVQCSoLHro6ZN+4b+OCcx3H+70EXMO4PAm8pOiv7o8ndU/dJyWsvt/VGL2mVJk9lvdfbpe/mvLL/va/7lyfVF0voo4Buutbqb6HmHPxN5Nmk9Lr/YIucT8lyun/G2/Xa3cqfx5XS9aMrV4zHA8ODEoAHeGB4cAvAAzzAg7jB68KDeZC08AAP+gDNwYPDhQd4UDbAAzwwPGgb4EE8hQchqPbxYDFgtA0e4AEe4AEeSCAeTAO66Vp4gAcaJC08wIM+QHPw4HDhAR6UDfAADwwP2gZ4EE/hQQiqfTxYDBhtgwd4gAd4gAcSiAfTgG66Fh7ggQZJCw/woA/QHDw4XHiAB2UDPMADw4O2AR7EU3gQgmofDxYDRtvgAR7gAR7ggQTiwTSgm66FB3igQdLCAzzoAzQHDw4XHuBB2QAP8MDwoG2AB/EUHoSg2seDxYDRNniAB3iAB3gggXgwDeima+EBHmiQtPAAD/oAzcGDw4UHeFA2wAM8MDxoG+BBPIUHIaj28WAxYLQNHuABHuABHkggHkwDuulaeIAHGiQtPMCDPkBz8OBw4QEelA3wAA8MD9oGeBBP4UEIqn08WAwYbYMHeIAHeIAHEogH04BuuhYe4IEGSQsP8KAP0Bw8OFx4gAdlAzzAA8ODtgEexFNvzoM/3cEZ6zOkWSEAAAAASUVORK5CYII=),
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAI+CAYAAAC1yooOAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJrSURBVHgB7dTBTgIxFIXh28ID6EYTff83c2FMdOGGiI51YBK5t9yZ21aX/0kIppbDweCX9vtdySlJmh/zz7Lf5fl5L3l+Ph6/5HD4kGmaJOcsD3c38nh/K59TkafnN3l5fZcsf8z/FJStG6l6rn63vmCztVqQtt7ZvVCWN5gfefPF6XL/OqeScv0RSnFeXGT1I+Xrt05LycbfQK/O5m6xRe4rqu68Wr11popycOfydknMsKIL2pJ+n5Iq7/sqn//pxEzeLij2/b2Pmldf2PNV1q9MaXlIsg1l/nKU7/kxnX5e/Mjz9xgP8OBcgAd4gAeXBXiAB9ITPGhZMFiAB9UxHvi39Cg8iArwwAQP8MANHuBBsAAP8EB6ggctCwYL8KA6xgP/lh6FB1EBHpjgAR64wQM8CBbgAR5IT/CgZcFgAR5Ux3jg39Kj8CAqwAMTPMADN3iAB8ECPMAD6QketCwYLMCD6hgP/Ft6FB5EBXhgggd44AYP8CBYgAd4ID3Bg5YFgwV4UB3jgX9Lj8KDqAAPTPAAD9zgAR4EC/AAD6QneNCyYLAAD6pjPPBv6VF4EBXggQke4IEbPMCDYAEe4IH0BA9aFgwW4EF1jAf+LT0KD6ICPDDBAzxwgwd4ECzAAzyQnuBBy4LBAjyojvHAv6VH4UFUgAcmeIAHbvAAD4IFeIAH0hM8aFkwWIAH1TEe+Lf0KDyICvDABA/wwA0e4EGwAA/wQHqCBy0LBgvwoDrGA/+WHoUHUQEemOABHrjBAzwIFuABHkhP8KBlwWABHlTHeODf0qPwICrAAxM8wAM3eIAHwQI8wAPpiePBD0bdEuNc87kaAAAAAElFTkSuQmCC);
    background-repeat: repeat-y, repeat-y;
    background-position: left top, right top;
    background-size: 8px 100%, 8px 100%;
    pointer-events: none;
}

.record-popup::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image:
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAF1SURBVHgBdVPLTgMxDBw7D7QSRUggDlz4//9CSFxAHFBpdxPjOI8+CGmzyW7isWdsE5GXp8cdXp4fEDzj9f0TbzpzEsTgsCwR0XuknLGuCZuu25aRRSBZ4AHBn0F16ScyOWd9CKMAtBvyD4i0I1v11z4Qlck9ghlCu8RkazYDgncO+h9jTgHVW7F0XGdKzaM3JONfdPD9+gTBWLAaexU3qwEXzrq3iHKl4y8IX9qP4dQyBpjHAljuM1Xa/lq0bs3qJmvKjsfNjqSJeB1sBaD2lZrCxYO+Jq2F/c+Kw7oNQ8tC80gdQE55sjDLYREuixZNypCtCkITqfwARDGo4iSd5DQKdhrJXOBOeRSSlWVgLDcR97tF1Xameg9uqtWg0GjEEHB3u8BpqoqIli6lISKYZcoAWN2UJvn4+la+yQSzIqGaZ2sakZP9FSOKMUjQbiud5x2bDiel634EIGcitL2WtsOqnveHo3rOlhxiOgM4Jy6jqTrCL9zizWyxOPWpAAAAAElFTkSuQmCC),
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8gAAAAQCAYAAADK11bdAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFUSURBVHgB7dvdTsIwGIDhln6MIBG5/ztVMXWRkLk5jY4Ty573hJ/u+ZZwVprlnFJNkiRJkiStvCilJEmSJEmS1l6UKLedIfdH0HxaHs/zPM/zPM/zPP8vfHTd9vJu5qL6acaPN+B5nud5nud5nuf5xn1sy2a8Xq8vY5nz/NwJ43me53me53me5/kmfey6GBavV9Q8/i7Xj5HToXk6nOd5nud5nud5nucb9RGxSXPVb4b9Np7neZ7neZ7neZ5vycfzy+vXaX8pJ57neZ7neZ7neZ5v3ueH/e6yvPQm8+fUPM/zPM/zPM/zPN+UzxGl+gchLY/neZ7neZ7neZ6/C9/vj8vwqaZhR70knud5nud5nud5nm/Ux+l48KPwPM/zPM/zPM/zq/fxdNwnSZIkSZLWXpzPb0mSJEmSpLWXT4+HWx5xliRJkiTpLsp9NsiSJEmSpNX3DjqNUzQBB7d6AAAAAElFTkSuQmCC),
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAF5SURBVHgBbVNbTgMxDBwn3kKpqpYfhBD3PxgfSAgBQlC6j2yMnaT76rpKGifr8YydUMWVEAHkCBV7eOewsX/v0HYBf+cWXejh1H96OOL58R5dF/Hy+om3j2+w00AyBDMZJsxWVMbM8qlTGwBEJO1L+pmv4ypwDsJV5TFLRGVFhl78NRCRDMA+M8gsBH0vKcCrtOgpx8pa7my8UQZWQKuFgfYhpqzMDjFSWssVyOioBJc4XuroyOmg1IVpwJzEqImbJmB5ZsSpA+q2VxbFXwooG/x7agp6nlMtymHsrSYRbgqwKCrbZbkqEJUkCmZC7BJF9aNOqdUTY23DwGq1XbopGhhVSwKI+Vspg4+H3SL9JPQiRQODSrm73YC9R+j6cg8U4LDfYt0EJsA6IgVkt73Bjba9ricSgj6UCdsZE0dKvVwyS3huWrx/BfycarQh6L6W97jfyRhMI5BkCcNDK5KMkclpVUaXQIhkjKLxLQwyRjcXTtLN5fL0/wFVYaRbAzCjHgAAAABJRU5ErkJggg==);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: left bottom, 7px bottom, right bottom;
    background-size: 8px 8px, calc(100% - 10px) 8px, 8px 8px;
    pointer-events: none;
}

.record-popup .title {
    position: relative;
    width: 100%;
    height: 44px;
    padding: 0 35px;
    margin-bottom: 8px;
    text-align: center;
    z-index: 2;
    white-space: nowrap;
}

.record-popup .title::before,
.record-popup .title::after {
    content: "";
    position: absolute;
    top: 0;
    width: 36px;
    height: 100%;
    z-index: -1;
}

.record-popup .title::before {
    left: 0;
}

.record-popup .title::after {
    right: 0;
}

.record-popup .title span {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 40px;
    font-size: 16px;
    position: relative;
    z-index: 1;
}

.record-popup.popup-type-1 .title::before {
    background: url("../wegame-local-assets/assets/tit-bg-left1-CNfD_pis.png") no-repeat left top/100% 100%;
}

.record-popup.popup-type-1 .title::after {
    background: url("../wegame-local-assets/assets/tit-bg-right1-Bn4LTNhF.png") repeat-x right top/100% 100%;
}

.record-popup.popup-type-1 .title span {
    background: url("../wegame-local-assets/assets/tit-bg-middle1-BgiPTsqy.png") repeat-x center center/contain;
    color: #c8c8c8;
}

.record-popup.popup-type-2 .title::before {
    background: url("../wegame-local-assets/assets/tit-bg-left2-pk6ZBtFE.png") no-repeat left top/100% 100%;
}

.record-popup.popup-type-2 .title::after {
    background: url("../wegame-local-assets/assets/tit-bg-right2-iuKKFJr4.png") repeat-x right top/100% 100%;
}

.record-popup.popup-type-2 .title span {
    background: url("../wegame-local-assets/assets/tit-bg-middle2-CEfnDeqC.png") repeat-x center center/contain;
    color: #7a97fe;
}

.record-popup.popup-type-3 .title::before {
    background: url("../wegame-local-assets/assets/tit-bg-left3-DYAtTTMI.png") no-repeat left top/100% 100%;
}

.record-popup.popup-type-3 .title::after {
    background: url("../wegame-local-assets/assets/tit-bg-right3-ySN6tCmv.png") repeat-x right top/100% 100%;
}

.record-popup.popup-type-3 .title span {
    background: url("../wegame-local-assets/assets/tit-bg-middle3-Ci3cLuka.png") repeat-x center center/contain;
    color: #fee055;
}

.record-popup.popup-type-4 .title::before {
    background: url("../wegame-local-assets/assets/tit-bg-left4-DGULFwGg.png") no-repeat left top/100% 100%;
}

.record-popup.popup-type-4 .title::after {
    background: url("../wegame-local-assets/assets/tit-bg-right4-CnfOElDd.png") repeat-x right top/100% 100%;
}

.record-popup.popup-type-4 .title span {
    background: url("../wegame-local-assets/assets/tit-bg-middle4-DoG5Y9nD.png") repeat-x center center/contain;
    color: #f06916;
}

.record-popup.popup-type-5 .title::before {
    background: url("../wegame-local-assets/assets/tit-bg-left5-wwun4nDe.png") no-repeat left top/100% 100%;
}

.record-popup.popup-type-5 .title::after {
    background: url("../wegame-local-assets/assets/tit-bg-right5-D6kpZ158.png") repeat-x right top/100% 100%;
}

.record-popup.popup-type-5 .title span {
    background: url("../wegame-local-assets/assets/tit-bg-middle5-B1GJFuQH.png") repeat-x center center/contain;
    color: #c8c8c8;
}

.record-popup-content {
    padding: 0 10px 10px;
}

.record-popup .normal {
    position: relative;
    margin-bottom: 6px;
    padding-bottom: 8px;
    font-size: 12px;
    text-align: center;
    line-height: 1.45;
}

.record-popup .normal::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    mask: url(data:image/png;base64,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) no-repeat;
    mask-size: contain;
    -webkit-mask: url(data:image/png;base64,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) no-repeat;
    -webkit-mask-size: contain;
}

.record-popup .normal:last-child::after {
    display: none;
}

.record-popup .type-1 {
    color: #7f7f7f;
}

.record-popup.popup-type-1 .normal::after,
.record-popup.popup-type-5 .normal::after {
    background-color: #5f5a55;
}

.record-popup .type-1 .popup-line,
.record-popup .type-1 .record-text {
    color: #a09e9c;
}

.record-popup .type-1 .num {
    color: #dbd9ce;
}

.record-popup .type-2,
.record-popup .type-2 .popup-line,
.record-popup .type-2 .record-text,
.record-popup .type-2 .num {
    color: #8787fe;
}

.record-popup.popup-type-2 .normal::after {
    background-color: #5b4498;
}

.record-popup .type-3,
.record-popup .type-3 .popup-line,
.record-popup .type-3 .record-text,
.record-popup .type-3 .num {
    color: #f06916;
}

.record-popup.popup-type-3 .normal::after {
    background-color: #6f542b;
}

.record-popup.popup-type-4 .normal::after {
    background-color: #863e1f;
}

.record-popup .type-5,
.record-popup .type-5 .popup-line,
.record-popup .type-5 .record-text,
.record-popup .type-5 .num {
    color: #d10000;
}

.record-popup .simple,
.record-popup .simple .record-text,
.record-popup .simple .num {
    color: #dbd9ce;
}

.record-popup .specialMods .popup-line,
.record-popup .specialMods .record-text,
.record-popup .specialMods .num {
    color: #b8daf2;
}

.record-popup .configMods .popup-line,
.record-popup .configMods .record-text,
.record-popup .configMods .num {
    color: #b8daf2;
}

/* 亵�?词�?�?�?绿�?��?�?�?extraClass�?�?�?��??词�?�?�?��?�?�?�??�?*/
.record-popup .mods .record-text.desecrated-line,
.record-popup .mods .record-text.desecrated-line .name,
.record-popup .mods .record-text.desecrated-line .num {
    color: #4fc364;
}

/* �?�?词�?�?�?�?�?� */
.record-popup .mods .record-text.fractured-line,
.record-popup .mods .record-text.fractured-line .name,
.record-popup .mods .record-text.fractured-line .num {
    color: #d4b035;
}

.record-popup .needs-text {
    color: #dbd9ce;
}

.record-popup .record-text {
    display: block;
    white-space: pre-line;
}

.record-popup .record-text + .record-text {
    margin-top: 3px;
}

.record-popup .simple .record-text {
    display: inline;
}

.record-popup .simple .record-text::after {
    content: ",";
}

.record-popup .simple .record-text:last-child::after {
    content: "";
}

.record-popup .record-text.has-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.record-popup .record-text-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 1px;
    flex: 0 0 auto;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKeSURBVHgBzVm9bhNBEJ6d27PPxgoSDQhFcRUkcIFSggwdLxLBW+UxQkFDQ0kbgSgokMDiRxQUxNi3u8N8sz4rKaGaT5Z1Po931rPz881c6Nr2dPno3hmXFKgkIgokeA9k1/YSIWYmyYmk5CohgZqGKeG7KqyAXKSs9wQieocD22LNaLy7rp+xBmQGBL2XdX0Kja7b6LqxvHr99kV4tnyQp9P298WHL28aosleV/0ZyU6xLSmFimSiAs1Vgnd/AoJ2WxUM8jvNJht14/abwHRNxVVdWFuFUqb1/ePDJ6vVtxk9PpnL4Z2Dc3KGWze7l4vj28JF7RwbnpIzNBwn222C+4TB4Vwh6XH3qQyeJOQNo9hQN47YoL/NATFGmnTtYEGH2OUgrunAnw8Cci3HOkMpmnOLblDMBz36oVQLSiGvcWLgXutKyj53aBZEMhSnFkQR4RjZYyExmAW326w0p5BXsMWw5yBRgkdew5i1jPB621NKTk0IH2wjKLa/KIHJrJLAjB6jGHEBMs0lFwtnlxCqiTpncoeobjcCYcURe2RbQbs/7ZWIG+13G/ZZSswHs/KuXPz5IHpk9OGcLUh8ljrErlumgEnEuI3wwWAO6Q1tG2iMKE5OjxitiKCSOKWCBJuZD4YQnDadFUoW2OZ8XsHIgX4JtVCtdB4NKFd80O8B0xDF/sKkeh2OWGlNn9KanKGkfIngjQezmcyP7i4v3n0613G+jYKReOKo3VcYJHLUbO2wjGGU/yIXpRLQYRaEyFQmpY25DvbjfrgO8rzZpsuHi/nTz6ufEnTkf3qyODq70XH4s9lYgoRfdpOJPXqwpRHpqa/XGM32if4JyLVgxWAnxt6LPc7ApuKoo9h1KhJNb9JHESCrX3/8kvcfvz//CzjrJ9QzdVHfAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
}

.popup-line + .popup-line {
    margin-top: 3px;
}

.record-popup .popup-line-with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.record-popup .popup-line-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 1px;
    flex: 0 0 auto;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKeSURBVHgBzVm9bhNBEJ6d27PPxgoSDQhFcRUkcIFSggwdLxLBW+UxQkFDQ0kbgSgokMDiRxQUxNi3u8N8sz4rKaGaT5Z1Po931rPz881c6Nr2dPno3hmXFKgkIgokeA9k1/YSIWYmyYmk5CohgZqGKeG7KqyAXKSs9wQieocD22LNaLy7rp+xBmQGBL2XdX0Kja7b6LqxvHr99kV4tnyQp9P298WHL28aosleV/0ZyU6xLSmFimSiAs1Vgnd/AoJ2WxUM8jvNJht14/abwHRNxVVdWFuFUqb1/ePDJ6vVtxk9PpnL4Z2Dc3KGWze7l4vj28JF7RwbnpIzNBwn222C+4TB4Vwh6XH3qQyeJOQNo9hQN47YoL/NATFGmnTtYEGH2OUgrunAnw8Cci3HOkMpmnOLblDMBz36oVQLSiGvcWLgXutKyj53aBZEMhSnFkQR4RjZYyExmAW326w0p5BXsMWw5yBRgkdew5i1jPB621NKTk0IH2wjKLa/KIHJrJLAjB6jGHEBMs0lFwtnlxCqiTpncoeobjcCYcURe2RbQbs/7ZWIG+13G/ZZSswHs/KuXPz5IHpk9OGcLUh8ljrErlumgEnEuI3wwWAO6Q1tG2iMKE5OjxitiKCSOKWCBJuZD4YQnDadFUoW2OZ8XsHIgX4JtVCtdB4NKFd80O8B0xDF/sKkeh2OWGlNn9KanKGkfIngjQezmcyP7i4v3n0613G+jYKReOKo3VcYJHLUbO2wjGGU/yIXpRLQYRaEyFQmpY25DvbjfrgO8rzZpsuHi/nTz6ufEnTkf3qyODq70XH4s9lYgoRfdpOJPXqwpRHpqa/XGM32if4JyLVgxWAnxt6LPc7ApuKoo9h1KhJNb9JHESCrX3/8kvcfvz//CzjrJ9QzdVHfAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
}

.record-popup .popup-line-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.record-popup .popup-line-text {
    display: inline-block;
}

.equip-message-tips {
    min-width: 140px;
    max-width: 280px;
    padding: 5px;
    background: linear-gradient(180deg, rgba(41, 34, 24, 0.98), rgba(11, 9, 8, 0.98));
    border: 1px solid rgba(143, 118, 72, 0.75);
    box-shadow: 0 12px 26px rgba(0,0,0,0.42);
}

.message-tips-content {
    white-space: pre-wrap;
    padding: 8px 10px;
    font-size: 14px;
    color: #b9ad85;
    background:
        url("../wegame-local-assets/assets/p-bg-BTr7eRYQ.webp") no-repeat center/100% 100%;
}

/* ??????????????????????????????????? */
.message-tips-content .message-tips-title {
    color: #e9d69c;
    font-weight: 600;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(143, 118, 72, 0.35);
}

.skill-popup {
    width: 480px;
    min-height: 0;
    padding: 7px;
    background: linear-gradient(180deg, rgba(26, 31, 31, 0.98), rgba(11, 14, 14, 0.98));
    border: 1px solid rgba(70, 97, 95, 0.85);
    box-shadow: 0 18px 36px rgba(0,0,0,0.46);
}

.skill-popup-inner {
    width: 100%;
    min-height: 0;
    padding: 1px;
    background:
        url("../wegame-local-assets/assets/p-bg-BTr7eRYQ.webp") no-repeat center/100% 100%;
}

.skill-popup-inner .header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 56px;
    padding-left: 19px;
    background:
        url("../wegame-local-assets/assets/skill-tit-bg-Dv89YM5U.webp") no-repeat left top/356px 100%;
}

.skill-popup-inner .header .skill-img {
    width: 46px;
    height: 46px;
    margin-top: -3px;
    padding: 2px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f1e4c2;
    font-size: 16px;
    background:
        url("../wegame-local-assets/assets/main-buff-bg-BH5euifF.png") no-repeat center/100% 100%;
}

.skill-popup-inner .header .skill-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.skill-popup-inner .header .skill-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    margin-top: -2px;
    margin-left: 10px;
    min-height: 40px;
}

.skill-popup-inner .header .tit {
    color: #73c9be;
    font-size: 16px;
    line-height: 1.1;
    display: block;
}

.skill-popup-inner .header .type {
    color: #6e9a97;
    font-size: 11px;
    line-height: 1.1;
    display: block;
    margin-top: 0;
}

.skill-popup-content {
    padding: 8px 12px 6px;
    font-size: 12px;
}

.skill-popup-content .skill-intro-list,
.skill-popup-content .skill-desc,
.skill-popup-content .skill-strip {
    position: relative;
    padding-bottom: 9px;
}

.skill-popup-content .skill-intro-list::after,
.skill-popup-content .skill-desc::after,
.skill-popup-content .skill-strip::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(92, 114, 112, 0.9), transparent);
}

.skill-popup-content > :last-child::after,
.skill-popup-content .sub-tabs-content > :last-child::after {
    display: none;
}

.skill-popup-content .skill-intro-list .name {
    color: #7ea7a3;
}

.skill-popup-content .skill-intro-list .num,
.skill-popup-content .skill-intro-list .record-text,
.skill-popup-content .skill-intro-list .record-text .num {
    color: #dbd9ce;
}

.skill-popup-content .skill-intro-list .record-text .name {
    color: #7ea7a3;
}

.skill-popup-content .skill-intro-list .record-text {
    display: block;
    white-space: pre-line;
}

.skill-popup-content .skill-intro-list .record-text + .record-text {
    margin-top: 4px;
}

.skill-popup-content .skill-desc {
    padding: 6px 8px 7px;
    color: #c6b07d;
    text-align: center;
    white-space: pre-line;
    line-height: 1.55;
}

.skill-popup-content .skill-strip {
    padding: 6px 8px 7px;
    color: #8f8bff;
    text-align: center;
    line-height: 1.4;
    white-space: normal;
}

.skill-popup-content .skill-needs {
    color: #c9c1ae;
}

.skill-popup-content .skill-mods {
    color: #8f8bff;
}

.skill-popup-content .skill-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    color: #c9c1ae;
}

.skill-popup-content .skill-section-title {
    margin: 1px 0;
    color: #d0b26f;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
}

.skill-popup-content .skill-section-body {
    max-width: 94%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.skill-popup-content .skill-section-body .record-text {
    display: block;
    color: #c9c1ae;
    line-height: 1.36;
}

.skill-popup-content .skill-strip .record-text {
    display: block;
    white-space: pre-line;
}

.skill-popup-content .skill-strip .record-text .name,
.skill-popup-content .skill-strip .record-text .num,
.skill-popup-content .skill-strip .record-text .postfix {
    color: inherit;
}

.skill-popup-content .skill-strip .record-text + .record-text {
    margin-top: 2px;
}

.skill-popup-content .skill-strip .num {
    color: inherit;
}

.skill-popup-content .needs {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.skill-popup-content .needs-text {
    display: block;
    color: #c9c1ae;
    text-align: left;
    line-height: 1.45;
    padding-left: 1px;
}

.skill-popup-content .needs-label {
    color: #6e9a97;
    margin-right: 6px;
}

.skill-popup-content .simple .record-text {
    display: inline;
}

.skill-popup-content .simple .record-text::after {
    content: ", ";
}

.skill-popup-content .simple .record-text:last-child::after {
    content: "";
}

.skill-popup-content .tab-description {
    margin-bottom: 12px;
    font-size: 12px;
    color: #c6b07d;
    line-height: 1.4;
    text-align: center;
}

.skill-popup-content .gem-tabs-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 10px;
}

.skill-popup-content .gem-tabs-nav::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(92, 114, 112, 0.9), transparent);
}

.skill-popup-content .gem-tabs-nav .tab-item {
    position: relative;
    min-width: 44px;
    height: 20px;
    line-height: 20px;
    padding: 0 16px;
    font-size: 12px;
    color: #517270;
    z-index: 1;
}

.skill-popup-content .gem-tabs-nav .tab-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 2px;
    border-radius: 8px 8px 0 0;
    border: 1px solid #263434;
    border-bottom: none;
    background: linear-gradient(180deg, #1b2222, #121212);
    z-index: -1;
}

.skill-popup-content .gem-tabs-nav .tab-item.active {
    color: #8cc5c1;
}

.skill-popup-content .gem-tabs-nav .tab-item.active::after {
    bottom: 0;
}

.skill-popup-content .sub-tabs-nav .tab-item {
    padding: 0 10px;
    height: 18px;
    line-height: 18px;
    font-size: 11px;
}

.skill-popup-content .sub-tabs-content {
    position: relative;
    margin-top: 8px;
    padding-bottom: 10px;
}

.skill-popup-content .sub-tabs-content .line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(92, 114, 112, 0.9), transparent);
}

/* �?�?签页�?�示/�?��?��?��?� */
.skill-gem-tabs .tab-group {
    display: none;
}

.skill-gem-tabs .tab-group.active {
    display: block;
}

.skill-gem-tabs .sub-tab-page {
    display: none;
}

.skill-gem-tabs .sub-tab-page.active {
    display: block;
}

/* 子�?签导�?��?�??容�?�?��??�?��?*/
.skill-gem-tabs .tab-group .js-gem-sub-nav {
    margin-top: 8px;
}

/* �??�?��?�?�类�?��?签�?�?第�?�?tags �?�?样式�?�??�?灰绿�?��?�?WeGame �?�??*/
.skill-popup-content .skill-intro-list .record-text:first-child .name {
    color: #7ea7a3;
    font-style: italic;
}

/* �?�?�说�??�??�?�?descrText / desc-type=4�?�?亮�?��?�中�?��??�?��?�?��?��?紫�??mods */
.skill-popup-content .skill-bottom-desc {
    color: #b7b0a0;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* ============================================================

/* 左侧武�?��??*/
.equip-img[data-slot="weapon-main"]     { transform: translate(-14px, -3px); }
.equip-img[data-slot="weapon-inactive"] { transform: translate(-20px, -8px); }

/* 右侧�?��??�??*/
.equip-img[data-slot="offhand-main"]    { transform: translate(-9px, -3px); }
.equip-img[data-slot="offhand-inactive"]{ transform: translate(-4px, -6px); }

/* 左�?? (column-1) */
.equip-img[data-slot="ring3"]           { transform: translate(-10px, -75px); }
.equip-img[data-slot="ring"]            { transform: translate(-8px,1px); }
.equip-img[data-slot="gloves"]          { transform: translate(-12px, 8px); }
.equip-img[data-slot="flask-left"]      { transform: translate(-11px, 15px); }

/* 中�?? (column-2) */
.equip-img[data-slot="helmet"]          { transform: translate(-5px, -8px); }
.equip-img[data-slot="body"]            { transform: translate(-5px, 2px); }
.equip-img[data-slot="belt"]            { transform: translate(-5px, 8px); }
.equip-img[data-slot="flask-center-1"]  { transform: translate(-7px, 37px); }
.equip-img[data-slot="flask-center-2"]  { transform: translate(-3px, 37px); }
.equip-img[data-slot="flask-center-3"]  { transform: translate(0px, 37px); }

/* 右�?? (column-3) */
.equip-img[data-slot="amulet"]          { transform: translate(0px, -2px); }
.equip-img[data-slot="ring2"]           { transform: translate(1px, 0px); }
.equip-img[data-slot="boots"]           { transform: translate(3px, 7px); }
.equip-img[data-slot="flask-right"]     { transform: translate(2px, 15px); }