/* =========================================================
   ASTRALIS — PERSONNAGE V2
   Fenêtre indépendante
   ========================================================= */

#astralis-ui-window.is-character-v2
.astralis-window {

    width: min(920px, calc(100vw - 40px));

    height: min(
        660px,
        calc(100dvh - 160px)
    );

    box-sizing: border-box;

    border: 1px solid rgba(72, 224, 255, .82);
    border-radius: 0;

    clip-path: polygon(
        18px 0,
        calc(100% - 18px) 0,
        100% 18px,
        100% calc(100% - 18px),
        calc(100% - 18px) 100%,
        18px 100%,
        0 calc(100% - 18px),
        0 18px
    );

    background: linear-gradient(
        160deg,
        rgba(5, 29, 45, .99),
        rgba(2, 14, 27, .995)
    );

    overflow: hidden;
}

#astralis-ui-window.is-character-v2
.astralis-window-body {

    flex: 1;
    min-height: 0;

    padding: 14px;

    overflow: hidden;
}

.astralis-character-v2 {

    height: 100%;
    min-height: 0;

    display: flex;
    flex-direction: column;

    gap: 12px;

    color: #eefcff;
}

/* =========================================================
   PERSONNAGE V2 — ANGLES LUMINEUX
   ========================================================= */

#astralis-ui-window.is-character-v2
.astralis-window {

    position: relative;
    isolation: isolate;
}

/* Cadre lumineux extérieur */

#astralis-ui-window.is-character-v2
.astralis-window-frame-glow {

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    clip-path: polygon(
        18px 0,
        calc(100% - 18px) 0,
        100% 18px,
        100% calc(100% - 18px),
        calc(100% - 18px) 100%,
        18px 100%,
        0 calc(100% - 18px),
        0 18px
    );

    border: 1px solid rgba(103, 240, 255, .78);

    filter: drop-shadow(
        0 0 5px rgba(77, 232, 255, .80)
    );
}

/* Quatre diagonales cyan */

#astralis-ui-window.is-character-v2
.astralis-window-frame-glow::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            transparent 12px,
            #7af2ff 12px,
            #7af2ff 15px,
            transparent 15px
        ) top left / 22px 22px no-repeat,

        linear-gradient(
            225deg,
            transparent 12px,
            #7af2ff 12px,
            #7af2ff 15px,
            transparent 15px
        ) top right / 22px 22px no-repeat,

        linear-gradient(
            45deg,
            transparent 12px,
            #7af2ff 12px,
            #7af2ff 15px,
            transparent 15px
        ) bottom left / 22px 22px no-repeat,

        linear-gradient(
            315deg,
            transparent 12px,
            #7af2ff 12px,
            #7af2ff 15px,
            transparent 15px
        ) bottom right / 22px 22px no-repeat;

    filter: drop-shadow(
        0 0 4px rgba(82, 232, 255, .95)
    );
}

/* =========================================================
   PERSONNAGE V2 — BANDEAU ET TITRE
   ========================================================= */

#astralis-ui-window.is-character-v2
.astralis-window-header {

    position: relative;

    min-height: 78px;

    padding: 0 26px;

    box-sizing: border-box;

    background: linear-gradient(
        90deg,
        rgba(4, 28, 46, .99),
        rgba(8, 37, 55, .97) 42%,
        rgba(4, 24, 40, .99)
    );

    border-bottom:
        1px solid rgba(76, 222, 255, .40);
}

#astralis-ui-window.is-character-v2
.astralis-window-header__titles {

    position: absolute;

    top: 0;
    left: 50%;

    width: 390px;
    height: 78px;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;

    text-align: center;

    pointer-events: none;
}

#astralis-ui-window.is-character-v2
.astralis-window-header__titles::before,
#astralis-ui-window.is-character-v2
.astralis-window-header__titles::after {

    content: "";

    position: absolute;

    top: -1px;

    width: 1px;
    height: 106px;

    background: rgba(78, 232, 255, .82);

    transform-origin: top center;

    box-shadow:
        0 0 4px rgba(67, 226, 255, .35);
}

#astralis-ui-window.is-character-v2
.astralis-window-header__titles::before {

    left: 0;
    transform: rotate(-42deg);
}

#astralis-ui-window.is-character-v2
.astralis-window-header__titles::after {

    right: 0;
    transform: rotate(42deg);
}

#astralis-ui-window.is-character-v2
.astralis-window-header__titles strong,
#astralis-ui-window.is-character-v2
.astralis-window-header__titles small {

    width: 100%;

    text-align: center;
}

/* =========================================================
   PERSONNAGE V2 — BOUTONS DU BANDEAU
   ========================================================= */

#astralis-ui-window.is-character-v2
.astralis-window-header button {

    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    color: #d9f8ff;

    background: rgba(8, 45, 65, .85);

    border: 1px solid rgba(92, 225, 255, .85);
    border-radius: 0;

    clip-path: polygon(
        12px 0,
        calc(100% - 12px) 0,
        100% 12px,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        12px 100%,
        0 calc(100% - 12px),
        0 12px
    );

    cursor: pointer;

    transition:
        background .15s ease,
        filter .15s ease;
}

#astralis-ui-window.is-character-v2
.astralis-window-header button:hover {

    background: rgba(24, 99, 126, .90);

    filter: drop-shadow(
        0 0 5px rgba(82, 230, 255, .65)
    );
}


/* =========================================================
   PERSONNAGE V2 — ONGLETS BISEAUTÉS
   ========================================================= */

#astralis-ui-window.is-character-v2
.character-v2-tabs {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 0;

    margin: 0 0 10px;
}

#astralis-ui-window.is-character-v2
.character-v2-tabs button {

    min-width: 132px;
    height: 48px;

    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #b9d6e4;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: .6px;

    background: rgba(9, 35, 52, .95);

    border: 1px solid rgba(69, 190, 219, .75);
    border-radius: 0;

    clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px),
        0 10px
    );

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease;
}

#astralis-ui-window.is-character-v2
.character-v2-tabs button:hover {

    color: #ffffff;

    background: rgba(19, 77, 101, .95);
}

#astralis-ui-window.is-character-v2
.character-v2-tabs button.is-active {

    color: #ffffff;

    background: linear-gradient(
        180deg,
        rgba(20, 89, 117, .98),
        rgba(8, 48, 70, .98)
    );

    border-color: #6beaff;

    box-shadow:
        inset 0 0 12px rgba(70, 222, 255, .13);
}

/* =========================================================
   PERSONNAGE V2 — FINITIONS LUMINEUSES
   ========================================================= */

/* Boutons ? et X : dimensions et biseaux Inventaire */

#astralis-ui-window.is-character-v2
.astralis-window-header
.astralis-window-header__help,

#astralis-ui-window.is-character-v2
.astralis-window-header
.astralis-window-header__close {

    position: relative;

    width: 42px;
    height: 42px;

    min-width: 42px;
    min-height: 42px;

    box-sizing: border-box;

    border-radius: 0;

    clip-path: polygon(
        7px 0,
        calc(100% - 7px) 0,
        100% 7px,
        100% calc(100% - 7px),
        calc(100% - 7px) 100%,
        7px 100%,
        0 calc(100% - 7px),
        0 7px
    );
}

/* Quatre accents lumineux : ? et X */

#astralis-ui-window.is-character-v2
.astralis-window-header__help::after,

#astralis-ui-window.is-character-v2
.astralis-window-header__close::after {

    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(135deg,
            transparent 4px,
            #6ff0ff 4px 5px,
            transparent 5px
        ) top left / 8px 8px no-repeat,

        linear-gradient(225deg,
            transparent 4px,
            #6ff0ff 4px 5px,
            transparent 5px
        ) top right / 8px 8px no-repeat,

        linear-gradient(45deg,
            transparent 4px,
            #6ff0ff 4px 5px,
            transparent 5px
        ) bottom left / 8px 8px no-repeat,

        linear-gradient(315deg,
            transparent 4px,
            #6ff0ff 4px 5px,
            transparent 5px
        ) bottom right / 8px 8px no-repeat;
}

/* Onglets : accents lumineux aux quatre angles */

#astralis-ui-window.is-character-v2
.character-v2-tabs button {

    position: relative;
}

#astralis-ui-window.is-character-v2
.character-v2-tabs button::after {

    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(135deg,
            transparent 6px,
            #6ff0ff 6px 7px,
            transparent 7px
        ) top left / 12px 12px no-repeat,

        linear-gradient(225deg,
            transparent 6px,
            #6ff0ff 6px 7px,
            transparent 7px
        ) top right / 12px 12px no-repeat,

        linear-gradient(45deg,
            transparent 6px,
            #6ff0ff 6px 7px,
            transparent 7px
        ) bottom left / 12px 12px no-repeat,

        linear-gradient(315deg,
            transparent 6px,
            #6ff0ff 6px 7px,
            transparent 7px
        ) bottom right / 12px 12px no-repeat;

    opacity: .85;
}

#astralis-ui-window.is-character-v2
.character-v2-tabs button.is-active::after {

    opacity: 1;

    filter: drop-shadow(
        0 0 3px rgba(111, 240, 255, .8)
    );
}

/* =========================================================
   PERSONNAGE V2 — ? ET X IDENTIQUES À INVENTAIRE
   ========================================================= */

#astralis-ui-window.is-character-v2
.astralis-window-header
.astralis-window-header__help,

#astralis-ui-window.is-character-v2
.astralis-window-header
.astralis-window-header__close {

    width: 42px;
    height: 42px;

    min-width: 42px;
    min-height: 42px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 1px solid rgba(64, 219, 255, .62);

    background: linear-gradient(
        145deg,
        rgba(11, 66, 91, .94),
        rgba(5, 31, 51, .98)
    );

    color: #7cecff;

    line-height: 1;

    box-shadow:
        inset 0 0 13px rgba(70, 224, 255, .08);
}

/* Point d'interrogation */

#astralis-ui-window.is-character-v2
.astralis-window-header
.astralis-window-header__help {

    font-size: 24px;
    font-weight: 700;
}

/* Croix de fermeture */

#astralis-ui-window.is-character-v2
.astralis-window-header
.astralis-window-header__close {

    font-size: 31px;
    font-weight: 300;
}

/* Survol identique à Inventaire */

#astralis-ui-window.is-character-v2
.astralis-window-header__help:hover,

#astralis-ui-window.is-character-v2
.astralis-window-header__close:hover {

    border-color: rgba(91, 240, 255, .98);

    background: linear-gradient(
        145deg,
        rgba(15, 89, 116, .98),
        rgba(8, 43, 69, .99)
    );

    box-shadow:
        0 0 12px rgba(58, 220, 255, .16),
        inset 0 0 15px rgba(70, 224, 255, .12);
}

/* =========================================================
   PERSONNAGE V2 — FICHE DE CARACTÉRISTIQUES
   ========================================================= */

#astralis-ui-window.is-character-v2
#character-v2-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 6px 16px 0;
    scrollbar-width: thin;
    scrollbar-color: #329bb5 transparent;
}


/* =========================================================
   PERSONNAGE V2 — IDENTITÉ ET JAUGES
   ========================================================= */

/* Conteneur indépendant du défilement */

#astralis-ui-window.is-character-v2
#character-v2-identity-container {

    flex: 0 0 auto;
    min-width: 0;
    margin: 0 0 4px;
}

/* Fiche d'identité */

#astralis-ui-window.is-character-v2
.character-v2-identity {

    display: flex;
    align-items: center;

    gap: 20px;

    min-height: 126px;

    padding: 14px 20px;
    margin: 0;

    box-sizing: border-box;
}

/* =========================================================
   PORTRAIT
   ========================================================= */

#astralis-ui-window.is-character-v2
.character-v2-portrait {

    width: 88px;
    height: 88px;

    flex: 0 0 88px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    background: linear-gradient(
        145deg,
        rgba(24, 88, 115, .95),
        rgba(5, 31, 50, .98)
    );

    border: 1px solid rgba(102, 233, 255, .85);

    clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px),
        0 10px
    );

    box-shadow:
        inset 0 0 18px rgba(65, 211, 255, .12);
}


/* Portrait Asuna — cadrage dans le cadre existant */

#astralis-ui-window.is-character-v2
.character-v2-portrait-image {

    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    object-fit: cover;
    object-position: center center;

}

/* Portrait — quatre angles cyan luminescents */

#astralis-ui-window.is-character-v2
.character-v2-portrait {

    position: relative;
    isolation: isolate;
}

#astralis-ui-window.is-character-v2
.character-v2-portrait::after {

    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(135deg,
            transparent 6px,
            #83f4ff 6px 8px,
            transparent 8px
        ) top left / 14px 14px no-repeat,

        linear-gradient(225deg,
            transparent 6px,
            #83f4ff 6px 8px,
            transparent 8px
        ) top right / 14px 14px no-repeat,

        linear-gradient(45deg,
            transparent 6px,
            #83f4ff 6px 8px,
            transparent 8px
        ) bottom left / 14px 14px no-repeat,

        linear-gradient(315deg,
            transparent 6px,
            #83f4ff 6px 8px,
            transparent 8px
        ) bottom right / 14px 14px no-repeat;

    filter: drop-shadow(
        0 0 4px rgba(96,235,255,.9)
    );
}


/* Lettre provisoire, remplacée ensuite par le portrait */

#astralis-ui-window.is-character-v2
.character-v2-portrait-placeholder {

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    font-size: 38px;
    font-weight: 800;

    color: #a2f3ff;

    text-shadow:
        0 0 12px rgba(74, 225, 255, .35);
}

/* =========================================================
   INFORMATIONS DU PERSONNAGE
   ========================================================= */

#astralis-ui-window.is-character-v2
.character-v2-identity-info {

    display: flex;
    flex-direction: column;

    flex: 1;
    min-width: 0;

    gap: 10px;
}

#astralis-ui-window.is-character-v2
.character-v2-identity-heading {

    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 12px;
}

#astralis-ui-window.is-character-v2
.character-v2-identity-heading strong {

    font-size: 21px;
    font-weight: 800;

    color: #effcff;

    letter-spacing: .6px;
}

#astralis-ui-window.is-character-v2
.character-v2-identity-heading span {

    font-size: 12px;

    color: #8beaff;

    letter-spacing: 1.5px;
}

/* =========================================================
   JAUGES ÉNERGIE / EXPÉRIENCE
   ========================================================= */

#astralis-ui-window.is-character-v2
.character-v2-gauges {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    width: 100%;
}

#astralis-ui-window.is-character-v2
.character-v2-gauge {

    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 6px;
}

/* Libellés et valeurs */

#astralis-ui-window.is-character-v2
.character-v2-gauge-heading {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .7px;

    color: #c7edf6;
}

#astralis-ui-window.is-character-v2
.character-v2-gauge-value {

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 0;

    color: #83b9c9;

    text-align: right;
}

/* Fond des jauges */

#astralis-ui-window.is-character-v2
.character-v2-gauge-track {

    position: relative;

    width: 100%;
    height: 12px;

    overflow: hidden;

    box-sizing: border-box;

    border: 1px solid rgba(82, 192, 220, .48);

    background: rgba(1, 13, 24, .95);

    box-shadow:
        inset 0 0 7px rgba(0, 0, 0, .65);
}

/* Remplissage : aucune valeur simulée */

#astralis-ui-window.is-character-v2
.character-v2-gauge-fill {

    width: 0%;
    height: 100%;

    transition: width .35s ease;
}

/* Couleur énergie */

#astralis-ui-window.is-character-v2
.character-v2-gauge.is-energy
.character-v2-gauge-fill {

    background: linear-gradient(
        90deg,
        #147fba,
        #52eaff
    );

    box-shadow:
        0 0 9px rgba(64, 221, 255, .65);
}

/* Couleur expérience */

#astralis-ui-window.is-character-v2
.character-v2-gauge.is-xp
.character-v2-gauge-fill {

    background: linear-gradient(
        90deg,
        #987022,
        #ffd26b
    );

    box-shadow:
        0 0 9px rgba(255, 193, 74, .55);
}

/* =========================================================
   ADAPTATION AUX ÉCRANS ÉTROITS
   ========================================================= */

@media (max-width: 760px) {

    #astralis-ui-window.is-character-v2
    .character-v2-identity {

        gap: 12px;
        padding: 12px;
    }

    #astralis-ui-window.is-character-v2
    .character-v2-portrait {

        width: 64px;
        height: 64px;

        flex-basis: 64px;
    }

    #astralis-ui-window.is-character-v2
    .character-v2-gauges {

        grid-template-columns: 1fr;

        gap: 8px;
    }

    #astralis-ui-window.is-character-v2
    .character-v2-gauge-value {

        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {

    #astralis-ui-window.is-character-v2
    .character-v2-gauge-fill {

        transition: none;
    }
}


/* DISPOSITION */

#astralis-ui-window.is-character-v2
.character-v2-stat-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

#astralis-ui-window.is-character-v2
.character-v2-stat-layout.is-details {
    grid-template-columns: 1fr;
}

/* PANNEAUX */

#astralis-ui-window.is-character-v2
.character-v2-panel {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(72,224,255,.36);
    background: linear-gradient(
        160deg,
        rgba(12,42,59,.92),
        rgba(5,23,39,.96)
    );
}

#astralis-ui-window.is-character-v2
.character-v2-panel h3 {
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(72,224,255,.35);
    font-size: 12px;
    letter-spacing: 1.4px;
    color: #7cecff;
    text-align: center;
}

/* LIGNES */

#astralis-ui-window.is-character-v2
.character-v2-stat-row {
    display: grid;
    align-items: center;
    min-height: 34px;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 13px;
}

#astralis-ui-window.is-character-v2
.character-v2-stat-row:nth-of-type(even) {
    background: rgba(89,164,188,.09);
}

#astralis-ui-window.is-character-v2
.character-v2-stat-row.is-summary {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
}

#astralis-ui-window.is-character-v2
.character-v2-stat-row.is-detailed,
#astralis-ui-window.is-character-v2
.character-v2-stat-head {
    display: grid;
    grid-template-columns: minmax(0,1fr) 90px 90px 90px;
    gap: 8px;
    align-items: center;
}

#astralis-ui-window.is-character-v2
.character-v2-stat-head {
    padding: 8px 10px;
    color: #85cbdc;
    font-size: 11px;
    border-bottom: 1px solid rgba(72,224,255,.4);
}

#astralis-ui-window.is-character-v2
.character-v2-stat-head span:not(:first-child),
#astralis-ui-window.is-character-v2
.character-v2-stat-row.is-detailed > span:not(:first-child) {
    text-align: right;
}

/* NOM ET INDICATEUR */

#astralis-ui-window.is-character-v2
.character-v2-stat-name {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: #d9eef4;
}


/* =========================================================
   PERSONNAGE V2 — ICÔNES DES CARACTÉRISTIQUES
   ========================================================= */

#astralis-ui-window.is-character-v2
.character-v2-stat-icon {

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
    line-height: 1;

    background: linear-gradient(
        145deg,
        rgba(25, 79, 103, .90),
        rgba(5, 29, 46, .98)
    );

    border: 1px solid rgba(86, 219, 248, .45);

    clip-path: polygon(
        6px 0,
        calc(100% - 6px) 0,
        100% 6px,
        100% calc(100% - 6px),
        calc(100% - 6px) 100%,
        6px 100%,
        0 calc(100% - 6px),
        0 6px
    );

    transition:
        transform .18s ease,
        filter .18s ease;
}

#astralis-ui-window.is-character-v2
.character-v2-stat-label {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* VALEURS */

#astralis-ui-window.is-character-v2
.character-v2-stat-total {
    color: #f1fcff;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

#astralis-ui-window.is-character-v2
.character-v2-stat-bonus.is-positive {
    color: #5be5e0;
}

#astralis-ui-window.is-character-v2
.character-v2-stat-bonus.is-negative {
    color: #ff8585;
}

#astralis-ui-window.is-character-v2
.character-v2-stat-total small {
    font-size: 10px;
    color: #83c9d8;
}

/* ERREUR */

#astralis-ui-window.is-character-v2
.character-v2-error {
    padding: 18px;
    color: #ff9292;
    border: 1px solid rgba(255,110,110,.35);
    background: rgba(80,18,25,.3);
}

/* ÉCRANS ÉTROITS */

@media (max-width: 760px) {
    #astralis-ui-window.is-character-v2
    .character-v2-stat-layout {
        grid-template-columns: 1fr;
    }

    #astralis-ui-window.is-character-v2
    .character-v2-stat-row.is-detailed,
    #astralis-ui-window.is-character-v2
    .character-v2-stat-head {
        grid-template-columns: minmax(0,1fr) 55px 65px 65px;
        gap: 5px;
        font-size: 11px;
    }
}

/* =========================================================
   PERSONNAGE V2 — PANNEAUX BISEAUTÉS LUMINEUX
   ========================================================= */

#astralis-ui-window.is-character-v2
.character-v2-identity,

#astralis-ui-window.is-character-v2
.character-v2-panel {

    position: relative;

    isolation: isolate;

    border: 0;

    clip-path: polygon(
        12px 0,
        calc(100% - 12px) 0,
        100% 12px,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        12px 100%,
        0 calc(100% - 12px),
        0 12px
    );

    background: linear-gradient(
        135deg,
        #79f1ff,
        #226b87 25%,
        #16465e 50%,
        #226b87 75%,
        #79f1ff
    );

}

/* Fond intérieur laissant apparaître le contour cyan */

#astralis-ui-window.is-character-v2
.character-v2-identity::before,

#astralis-ui-window.is-character-v2
.character-v2-panel::before {

    content: "";

    position: absolute;

    inset: 1px;

    z-index: -1;

    pointer-events: none;

    clip-path: polygon(
        12px 0,
        calc(100% - 12px) 0,
        100% 12px,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        12px 100%,
        0 calc(100% - 12px),
        0 12px
    );

    background: linear-gradient(
        155deg,
        #102f42,
        #071c2d
    );

}

/* Accents lumineux sur les quatre angles */

#astralis-ui-window.is-character-v2
.character-v2-identity::after,

#astralis-ui-window.is-character-v2
.character-v2-panel::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            135deg,
            transparent 8px,
            #83f4ff 8px 10px,
            transparent 10px
        ) top left / 16px 16px no-repeat,

        linear-gradient(
            225deg,
            transparent 8px,
            #83f4ff 8px 10px,
            transparent 10px
        ) top right / 16px 16px no-repeat,

        linear-gradient(
            45deg,
            transparent 8px,
            #83f4ff 8px 10px,
            transparent 10px
        ) bottom left / 16px 16px no-repeat,

        linear-gradient(
            315deg,
            transparent 8px,
            #83f4ff 8px 10px,
            transparent 10px
        ) bottom right / 16px 16px no-repeat;

    filter: drop-shadow(
        0 0 4px rgba(96, 235, 255, .8)
    );

}

/* =========================================================
   PERSONNAGE V2 — INTERACTIONS
   ========================================================= */

#astralis-ui-window.is-character-v2
.character-v2-stat-row {

    position: relative;

    cursor: help;

    transition:
        background .18s ease,
        box-shadow .18s ease;

}

#astralis-ui-window.is-character-v2
.character-v2-stat-row:hover {

    background: rgba(40, 115, 145, .32);

    box-shadow:
        inset 3px 0 0 #70edff,
        inset 0 0 15px rgba(60, 215, 255, .08);

}

#astralis-ui-window.is-character-v2
.character-v2-stat-row:hover
.character-v2-stat-icon {

    transform: scale(1.10);

    filter: brightness(1.25);

}

#astralis-ui-window.is-character-v2
.character-v2-stat-row:hover
.character-v2-stat-total {

    color: #82f3ff;

    text-shadow:
        0 0 8px rgba(80, 230, 255, .4);

}

/* Animation d'apparition des panneaux */

@keyframes astralis-character-appear {

    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

#astralis-ui-window.is-character-v2
.character-v2-stat-layout {

    animation:
        astralis-character-appear .22s ease-out both;

}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {

    #astralis-ui-window.is-character-v2
    .character-v2-stat-layout {
        animation: none;
    }

    #astralis-ui-window.is-character-v2
    .character-v2-stat-row,

    #astralis-ui-window.is-character-v2
    .character-v2-stat-icon {
        transition: none;
    }

}