@layer heroicc.core {
    heroicc-card-details {
        display: grid;
        gap: 2em;
        container-type: inline-size;

        .card-details {
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
            gap: 2em;

            > :has(> heroicc-card) {
                display: grid;
                width: 100%;
                max-width: 250px;
            }

            @container (min-width: 860px) {
                display: grid;
                grid-template-columns: 300px 1fr;
                grid-template-areas: "image details";
                align-items: start;

                > :has(> heroicc-card) {
                    height: fit-content;
                    grid-area: image;
                    position: sticky;
                    top: 1.85em;
                    margin-top: 1.85em;
                    max-width: revert;
                }
            }

            > section {
                display: grid;
                grid-area: details;
                gap: 1em;

                .card-details_fields,
                .card-details_fields ~ dl > dd {
                    display: grid;
                    gap: 1em;
                    background: oklch(
                        from var(--theme-color) calc(l * 1.1) c h
                    );
                    padding: 1em;
                    border-radius: 1em;
                    box-shadow:
                        inset 0px 1px 1px 0px oklch(1 0 0 / 0.125),
                        oklch(from var(--theme-color) calc(l * 0.9) c h) 0px 0px
                            24px;
                }

                dt,
                dd {
                    font-weight: 600;
                }

                dt {
                    color: oklch(from var(--theme-color) calc(1.5 - l) c h);
                }

                dd {
                    font-weight: 400;
                    color: oklch(from var(--theme-color) calc(1.15 - l) c h);
                }

                .card-details_fields ~ dl > dt {
                    font-weight: 900;
                    font-style: italic;
                    margin-block-end: 0.5em;
                    text-align: center;
                }
            }

            dl.card-details_fields_table,
            dl > dd dl:not(.list) {
                display: grid;
                gap: 0.5em;
                grid-template-columns: 1fr 2fr;

                dd {
                    text-align: right;
                }
            }

            dl.card-details_fields_table ~ dl > dt {
                margin-block-end: 0.5em;
                padding-block-start: 0.5em;
                border-top: 1px solid var(--theme-color);
            }

            dl.card-details_digivolution-requirements dl {
                margin-inline: 1em;
            }

            section > dl {
                container-type: inline-size;
            }

            dd:not(:has(img)) {
                dd:has(time) {
                    position: absolute;
                    top: 0;
                    right: 0;
                    color: var(--text-color-soften);
                }
            }

            dl.list:has(dd > heroicc-card) {
                display: grid;
                gap: 1em;
                grid-template-columns: repeat(4, minmax(0, 250px));
                z-index: 1;
                font-size: var(--font-step--1);

                dd {
                    display: grid;
                    align-items: start;
                    grid-template-rows: auto 1fr;
                    gap: 0.75em;
                }

                .pill {
                    vertical-align: bottom;
                    padding-block: 0.25em;
                    line-height: 1;
                }

                small em {
                    display: block;
                }

                @container (width < 450px) {
                    & {
                        grid-template-columns: repeat(2, minmax(0, 250px));
                    }
                }
            }

            dd:has(> img) {
                position: relative;
                display: grid;
                grid-template-columns: min(35cqi, 200px) 1fr;
                box-shadow: none;

                @container (width < 450px) {
                    & {
                        grid-template-columns: initial;
                        justify-items: center;

                        dl.list {
                            width: 100%;
                        }
                    }
                }

                @container (width >= 450px) {
                    & {
                        dd:has(time) {
                            position: absolute;
                            top: 0;
                            right: 0;
                            color: var(--text-color-soften);
                        }
                    }
                }

                &:has(+ dd) {
                    &::before {
                        content: "";
                        display: block;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: calc(100% - 2em);
                        height: 100%;
                        pointer-events: none;
                        z-index: 1;
                        border-bottom: 1px solid var(--theme-color);
                        margin-inline: 1em;
                    }
                }

                &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: block;
                    width: 100%;
                    height: 100%;
                    box-shadow: oklch(from var(--theme-color) calc(l * 0.9) c h)
                        0px 0px 24px;
                    z-index: -1;
                }

                img {
                    border-radius: 5px;
                    object-fit: contain;
                    width: auto;
                    max-width: 100%;
                    height: auto;
                    max-height: 133px;
                    justify-self: center;
                }

                dl.list dd:first-of-type {
                    color: oklch(from var(--theme-color) calc(1 - l) c h);
                    font-weight: 600;
                }

                a {
                    display: inline-block;
                    word-break: break-word;
                    font-weight: 900;
                }
            }

            dl.list {
                display: grid;
                align-content: center;
                gap: 0.5em;
                position: relative;

                ~ dl dd:has(time) {
                    top: 1em;
                }
            }

            dl dd:has(dl) {
                display: grid;
                gap: 1em;

                dl + dl {
                    padding-block-start: 1em;
                    border-top: 1px solid var(--theme-color);
                }
            }

            header {
                display: grid;
            }

            dl.card-details_header {
                order: 0;
                align-items: center;

                dd {
                    color: var(--text-color-soften);
                }
            }

            dl.card-details_subheader {
                order: 2;
                align-items: start;
                padding-block-start: 0.25em;
                min-height: 1lh;
            }

            dl.card-details_header,
            dl.card-details_subheader {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                font-weight: 500;
                gap: 0.5em;

                dd[aria-label*="star"] {
                    font-size: var(--font-step--2);
                    color: oklch(from var(--theme-color) calc((1 - l) * 2) c h);
                }
            }

            h1 {
                order: 1;
                line-height: 1;

                &.ace {
                    &::after {
                        content: "ACE";
                        color: transparent;
                        text-shadow: none;
                        display: inline-block;
                        max-height: 0.75em;
                        width: calc(0.75em * 379 / 159);
                        background: url("https://images.heroi.cc/ACE.webp")
                            no-repeat;
                        background-size: contain;
                        background-position: 0% 100%;
                        vertical-align: text-bottom;
                        margin-block-end: 0.2em;

                        @media (prefers-color-scheme: light) {
                            filter: invert();
                        }
                    }
                }
            }

            dd:has(data[itemprop="rarity"]),
            dd:has(data[itemprop="level"]),
            dd[aria-label="SP stamp"] {
                display: inline-flex;
                font-weight: 800;
                padding: 0.0625em 0.5em;
                border: 2px solid currentColor;
                border-radius: 2em;
                line-height: 1;
                color: oklch(from var(--theme-color) calc((1 - l) * 2) c h);

                abbr {
                    text-decoration: none;
                }
            }

            dd:has(data[itemprop="level"]),
            dd[aria-label="SP stamp"] {
                color: var(--theme-color);
                background: oklch(
                    from var(--theme-color) calc((1 - l) * 2) c h
                );
                border-color: oklch(
                    from var(--theme-color) calc((1 - l) * 2) c h
                );
            }

            dd[aria-label="SP stamp"] {
                border-radius: 0.125em;
                padding: 0.0625em 0.25em;
                font-size: var(--font-step--2);
            }

            dd[data-allowance]:not([data-allowance="0"])::after {
                content: " (" attr(data-allowance) ")";
            }

            data[itemprop="level"] {
                &::before {
                    content: "Lv." / "Level";
                    color: inherit;
                }
            }

            dd:has(data[itemprop="block-icon"]) {
                position: relative;
                width: 40px;
                min-height: 1em;
                background: oklch(0 0 0);
                clip-path: var(--card-keyword-path);

                data {
                    display: block;
                    position: absolute;
                    top: 1px;
                    left: 1px;
                    font-weight: 600;
                    width: calc(40px - 2px);
                    height: calc(1em - 2px);
                    line-height: calc(1em - 2px);
                    text-align: center;
                    color: oklch(0 0 0);
                    background: oklch(1 0 0);
                    clip-path: var(--card-keyword-path);
                }
            }

            dd:has(data[itemprop="parallel-id"]) {
                position: relative;
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
                flex-grow: 1;

                data {
                    position: absolute;
                    display: inline-flex;
                    padding: 0 0.5em;
                    border: 1px solid currentColor;
                    border-radius: 0.5em;
                    height: auto;
                    top: -0.25em;
                    color: var(--text-color-soften);
                    font-size: var(--font-step--1);
                }
            }

            .color {
                text-wrap: nowrap;

                & + & {
                    margin-inline-start: 1ch;
                }

                &.red::before {
                    background: var(--card-color-red);
                }
                &.blue::before {
                    background: var(--card-color-blue);
                }
                &.yellow::before {
                    background: var(--card-color-yellow);
                }
                &.green::before {
                    background: var(--card-color-green);
                }
                &.black::before {
                    background: var(--card-color-black);
                }
                &.purple::before {
                    background: var(--card-color-purple);
                }
                &.white::before {
                    background: var(--card-color-white);
                }
                &::before {
                    content: "";
                    display: inline-block;
                    width: 0.75em;
                    height: 0.75em;
                    box-shadow:
                        0 0 0 2px oklch(1 0 0),
                        var(--card-shadow);
                    border-radius: 50%;
                    vertical-align: middle;
                    margin-inline-end: 0.5ch;
                    margin-block-end: 0.125em;
                }
            }
        }

        p:has(> span.overflow) {
            &::before {
                content: "ACE";
                color: transparent;
                text-shadow: none;
                display: inline-block;
                max-height: 1em;
                width: calc(1em * 379 / 159);
                background: url("https://images.heroi.cc/ACE.webp") no-repeat;
                background-size: contain;
                background-position: 0% 100%;
                vertical-align: text-bottom;
                margin-block-end: 0.1em;
                margin-inline-end: 1ch;

                @media (prefers-color-scheme: light) {
                    filter: invert();
                }
            }
        }

        .dna {
            position: relative;
            display: inline-block;
            padding-inline: 0.5ch;
            border-image: linear-gradient(
                    to right,
                    var(--card-color-red),
                    var(--card-color-yellow),
                    var(--card-color-green),
                    var(--card-color-blue),
                    var(--card-color-purple),
                    var(--card-color-black)
                )
                1;

            &:has(.mention) {
                border-image: linear-gradient(to right, #fff, #aaa) 1;
            }

            &:has(.icon) {
                white-space: break-spaces;
            }

            .timing + .color {
                margin-inline-start: 0.75ch;
            }

            .color {
                + & {
                    margin-inline-start: 0.5ch;
                }
            }

            &::after {
                content: "";
                position: absolute;
                display: block;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                border: 0.125em solid;
                border-color: inherit;
                border-image: inherit;
                background: none;
                box-sizing: border-box;
                transform: skew(-10deg, 0deg);
            }
        }

        span.icon {
            position: relative;
            top: -0.125em;
            display: inline-block;
            background: oklch(0 0 0);
            color: oklch(1 0 0);
            font-weight: 500;
            font-size: var(--font-step--2);
            padding: 0.125em 0.5em;
            border-radius: 0.25em;
            word-break: keep-all;
            z-index: 1;

            .color {
                & + & {
                    margin-inline-start: 0.5ch;
                }

                &::before {
                    margin-inline-end: revert;
                    box-shadow: 0 0 0 1px oklch(1 0 0);
                }

                margin-inline: 0.5ch;
            }

            &:not(.mention) {
                &::before,
                &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: block;
                    width: 100%;
                    height: 100%;
                }

                &::before {
                    box-shadow: 0 0 0 1px
                        oklch(calc(1 - var(--theme-lightness)) 0 0);
                    border-radius: 0.25em;
                }
            }

            &.timing {
                background: linear-gradient(
                    oklch(0.15 0.124 264.45),
                    oklch(0.4 0.124 264.45)
                );
            }

            &.precondition {
                background: linear-gradient(
                    oklch(0.15 0.1674 357.09),
                    oklch(0.55 0.1674 357.09)
                );
            }

            &.overflow {
                color: oklch(0 0 0);
                background: linear-gradient(
                    90deg,
                    oklch(1 0 0),
                    oklch(0.85 0 0)
                );
            }

            &.keyword-effect {
                padding-block: 2.5px;
                padding-inline: 1em;
                background: linear-gradient(
                    oklch(0.15 0.1501 46.34),
                    oklch(0.62 0.1501 46.34)
                );
                clip-path: var(--card-keyword-path);

                &::before,
                &::after {
                    z-index: -1;
                }

                &::before {
                    background: oklch(calc(1 - var(--theme-lightness)) 0 0);
                    clip-path: var(--card-keyword-path);
                    border-radius: none;
                    box-shadow: none;
                }

                &::after {
                    background: linear-gradient(
                        oklch(0.15 0.1501 46.34),
                        oklch(0.62 0.1501 46.34)
                    );
                    clip-path: polygon(
                        1px 1px,
                        calc(100% - 6px) 1px,
                        calc(100% - 1px) 50%,
                        calc(100% - 6px) calc(100% - 1px),
                        1px calc(100% - 1px),
                        calc(0% + 6px) calc(100% - 1px),
                        1px 50%,
                        calc(0% + 6px) 1px
                    );
                }
            }

            &.digixros,
            &.link,
            &.assembly {
                background: linear-gradient(
                    oklch(0.7 0.15 150),
                    oklch(0.35 0.05 190)
                );
            }

            &.rule {
                padding-inline-end: 1em;
                margin-inline-end: -0.125em;
                background: none;

                &::before,
                &::after {
                    z-index: -1;
                }

                &::before {
                    background: oklch(calc(1 - var(--theme-lightness)) 0 0);
                    clip-path: polygon(
                        0px 0px,
                        calc(100% - 5px) 0px,
                        calc(100% - 5px) 30%,
                        calc(100%) 50%,
                        calc(100% - 5px) 70%,
                        calc(100% - 5px) 100%,
                        0px 100%
                    );
                    box-shadow: none;
                }
                &::after {
                    background: oklch(0 0 0);
                    border-radius: 0.5em;
                    clip-path: polygon(
                        1px 1px,
                        calc(100% - 6px) 1px,
                        calc(100% - 6px) 30%,
                        calc(100% - 1px) 50%,
                        calc(100% - 6px) 70%,
                        calc(100% - 6px) calc(100% - 1px),
                        1px calc(100% - 1px)
                    );
                }
            }

            &.mention {
                display: revert;
                top: 0;
                color: oklch(1 0 0);
                background: none;
                font-weight: 600;
                font-size: revert;
                padding: 0;
                margin-inline-end: 0;
                word-break: break-word;

                @media (prefers-color-scheme: light) {
                    color: oklch(0 0 0);
                }
            }
        }

        span:has(span.icon) {
            white-space: nowrap;
        }

        h4 {
            text-align: center;
            font-style: italic;
            margin: 0;
            margin-block-end: 0.5em;
        }

        label[for="reduce-motion"] {
            display: none;
            margin-inline: auto;
            margin-block: 1em;
            cursor: pointer;
            padding: 0.5em 1em;
            align-items: center;
            order: -1;
            font-size: var(--font-step--1);
            font-variant: small-caps;

            &:hover {
                color: var(--accent-color-lighter);

                &::before {
                    background: var(--accent-color-lighter);
                }
            }

            &::before {
                content: "";
                font-weight: 600;
                text-align: center;
                line-height: 1em;
                display: inline-block;
                width: 1em;
                height: 1em;
                background: oklch(from var(--theme-color) 0.97 c h);
                box-shadow: var(--card-shadow);
                border-radius: 0.25em;
                margin-inline-end: 1ch;
            }

            &:has(input:checked)::before {
                content: "\002713";
                color: oklch(from var(--theme-color) calc(1.5 - l) c h);
                background: var(--accent-color);
            }

            &:has(input:focus-visible) {
                border-radius: 1rem;
                color: var(--accent-color);
                outline: 0.25rem solid currentColor;
                outline-offset: 0.25rem;
            }

            & ~ heroicc-card {
                order: -2;
            }

            &:has(input:checked) ~ heroicc-card {
                animation: none;

                &[data-card-id*="_P"]::after {
                    animation: var(--card-glow-duration) ease-in-out 0s infinite
                        both running cardGlow;
                }
            }

            @media (prefers-reduced-motion: no-preference) {
                display: inline-flex;
            }

            @media (prefers-color-scheme: light) {
                &:has(input:checked)::before {
                    color: oklch(1 0 0);
                }

                &:hover {
                    color: oklch(from var(--text-color) calc(l / 2) c h);
                }
            }
        }
    }

    dialog {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100dvw;
        height: 100dvh;
        overscroll-behavior: contain;

        &[open],
        &:popover-open {
            display: grid;
        }

        > .container {
            position: absolute;
            top: 0;
            left: 0;
            padding-block-end: 2em;
            display: grid;
            grid-template-columns: min(
                var(--max-content-width),
                calc(100% - 4em)
            );
            gap: 2em;
            align-content: start;
            justify-content: center;
            transform-style: preserve-3d;
            width: 100%;
            color: oklch(from var(--theme-color) calc(1.5 - l) c h);

            heroicc-card {
                height: auto;

                picture {
                    -moz-transform-style: unset; /* Firefox will clip the animation without this */
                }
            }
        }

        &::backdrop {
            --checkerboard-size: 50px;
            --checkerboard-color: var(--theme-color);
            --gradient-light-color: var(--theme-color);
            --gradient-dark-color: oklch(
                from var(--theme-color) calc(l - 0.025) c h
            );
            background:
                linear-gradient(
                    to right,
                    transparent,
                    var(--gradient-light-color) 10%,
                    var(--gradient-light-color) 90%,
                    transparent
                ),
                linear-gradient(
                        to top left,
                        var(--checkerboard-color) 25%,
                        transparent 0,
                        transparent 75%,
                        var(--checkerboard-color) 0
                    )
                    50% 50% / var(--checkerboard-size) var(--checkerboard-size),
                linear-gradient(
                        to top left,
                        var(--checkerboard-color) 25%,
                        transparent 0,
                        transparent 75%,
                        var(--checkerboard-color) 0
                    )
                    calc(var(--checkerboard-size) / 2 + 50%)
                    calc(var(--checkerboard-size) / 2 + 50%) /
                    var(--checkerboard-size) var(--checkerboard-size),
                linear-gradient(
                    to right,
                    var(--gradient-dark-color),
                    var(--gradient-light-color) 10%,
                    var(--gradient-light-color) 90%,
                    var(--gradient-dark-color)
                );
        }
    }

    [data-js] dialog {
        @media (prefers-reduced-motion: no-preference) {
            transition: translate var(--card-transition-duration)
                var(--spring-easing);
            translate: 0 100vh;

            &::backdrop {
                transition: opacity calc(var(--card-transition-duration) / 2)
                    ease-in;
                opacity: 0;
            }

            &:popover-open,
            &[open] {
                translate: 0 0;

                &::backdrop {
                    opacity: 1;
                }
            }

            @starting-style {
                &:popover-open,
                &[open] {
                    translate: 0 100vh;

                    &::backdrop {
                        opacity: 0;
                    }
                }
            }
        }
    }
}