/* STAGES */

.gmApp-character:not(.appState-skills)  .gmCharacterWrapSkills,
.gmApp-character:not(.appState-perks)   .gmCharacterWrapPerks,
.gmApp-character:not(.appState-effects) .gmCharacterWrapEffects,
.gmApp-character:not(.appState-settings) .gmCharacterWrapSettings { display: none; }

@media (max-width: 760px) {
    @media (min-width: 641px) {
        /* Features and attributes */
        .gmCharacterAttrList { grid-template-columns: repeat(var(--elzGridFillH), minmax(min(100%, 136px), 1fr)); }
    }
}

@media (min-width: 641px) {
    .gmApp-character { --gmWrapCol1: 320px; }
    .gmApp-character .gmContent.left {
        grid-row-end: 6;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
        z-index: 11;
    }

    .elzTheme-dark .gmApp-character .gmContent.left { box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); }

    .gmApp-character .gmPanel.bottom { grid-column-start: 2; }

    .gmApp-character:not(.appState-character, .appState-inventory) :is(.gmCharacterWrapFeatures, .gmCharacterWrapInventory),
    .gmApp-character .gmCharacterWrapInventory .gmCharacterInsideHead { display: none; }

    .gmCharacterInventoryPanel { border: none; }
}

@media (max-width: 640px) {
    .gmApp-character .gmOverPanel,
    .gmApp-character .gmOverMenu { position: fixed; }

    .gmApp-character .gmContent {
        grid-column-start: 1;
        grid-column-end:   3;
        background: transparent;
    }

    .gmCharacterNameHead { padding-right: var(--elzEPSize); }

    .gmCharacterPutOn {
        position: fixed;
        top:    calc(var(--elzEPSize) + var(--tg-safe-area-inset-top, 0px)    + var(--tg-content-safe-area-inset-top, 0px)    + 8px);
        bottom: calc(var(--elzEPSize) + var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px) + 8px);
        z-index: 15;
    }

    .gmCharacterInventoryPanel {
        position: sticky;
        bottom: 0;
        order: 2;
    }

    /* STAGES */
    .gmApp-character.appState-character .gmCharacterNone,
    .gmApp-character.appState-character .gmCharacterContents > .uniScrollWrap,
    .gmApp-character:not(.appState-inventory) .gmCharacterWrapInventory,
    .gmApp-character:not(.appState-character) :is(.gmContent.left, .gmCharacterWrapFeatures),
    .gmApp-character:not(.appState-inventory, .appState-skills, .appState-perks, .appState-effects, .appState-settings) .gmContent.right { display: none; }

    .gmApp-character.appState-character .gmCharacterContents.gmCharacterContents,
    .gmApp-character.appState-character .gmCharacterContents.gmCharacterContents > .uniScrollIn { display: contents; }

    /* Features and attributes */
    @media (max-width: 623px) {
        .gmCharacterAttrList { grid-template-columns: repeat(var(--elzGridFillH), minmax(min(100%, 160px), 1fr)); }
    }

    @media (max-width: 359px) {
        .gmCharacterAttrList { grid-template-columns: repeat(var(--elzGridFillH), minmax(min(100%, 120px), 1fr)); }
    }

    /* Character stage */

    .gmApp-character.appState-character .gmWrapIn { display: block; }

    .gmApp-character.appState-character .gmPanel.bottom {
        position: sticky;
        bottom: 0;
        flex-shrink: 0;
    }

    .gmApp-character.appState-character .gmCharacterWrapFeatures .gmCharacterInsideHead {
        min-height:    0;
        height:        0;
        margin-top: -8px;
        border: none;
        overflow: hidden;
    }
}







/* Fitting */

.gmFitWrap {
    position: absolute;
    display: grid;
    pointer-events: none;
}

.gmFitWrap .gmFitItem { pointer-events: auto; }

.gmFitWrap .gmFitEnd,
.gmFitWrap .gmFitItem {
    justify-self: center;
    align-self:   center;
}
/*
.gmFitWrap .gmRouteLine,
.gmFitWrap .gmFitEnd {
    opacity: 0;
    transition: 0.2s opacity;
}

.gmFitWrap:hover .gmRouteLine, .gmFitWrap:active .gmRouteLine,
.gmFitWrap:hover .gmFitEnd,    .gmFitWrap:active .gmFitEnd { opacity: 1; }
*/
/* Horizontal */
.gmFitWrap.horizontal { grid-template: auto auto / auto 1fr auto; }

.gmFitWrap.horizontal.route-t,
.gmFitWrap.horizontal.route-b { grid-template-rows: auto auto 1fr auto auto; }

.gmFitWrap.horizontal.left  { left:  0; }
.gmFitWrap.horizontal.right { right: 0; }

/* Vertical */
.gmFitWrap.vertical { grid-template: auto 1fr auto / auto auto }

.gmFitWrap.vertical.route-l,
.gmFitWrap.vertical.route-r { grid-template-columns: auto auto 1fr auto auto; }

.gmFitWrap.vertical.top    { top:    0; }
.gmFitWrap.vertical.bottom { bottom: 0; }

/*** Item ***/

/* Horizontal */
.gmFitWrap.horizontal.left  .gmFitItem { grid-column-start: 1; grid-column-end: 2; }
.gmFitWrap.horizontal.right .gmFitItem { grid-column-start: 3; grid-column-end: 4; }

.gmFitWrap.horizontal         .gmFitItem,
.gmFitWrap.horizontal.route-b .gmFitItem { grid-row-start: 1; grid-row-end: 3; }
.gmFitWrap.horizontal.route-t .gmFitItem { grid-row-start: 4; grid-row-end: 6; }

/* Vertical */
.gmFitWrap.vertical.top    .gmFitItem { grid-row-start: 1; grid-row-end: 2; }
.gmFitWrap.vertical.bottom .gmFitItem { grid-row-start: 3; grid-row-end: 4; }

.gmFitWrap.vertical         .gmFitItem,
.gmFitWrap.vertical.route-r .gmFitItem { grid-column-start: 1; grid-column-end: 3; }
.gmFitWrap.vertical.route-l .gmFitItem { grid-column-start: 4; grid-column-end: 6; }

/*** Route ***/

/* Horizontal */
.gmFitWrap.horizontal .gmFitRoute { grid-column-start: 2; grid-column-end: 3; }

.gmFitWrap.horizontal         .gmFitRoute { grid-row-start: 1; grid-row-end: 3; }
.gmFitWrap.horizontal.route-t .gmFitRoute,
.gmFitWrap.horizontal.route-b .gmFitRoute { grid-row-start: 2; grid-row-end: 5; }

/* Vertical */
.gmFitWrap.vertical .gmFitRoute { grid-row-start: 2; grid-row-end: 3; }

.gmFitWrap.vertical         .gmFitRoute { grid-column-start: 1; grid-column-end: 3; }
.gmFitWrap.vertical.route-r .gmFitRoute,
.gmFitWrap.vertical.route-l .gmFitRoute { grid-column-start: 2; grid-column-end: 5; }

/**** Line ****/

.gmFitWrap .gmRouteLine {  }

.gmFitWrap .gmRouteLine .path {
    stroke-width: 1px;
    stroke: currentColor;
    stroke-linejoin: round;
    stroke-linecap:  round;
    vector-effect: non-scaling-stroke;
}

.gmFitWrap.equipped .gmRouteLine .path { stroke-width: 2px; }

.gmFitWrap:not(.equipped).horizontal .gmRouteLine .path { transform: translateY(0.5px); }
.gmFitWrap:not(.equipped).vertical   .gmRouteLine .path { transform: translateX(0.5px); }

/**** Ending ****/

/* Horizontal */
.gmFitWrap.horizontal.left  .gmFitEnd { grid-column-start: 3; grid-column-end: 4; }
.gmFitWrap.horizontal.right .gmFitEnd { grid-column-start: 1; grid-column-end: 2; }

.gmFitWrap.horizontal         .gmFitEnd,
.gmFitWrap.horizontal.route-t .gmFitEnd { grid-row-start: 1; grid-row-end: 3; }
.gmFitWrap.horizontal.route-b .gmFitEnd { grid-row-start: 4; grid-row-end: 6; }

/* Vertical */
.gmFitWrap.vertical.top    .gmFitEnd { grid-row-start: 3; grid-row-end: 4; }
.gmFitWrap.vertical.bottom .gmFitEnd { grid-row-start: 1; grid-row-end: 2; }

.gmFitWrap.vertical         .gmFitEnd,
.gmFitWrap.vertical.route-l .gmFitEnd { grid-column-start: 1; grid-column-end: 3; }
.gmFitWrap.vertical.route-r .gmFitEnd { grid-column-start: 4; grid-column-end: 6; }