::view-transition-group(.part) {animation-duration: .5s;}
html.pause-page:not(.prepare-popover) ol li {
    view-transition-name: match-element; view-transition-class: part;
}
select[name=tier] option:nth-child(1) {--tier: gray;}

nav:has(input[value=acquired]:checked)+main li.unacquired,
nav:has(input[value=default]:checked)+main summary .tier,
nav:has(input[value=tier]:checked)+main summary .default,
li:has(details:not([open]))~li, li:has(figcaption:only-child) {display: none;}

nav {
    button {
        align-self: center;    
        &[popovertarget] {grid-area: 1/4;}
    }
    fieldset div {
        display: inline-grid !important;
        i {grid-area: 1/1/2/3; color: var(--on);}
    }
    div:has(button) {grid-area: 2/4;}
}
section {
    font-size: .9em;
    user-select: none; -webkit-user-select: none;

    h2 {
        display: block; text-align: left;
        margin: 3em 0 .25em .5em;

        a {
            display: inline-flex; align-items: center; gap: .2em;
        
            &[href*='#']::before {
                content: '';
                width: calc(3em/var(--f,1)); height: calc(2em/var(--f,1));
                background: var(--img-line) center / contain;
            }
            &:empty::after {width: 3em;}
            #chip &::after {--img: url(/x/img/blade/CX/chip/Dr.png);}
            #over &::after {--img: url(/x/img/blade/CX/over/O.png);}
            #main &::after {--img: url(/x/img/blade/CX/main/Bl.png);}
            #metal &::after {--img: url(/x/img/blade/CX/metal/Fr.png);}
            #assist &::after {--img: url(/x/img/blade/CX/assist/W.png);}
        }
    }
    ol {
        background: var(--overlay1);
        padding: .2rem !important;
        display: flex; flex-wrap: wrap; gap: .5em .15em; justify-content: space-between;

        &::after {content: ''; flex: auto;}
    }
    li {
        &.unacquired {
            select[name=acquired] {
                color: var(--on);
                pointer-events: none;
            }
            figure>img {opacity: .75;}
            figure>:is(img,figcaption) {filter: brightness(.5) grayscale(.5);}
        }        
        &:has(details) {align-self: center;}
        &:has(details):nth-child(1 of :not(.unacquired)) {margin-left: .3em;}
    }
    summary {
        line-height: 1.4; font-size: .9em;
        padding: 1em 0;
        
        &:not([title='0']) {color: var(--theme);}
        &::after {
            display: block; 
            content: '[ 'attr(title)' ] ▶';
        }
    }
}
main figure {
    border-top: 3px solid var(--tier,gray); border-bottom: 3px solid gray; 
    border-radius: .5em;
    padding: .25em;
    position: relative;
    
    li:not(.selected) & {margin: 0 3px;}
    li.selected & {
        border-left: 3px solid var(--theme); border-right: 3px solid var(--theme);
    }
    >img {height: 4.8em;}
    figcaption {
        position: absolute; inset: .25em .25em .1em .25em;
        display: grid; grid-template: 1em 1fr 1em / 1em 1fr 1em;
        cursor: pointer;

        img[src*=types] {height: 1.2em;}
        i {grid-area: 1/3;}
        b {
            grid-area: 3/1/4/4; justify-self: center; align-self: end;
            font-size: .65em; font-weight: bold;
            line-height: .9rem;
            color: var(--theme); text-shadow: 0 0 .5em rgba(0,0,0,.2);

            &:is([lang=hk],[lang=tw],:not([lang])) {
                font-size: .8em;
                white-space: nowrap;
            }
        }
    }
}
select,::picker(select) {
    appearance: base-select;
    border: none;
}
::picker(select) {
    border-radius: .3em;
    left: anchor(center); transform: translateX(-50%);
}
select {
    gap: .2em; align-items: center;
    padding: 0 .5em;
    font-size: .8em; color: var(--theme); 
    text-align: center;
    cursor: pointer;
    max-width: 3.2em;
    border: none;

    &[name=acquired] {
        border-radius: 0 0 .3em .3em;
        transform: translateY(-.15em);
        background: gray;

        option {background: var(--dark);}
        option:first-child {display: none;}
    }
    &[name=tier] {
        border-radius: .3em .3em 0 0;
        transform: translateY(.15em);
        background: var(--tier,gray);

        option {background: var(--tier);}
    }
    &:focus {outline: none;}
    option {
        display: block;
        color: var(--on); font-size: .9em;
        line-height: 1.8em;

        &::checkmark {display: none;}
        sub {line-height: 0;}
    }
}
dialog {
    button {color: var(--theme);}
    textarea {
        display: block;
        width: min(600px,90%); height: min(800px,80vh);
        font-size: 1em;
        margin: 1em auto;
    }
    a[target=_blank] {
        color: var(--accent);
        margin-left: 1em;
    }
}