:root {
    --card-w: 901px;
    --card-h: 1041px;

    --asset-old-survivor-card-bg: url("../assets/old-survivor/card-bg.png");
    --asset-old-survivor-skills-normal: url("../assets/old-survivor/skills-normal.png");
    --asset-old-survivor-skills-ultimate: url("../assets/old-survivor/skills-ultimate.png");
    --asset-old-survivor-skills-transform: url("../assets/old-survivor/skills-transform.png");

    --asset-old-survivor-name-small: url("../assets/old-survivor/name-small.png");
    --asset-old-survivor-name-medium: url("../assets/old-survivor/name-medium.png");
    --asset-old-survivor-name-large: url("../assets/old-survivor/name-large.png");

    --asset-old-survivor-body-slot: url("../assets/old-survivor/body-slot.png");
    --asset-old-survivor-body-slot-badge: url("../assets/old-survivor/body-slot-badge.png");
    --asset-old-survivor-body-slot-top-small: url("../assets/old-survivor/body-slot-top-small.png");
    --asset-old-survivor-body-slot-top-medium: url("../assets/old-survivor/body-slot-top-medium.png");
    --asset-old-survivor-body-slot-top-large: url("../assets/old-survivor/body-slot-top-large.png");
    --set-icon-scale: .5;
    --set-icon-rotate: 0deg;
}

.section {
    margin-top: 14px;
}

.body-article-options {
    display: grid;
    gap: 6px;
    align-self: end;
}

.body-article-options .checkbox-row {
    margin-bottom: 0;
}

.skill-editor-grid {
    display: grid;
    gap: 8px;
}

.skill-editor-row {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 8px;
    align-items: center;
}

.tier-pill {
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 12px;
    color: #251c16;
    font-weight: 800;
    text-align: center;
}

.tier-blue { background: #6fc5db; }
.tier-yellow { background: #e5c33b; }
.tier-orange { background: #de8335; }
.tier-red { background: #c93937; color: #f8eee3; }

.old-survivor-card {
    background: #17100d;
}

.old-survivor-card .card-bg {
    background-image: var(--asset-old-survivor-card-bg);
    z-index: 1;
}

.old-skill-overlay,
.old-name-plate,
.old-body-slot,
.old-body-slot-top,
.old-body-slot-badge {
    position: absolute;
    inset: 0;
    width: var(--card-w);
    height: var(--card-h);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

.old-skill-overlay {
    background-image: var(--asset-old-survivor-skills-normal);
    z-index: 20;
}

.old-survivor-card.mode-ultimate .old-skill-overlay {
    background-image: var(--asset-old-survivor-skills-ultimate);
}

.old-survivor-card.mode-transform .old-skill-overlay {
    background-image: var(--asset-old-survivor-skills-transform);
}

.old-name-plate {
    background-image: var(--asset-old-survivor-name-medium);
    z-index: 40;
}

.old-survivor-card.name-small .old-name-plate {
    background-image: var(--asset-old-survivor-name-small);
}

.old-survivor-card.name-large .old-name-plate {
    background-image: var(--asset-old-survivor-name-large);
}

.old-survivor-name {
    position: absolute;
    left: 6px;
    top: var(--old-name-top, 54px);
    width: 480px;
    font-family: "Algo FY Regular", Georgia, "Times New Roman", serif;
    font-size: var(--old-name-font-size, 37px);
    letter-spacing: var(--old-name-letter-spacing, 0px);
    line-height: .9;
    text-align: center;
    text-transform: uppercase;
    color: #4d3828;
    z-index: 45;
    pointer-events: none;
}

.old-survivor-name-initial {
    font-size: var(--old-name-first-letter-size, 53px);
    line-height: .75;
}

.old-body-slot {
    background-image: var(--asset-old-survivor-body-slot);
    z-index: 50;
}

.old-body-slot-top {
    background-image: var(--asset-old-survivor-body-slot-top-medium);
    z-index: 55;
}

.old-survivor-card.body-top-small .old-body-slot-top {
    background-image: var(--asset-old-survivor-body-slot-top-small);
}

.old-survivor-card.body-top-large .old-body-slot-top {
    background-image: var(--asset-old-survivor-body-slot-top-large);
}

.old-body-slot-badge {
    background-image: var(--asset-old-survivor-body-slot-badge);
    z-index: 80;
}

.old-body-slot-text {
    position: absolute;
    left: 525px;
    top: 35px;
    width: 210px;
    min-height: 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: "Arek Semibold Italic", Georgia, serif;
    font-size: 29px;
    line-height: 1.15;
    color: #1e1a1c;
    z-index: 65;
    pointer-events: none;
}

.old-body-slot-text strong,
.old-body-slot-highlight {
    color: #820b0e;
    font-size: 29px;
    font-weight: 800;
    text-transform: capitalize;
}

.old-survivor-card.body-slot-baldric .old-body-slot-text,
.old-body-slot-text.is-baldric,
.old-body-slot-text.is-both-item-baldric,
.body-slot-text.is-both-item-baldric {
    letter-spacing: -1px;
    font-size: 27px;
}

.old-body-slot-text.is-both-item-baldric {
    line-height: 0.95;
}

.old-survivor-card.body-slot-baldric .old-body-slot-text strong,
.old-survivor-card.body-slot-baldric .old-body-slot-highlight,
.old-body-slot-text.is-baldric strong,
.old-body-slot-text.is-baldric .old-body-slot-highlight,
.old-body-slot-text.is-both-item-baldric strong,
.old-body-slot-text.is-both-item-baldric .old-body-slot-highlight,
.body-slot-text.is-both-item-baldric strong,
.body-slot-text.is-both-item-baldric .old-body-slot-highlight {
    font-size: 27px;
}

.old-body-slot-line,
.old-body-slot-item-line {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: center;
    line-height: inherit;
}

.old-body-slot-item-line {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.old-body-slot-text strong,
.old-body-slot-highlight {
    display: inline;
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
    line-height: inherit;
}

.portrait {
    left: var(--portrait-x, 250px);
    top: var(--portrait-y, 170px);
    width: var(--portrait-w, 460px);
    z-index: 10;
}

.old-survivor-card.portrait-over-body-slot-bg .portrait {
    z-index: 52;
}

.old-survivor-card.portrait-over-body-slot .portrait {
    z-index: 85;
}

.old-survivor-card.portrait-over-body-slot-bg .old-skill-overlay,
.old-survivor-card.portrait-over-body-slot .old-skill-overlay {
    z-index: 90;
}

.old-survivor-card.portrait-over-body-slot-bg .old-skill-list,
.old-survivor-card.portrait-over-body-slot .old-skill-list {
    z-index: 95;
}

.old-survivor-card.portrait-over-body-slot-bg .old-name-plate,
.old-survivor-card.portrait-over-body-slot .old-name-plate {
    z-index: 100;
}

.old-survivor-card.portrait-over-body-slot-bg .old-survivor-name,
.old-survivor-card.portrait-over-body-slot .old-survivor-name {
    z-index: 105;
}

.old-survivor-card.portrait-over-body-slot-bg .old-set-icon {
    z-index: 51;
}

.portrait.empty {
    height: 650px;
}

.portrait.empty::before {
    content: "Upload character art";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 34px;
}

.body-item-art {
    position: absolute;
    left: var(--body-item-x, 550px);
    top: var(--body-item-y, 175px);
    width: var(--body-item-w, 320px);
    z-index: 70;
    user-select: none;
    transform: rotate(var(--body-item-rotate, 0deg)) scale(var(--body-item-scale, .5));
    transform-origin: center center;
    filter: drop-shadow(7px 7px 0 rgba(0, 0, 0, .45));
}

.body-item-art.shadow-left {
    filter: drop-shadow(-7px 7px 0 rgba(0, 0, 0, .45));
}

.body-item-art img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
}

.body-item-art.empty {
    display: none;
    pointer-events: none;
}

.old-set-icon {
    position: absolute;
    right: var(--old-set-icon-right, 91px);
    top: var(--old-set-icon-top, 541px);
    width: var(--old-set-icon-w, 58px);
    height: var(--old-set-icon-h, 58px);
    background-image: var(--asset-set-icon, none);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: center;
    transform: rotate(var(--set-icon-rotate, 0deg)) scale(var(--set-icon-scale, .5));
    z-index: 75;
    pointer-events: none;
}

.skill-textarea-wrap {
    position: relative;
    min-width: 0;
}

.skill-editor-row textarea {
    min-height: 56px;
    resize: vertical;
}

.skill-suggestion-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    display: grid;
    gap: 2px;
    max-height: 230px;
    overflow: auto;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: #211d19;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}

.skill-suggestion-menu[hidden] {
    display: none;
}

.skill-suggestion-option {
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: var(--ui-text);
    cursor: pointer;
    padding: 7px 9px;
    text-align: left;
    white-space: pre-line;
}

.skill-suggestion-option:hover,
.skill-suggestion-option:focus {
    background: rgba(255, 255, 255, .14);
}

.old-skill-list {
    position: absolute;
    inset: 0;
    width: var(--card-w);
    height: var(--card-h);
    z-index: 35;
    pointer-events: none;
}

.old-skill-row {
    position: absolute;
    top: var(--old-skill-row-top, 638px);
    width: 310px;
    height: var(--old-skill-row-h, 86px);
    display: flex;
    align-items: center;
    font-family: "Arek Semibold Italic", Georgia, serif;
    font-size: 29px;
    line-height: 1.15;
    letter-spacing: -.04em;
    color: #1e1a1c;
    text-shadow: none;
    overflow: hidden;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.old-survivor-card.mode-ultimate .old-skill-row[data-skill-key="blue1"] {
    border-bottom: 2px solid #1e1a1c;
}

.old-skill-row.skill-left {
    left: 118px;
    justify-content: flex-start;
    text-align: left;
}

.old-skill-row.skill-right {
    right: 122px;
    justify-content: flex-end;
    text-align: right;
}

.old-skill-row > span {
    display: block;
    width: 100%;
}

.old-survivor-card.mode-ultimate .old-skill-row.skill-compact-lines > span {
    height: 100%;
    margin-top: 0;
}

.old-survivor-card.mode-ultimate .old-skill-row.skill-compact-lines .old-skill-lines {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
}

.old-survivor-card.mode-ultimate .old-skill-row.skill-compact-lines .old-skill-line {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 29px;
    line-height: 29px;
}

.card.export .portrait.empty::before {
    display: none !important;
}

.old-survivor-card.mode-ultimate .old-skill-row.skill-compact-lines .old-skill-plus-one {
    margin-right: .18em;
}
/*
.old-survivor-card.mode-ultimate .old-skill-row.skill-compact-lines .old-skill-plus-one {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 29px;
    line-height: 29px;
    margin-top: -4px;
    margin-right: .18em;
}


.old-skill-plus-one {
    display: inline-block;
    font-size: 35px;
    line-height: 1;
    font-weight: 400;
}
*/