#skill-simulator-root {
    margin: 0;
}

.skill-sim {
    border: 1.3px solid #cdd7eb;
    background: linear-gradient(180deg, #f6f8fd, #eef2fb);
    padding: 15.6px;
    border-radius: 10.4px;
    box-shadow: 0 2.6px 7.8px rgba(34, 51, 84, 0.12);
    max-width: 1274px;
}

.skill-sim__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15.6px;
    align-items: center;
    margin-bottom: 15.6px;
}

.skill-sim__control {
    display: flex;
    align-items: center;
    gap: 7.8px;
    font-weight: 600;
    color: #2f3c59;
}

.skill-sim__control--toggle {
    font-weight: 500;
}

.skill-sim__class-select {
    padding: 5.2px 7.8px;
    min-width: 234px;
}

.skill-sim__toggle {
    margin-right: 5.2px;
}

.skill-sim__button {
    padding: 7.8px 15.6px;
    border: 1.3px solid #4c6fb9;
    background-color: #5b81d6;
    color: #fff;
    border-radius: 5.2px;
    cursor: pointer;
    font-weight: 600;
}

.skill-sim__button:hover {
    background-color: #496bbc;
}

.skill-sim__status {
    min-height: 23.4px;
    margin-bottom: 13px;
    font-size: 16.9px;
    color: #3f4c6c;
}

.skill-sim__status.is-error {
    color: #b22929;
}

.skill-sim__status.is-success {
    color: #1e7a3b;
}

.skill-sim__status.is-info {
    color: #3863b3;
}
.skill-sim__summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 13px;
    gap: 10.4px;
}

.skill-sim__title {
    margin: 0;
    font-size: 23.4px;
    color: #273550;
}

.skill-sim__points {
    font-size: 15.6px;
    font-weight: 600;
    color: #506090;
}
.skill-stages {
    display: flex;
    flex-direction: column;
    gap: 20.8px;
}

.skill-stage-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15.6px;
    align-items: flex-start;
}

.skill-stage-column {
    flex: 1 1 0;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 15.6px;
}

.skill-stage-column__header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 7.8px;
}

.skill-stage-column__points {
    font-size: 15.6px;
    font-weight: 700;
    color: #273550;
}


.skill-stage-column:empty {
    display: none;
}

.skill-stage {
    border: 1.3px solid #d7e0f3;
    border-radius: 7.8px;
    padding: 10.4px;
    background-color: #fff;
    box-shadow: 0 1.3px 2.6px rgba(58, 74, 112, 0.08);
    margin-bottom: 10.4px;
}

.skill-stage:last-child {
    margin-bottom: 0;
}

.skill-stage__title {
    margin: 0 0 7.8px 0;
    font-size: 19.5px;
    font-weight: 600;
    color: #273550;
}

.skill-stage__grid {
    width: 100%;
    overflow: visible;
}

.skill-tree {
    display: grid;
    grid-template-columns: repeat(7, minmax(78px, 1fr));
    grid-auto-rows: 78px;
    gap: 7.8px;
}

.skill-tree__cell {
    display: flex;
    justify-content: center;
    align-items: center;
}

.skill-tree__empty {
    font-style: italic;
    color: #6f7ba0;
}

.skill-node {
    width: 100%;
    max-width: 100%;
    min-height: 72.8px;
    border: none;
    background: none;
    border-radius: 7.8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 2.6px;
    padding: 5.2px 3.9px;
    text-align: center;
    box-sizing: border-box;
}

.skill-node__icon-wrap {
    position: relative;
    width: 31.2px;
    height: 31.2px;
    margin: 0 auto;
    cursor: pointer;
}

.skill-node__icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5.2px;
    background: linear-gradient(135deg, #5b7cc8, #3d5ba3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.7px;
    font-weight: 700;
}

.skill-node__icon-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.skill-node__icon-wrap--highlight {
    box-shadow: 0 0 0 2.6px rgba(195, 45, 45, 0.75);
    border-radius: 5.2px;
}

.skill-node__icon-wrap--highlight .skill-node__icon,
.skill-node__icon-wrap--highlight .skill-node__icon-img {
    filter: drop-shadow(0 0 2.6px rgba(195, 45, 45, 0.55));
}

.skill-node__icon-wrap--blocked {
    filter: grayscale(100%);
    opacity: 0.55;
}

.skill-node__icon-wrap--blocked .skill-node__icon,
.skill-node__icon-wrap--blocked .skill-node__icon-img {
    filter: grayscale(100%);
}

.skill-node__icon-wrap--highlight.skill-node__icon-wrap--blocked {
    filter: none;
    opacity: 1;
}

.skill-node__icon-wrap--highlight.skill-node__icon-wrap--blocked .skill-node__icon,
.skill-node__icon-wrap--highlight.skill-node__icon-wrap--blocked .skill-node__icon-img {
    filter: none;
}

.skill-node__badge {
    position: absolute;
    top: -7.8px;
    right: -7.8px;
    background-color: #2f3c59;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    padding: 2.6px 5.2px;
    border-radius: 10.4px;
    display: none;
}

.skill-node__name {
    font-size: 11.7px;
    font-weight: 600;
    color: #273550;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    display: block;
}

.skill-node__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.9px;
}

.skill-node__btn {
    width: 23.4px;
    height: 23.4px;
    border: none;
    background: transparent;
    color: #324167;
    border-radius: 2.6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14.3px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.skill-node__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.skill-node__level {
    font-size: 11.7px;
    font-weight: 600;
    color: #324167;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-node--max {
    box-shadow: 0 0 0 2.6px rgba(30, 122, 59, 0.18);
}

.skill-node--locked {
    opacity: 0.45;
}


.skill-node__controls--auto {
    justify-content: center;
    gap: 0;
}

.skill-node__controls--auto .skill-node__level {
    font-weight: 700;
    font-size: 13px;
    color: #2f3c59;
}

.skill-node--auto {
    outline: 1.3px dashed rgba(64, 90, 142, 0.35);
    outline-offset: -2.6px;
    border-radius: 7.8px;
}

.skill-node--auto-active {
    outline-style: solid;
    outline-color: rgba(48, 133, 84, 0.55);
}

.skill-node__tag {
    display: inline-block;
    margin-top: 3.9px;
    padding: 1.3px 5.2px;
    border-radius: 3.9px;
    font-size: 10.4px;
    font-weight: 700;
    letter-spacing: 0.52px;
    text-transform: uppercase;
    color: #fff;
    background-color: #4c6fb9;
}

.skill-node--quest .skill-node__tag {
    background-color: #2f8f3f;
}

.skill-node--spirit .skill-node__tag {
    background-color: #7a3fb6;
}

.skill-node__tag--inactive {
    opacity: 0.55;
}

.skill-node--auto .skill-node__btn {
    display: none;
}

@media (max-width: 1170px) {
    .skill-stage-column {
        flex-basis: 100%;
    }
    .skill-stage-row {
        gap: 13px;
    }
    .skill-node {
        max-width: 114.4px;
        min-height: 80.6px;
    }
}

.skill-tooltip {
    position: absolute;
    z-index: 2000;
    background: rgba(18, 26, 44, 0.95);
    color: #f1f4ff;
    padding: 13px 15.6px;
    border-radius: 7.8px;
    box-shadow: 0 7.8px 23.4px rgba(15, 21, 36, 0.4);
    min-width: 286px;
    max-width: 416px;
    font-size: 16.9px;
    line-height: 1.4;
    pointer-events: none;
    display: none;
}

.skill-tooltip__name {
    font-weight: 700;
    font-size: 18.2px;
    margin-bottom: 5.2px;
}

.skill-tooltip__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15.6px;
    font-size: 15.6px;
    color: #cbd4ec;
    margin-bottom: 7.8px;
}

.skill-tooltip__meta-item--form {
    text-transform: capitalize;
}

.skill-tooltip__description {
    font-size: 16.9px;
    color: #e6ebff;
    word-break: break-word;
}