@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Oxanium", sans-serif;
}

:root {
    --page-background: #181818;
    --surface: #222;
    --surface-raised: #292929;
    --surface-soft: #1b1e22;
    --control-background: #222;
    --control-hover: #303030;

    --surface-gradient: linear-gradient(
        to bottom,
        rgb(0 0 0 / 20%) 0%,
        rgb(0 0 0 / 35%) 50%,
        rgb(0 0 0 / 55%) 100%
    );

    --text: #fff;
    --text-muted: #aaa;
    --border: #383838;
    --border-strong: #505050;
    --scrollbar: #555;
    --clickable-character: #8ac0ff;

    --attribute-aquos: #00edff;
    --attribute-darkus: #6700ff;
    --attribute-haos: #fff100;
    --attribute-pyrus: #ff0000;
    --attribute-subterra: #fd8900;
    --attribute-ventus: #00ff05;

    --limit: #fff;
    --limit-1: #ff0000;
    --limit-2: #ffff00;
    --limit-3: #00ffff;

    --title-dextra: #34383e;
    --title-aquos: #1d7480;
    --title-darkus: #592d7a;
    --title-haos: #817d1a;
    --title-pyrus: #8a2929;
    --title-subterra: #7a4b22;
    --title-ventus: #26783c;

    --body-dextra: #26292e;
    --body-aquos: #1a444a;
    --body-darkus: #382544;
    --body-haos: #4c491b;
    --body-pyrus: #542323;
    --body-subterra: #4d351f;
    --body-ventus: #21472c;
}

html[data-theme="light"],
body.light-mode {
    --page-background: #e5e7eb;
    --surface: #fff;
    --surface-raised: #f7f8fa;
    --surface-soft: #e4e7eb;
    --control-background: #f2f4f7;
    --control-hover: #e4e7eb;

    --surface-gradient: linear-gradient(
        to bottom,
        #f3f4f5 0%,
        #e9ebee 50%,
        #d4d6da 100%
    );

    --text: #181a1e;
    --text-muted: #666d78;
    --border: #cdd2d9;
    --border-strong: #aeb5c0;
    --scrollbar: #9aa2ad;
    --clickable-character: #0668d7;

    --attribute-aquos: #00767f;
    --attribute-darkus: #4b168f;
    --attribute-haos: #746800;
    --attribute-pyrus: #c00000;
    --attribute-subterra: #a45100;
    --attribute-ventus: #008a20;

    --limit: #181a1e;
    --limit-1: #c40000;
    --limit-2: #9d9200;
    --limit-3: #008b91;

    --body-dextra: #eef0f3;
    --body-aquos: #d9eff2;
    --body-darkus: #eadff1;
    --body-haos: #f1efcf;
    --body-pyrus: #f3dcdc;
    --body-subterra: #eee1d2;
    --body-ventus: #dceddf;
}

html,
body {
    min-height: 100%;
    background: var(--page-background);
    color: var(--text);
}

body {
    min-height: 100vh;
    top: 0 !important;
}

/* Main */

main {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px;
}

.card-index {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

h1,
.card-index-header {
    text-align: center;
    text-transform: uppercase;
}

h1 { margin-bottom: 20px; }

/* Filters */

.filters,
.filters-container,
.filter-container {
    width: 100%;
    margin-bottom: 20px;
}

.filters {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.filter-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(calc(100% - 32px), 1340px);
    max-width: 1340px;
    margin-inline: auto;
    box-sizing: border-box;
}

.search,
.filter,
.sort {
    min-width: 0;
}

/* Collection Closed */

.search {
    flex: 1 1 0;
    width: 0;
}

.filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 2 1 0;
    width: 0;
}

#attribute-filter,
#type-filter {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
}

.sort {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 2 1 0;
    width: 0;
}

#sort-filter {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
}

#page-size {
    width: 84px;
    min-width: 84px;
    flex: 0 0 84px;
}

#viewOptions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

#viewOptions[hidden] {
    display: none;
}

/* Collection Open */

.filter-container:has(#viewOptions:not([hidden])) .search {
    flex: 0.8 1 0;
}

.filter-container:has(#viewOptions:not([hidden])) .filter {
    flex: 1.6 1 0;
}

.filter-container:has(#viewOptions:not([hidden])) .sort {
    flex: 2.6 1 0;
}

/* Controls */

#search-bar,
.custom-dropdown-toggle,
#sortDirectionButton,
#resetFilterButton,
#viewOptionsButton,
#viewOptions button {
    min-height: 40px;
    min-width: 0;
    border: 0;
    outline: 0;
    border-radius: 6px;
    background-color: var(--surface);
    background-image: var(--surface-gradient);
    box-shadow: none;
    color: var(--text);
    font-size: 14px;
}

#search-bar {
    width: 100%;
    padding: 9px 12px;
}

#search-bar::placeholder {
    color: var(--text-muted);
}

#sortDirectionButton,
#resetFilterButton,
#viewOptionsButton,
#viewOptions button {
    width: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
}

#search-bar:hover,
.custom-dropdown-toggle:hover,
#sortDirectionButton:hover,
#resetFilterButton:hover,
#viewOptionsButton:hover,
#viewOptions button:hover {
    background-color: var(--surface-raised);
}

#search-bar:focus,
.custom-dropdown-toggle:focus-visible,
#sortDirectionButton:focus-visible,
#resetFilterButton:focus-visible,
#viewOptionsButton:focus-visible,
#viewOptions button:focus-visible {
    outline: 0;
    box-shadow: none;
}

/* Dropdowns */

.custom-dropdown {
    position: relative;
    min-width: 0;
}

.custom-dropdown-toggle {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
}

.custom-dropdown-label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.custom-dropdown-toggle i {
    flex: 0 0 auto;
    font-size: 11px;
}

.custom-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 5px;
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    background-color: var(--surface);
    background-image: var(--surface-gradient);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.custom-dropdown-menu[hidden],
.type-group-options[hidden] {
    display: none;
}

.custom-option,
.type-group-toggle {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    outline: 0;
    border-radius: 4px;
    background-color: transparent;
    background-image: var(--surface-gradient);
    box-shadow: none;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    box-sizing: border-box;
}

.custom-option {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.type-group {
    width: 100%;
    min-width: 0;
}

.type-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
}

.type-group-toggle > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.type-group-toggle i {
    flex: 0 0 auto;
}

.type-group-options {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 3px 0 3px 8px;
    box-sizing: border-box;
}

.custom-option:hover,
.type-group-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.custom-option:focus-visible,
.type-group-toggle:focus-visible {
    outline: 0;
    box-shadow: none;
}

.custom-option.active {
    background-color: rgba(255, 255, 255, 0.12);
    font-weight: 600;
}

.custom-option:disabled {
    opacity: 0.4;
    cursor: default;
}

.custom-dropdown.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Attribute Drop Down */

#attribute-filter .custom-option[data-value="all"] {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent),
        linear-gradient(
            to bottom right,
            var(--title-pyrus),
            var(--title-subterra),
            var(--title-haos),
            var(--title-ventus),
            var(--title-aquos),
            var(--title-darkus)
        );
}

#attribute-filter .custom-option[data-value="aquos"] {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--title-aquos), white 14%),
        var(--title-aquos)
    );
}

#attribute-filter .custom-option[data-value="darkus"] {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--title-darkus), white 14%),
        var(--title-darkus)
    );
}

#attribute-filter .custom-option[data-value="haos"] {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--title-haos), white 14%),
        var(--title-haos)
    );
}

#attribute-filter .custom-option[data-value="pyrus"] {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--title-pyrus), white 14%),
        var(--title-pyrus)
    );
}

#attribute-filter .custom-option[data-value="subterra"] {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--title-subterra), white 14%),
        var(--title-subterra)
    );
}

#attribute-filter .custom-option[data-value="ventus"] {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--title-ventus), white 14%),
        var(--title-ventus)
    );
}

/* Cards Grid */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    align-items: start;
    gap: 20px;
    width: 100%;
}

/* Card */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    
    color: var(--text);
    text-align: center;
}

.card:focus-visible {
    outline: 2px solid var(--border-strong);
    outline-offset: 3px;
}

/* Card Image */

.card .mask,
.card-image-only .mask {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 7;
    overflow: hidden;
    background: #111;
}

.card .image-stack,
.card-image-only .image-stack {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.image-stack {
    cursor: default;
}

.card[data-layered-image-stack="true"][data-has-artwork="true"] .image-stack,
.card-image-only[data-layered-image-stack="true"][data-has-artwork="true"] .image-stack {
    cursor: pointer;
}

.card .image-stack img,
.card-image-only .image-stack img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 5px;
    object-fit: fill;
    pointer-events: none;
    transition: transform 0.3s ease;
}

/* Card Layer Order */

.card .image-stack img[data-layer="top"],
.card-image-only .image-stack img[data-layer="top"] {
    z-index: 1;
}

.card .image-stack img[data-layer="right"],
.card .image-stack img[data-layer="left"],
.card .image-stack img[data-layer="middle"],
.card-image-only .image-stack img[data-layer="right"],
.card-image-only .image-stack img[data-layer="left"],
.card-image-only .image-stack img[data-layer="middle"] {
    z-index: 2;
}

.card .image-stack img[data-layer="base"],
.card-image-only .image-stack img[data-layer="base"] {
    z-index: 3;
}

.mask.open .image-stack img[data-layer="right"] { transform: translateX(34.85%); }
.mask.open .image-stack img[data-layer="left"] { transform: translateX(-34.85%); }

:is(.card, .card-image-only)[data-frame-layout="newVestroia"]
.mask.open .image-stack img[data-layer="right"] {
    transform: translateX(50%);
}

:is(.card, .card-image-only)[data-frame-layout="newVestroia"]
.mask.open .image-stack img[data-layer="left"] {
    transform: translateX(-50%);
}

:is(.card, .card-image-only)[data-frame-layout="newVestroia"]
.mask.open .image-stack img[data-layer="middle"] {
    transform: translateY(-70%);
}

.mask:not(.open) .image-stack img[data-layer="right"],
.mask:not(.open) .image-stack img[data-layer="left"],
.mask:not(.open) .image-stack img[data-layer="middle"] {
    transform: translate(0);
}

.image-stack:focus-visible {
    outline: 2px solid var(--border-strong);
    outline-offset: -2px;
}

/* Card Image Only */

.card-image-only {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    
}

.card-image-name {
    --fit-max-size: 16;
    --fit-min-size: 11;
    --fit-step: 1;

    min-width: 0;
    padding: 8px 6px;
    overflow: hidden;
    color: var(--text);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
}

.card-image-name.image-name-fit-size-16 { font-size: 16px; }
.card-image-name.image-name-fit-size-15 { font-size: 15px; }
.card-image-name.image-name-fit-size-14 { font-size: 14px; }
.card-image-name.image-name-fit-size-13 { font-size: 13px; }
.card-image-name.image-name-fit-size-12 { font-size: 12px; }
.card-image-name.image-name-fit-size-11 { font-size: 11px; }

/* Card Title */

.card-title {
    display: grid;
    grid-template-columns: 30% 60% 10%;
    flex-shrink: 0;
    align-items: center;
    width: 100%;
    min-width: 0;
    aspect-ratio: 661 / 244;
    color: #fff;
    font-weight: 700;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 3px 4px -2px rgba(0, 0, 0, 0.45);
}

.card-title-icon {
    width: 36px;
    aspect-ratio: 1;
    justify-self: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}

.card-title-name {
    --fit-max-size: 20;
    --fit-min-size: 12;
    --fit-step: 1;

    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: 3px 2px;
    overflow: hidden;
    line-height: 1.2;
    white-space: normal;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.card-title-name.title-fit-size-20 { font-size: 20px; }
.card-title-name.title-fit-size-19 { font-size: 19px; }
.card-title-name.title-fit-size-18 { font-size: 18px; }
.card-title-name.title-fit-size-17 { font-size: 17px; }
.card-title-name.title-fit-size-16 { font-size: 16px; }
.card-title-name.title-fit-size-15 { font-size: 15px; }
.card-title-name.title-fit-size-14 { font-size: 14px; }
.card-title-name.title-fit-size-13 { font-size: 13px; }
.card-title-name.title-fit-size-12 { font-size: 12px; }

.card-title-name.oversized-word {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.card-title-spacer {
    align-self: stretch;
}

/* Card Title Themes */

.card-title.dextra-title {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent),
        linear-gradient(
            to bottom right,
            var(--title-pyrus),
            var(--title-subterra),
            var(--title-haos),
            var(--title-ventus),
            var(--title-aquos),
            var(--title-darkus)
        );
}
.card-title.aquos-title {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--title-aquos), white 14%),
        var(--title-aquos)
    );
}
.card-title.darkus-title {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--title-darkus), white 14%),
        var(--title-darkus)
    );
}
.card-title.haos-title {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--title-haos), white 14%),
        var(--title-haos)
    );
}
.card-title.pyrus-title {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--title-pyrus), white 14%),
        var(--title-pyrus)
    );
}
.card-title.subterra-title {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--title-subterra), white 14%),
        var(--title-subterra)
    );
}
.card-title.ventus-title {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--title-ventus), white 14%),
        var(--title-ventus)
    );
}

.card-title.dextra-title .card-title-icon { background-image: url("/images/icon/dextra-symbol.png"); }
.card-title.aquos-title .card-title-icon { background-image: url("/images/icon/aquos-symbol.png"); }
.card-title.darkus-title .card-title-icon { background-image: url("/images/icon/darkus-symbol.png"); }
.card-title.haos-title .card-title-icon { background-image: url("/images/icon/haos-symbol.png"); }
.card-title.pyrus-title .card-title-icon { background-image: url("/images/icon/pyrus-symbol.png"); }
.card-title.subterra-title .card-title-icon { background-image: url("/images/icon/subterra-symbol.png"); }
.card-title.ventus-title .card-title-icon { background-image: url("/images/icon/ventus-symbol.png"); }

/* Card Body */

.card-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.card-body[hidden] {
    display: none;
}

.card-description {
    display: grid;
    grid-template-rows: 1fr auto;
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px;
}

.card-description > p {
    align-self: center;
    width: 100%;
    max-height: calc(1.55em * 7);
    margin: 0;
    padding-right: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    line-height: 1.55;
    text-align: center;
    white-space: pre-line;
}

.description-bracket {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
}

.card-description p::-webkit-scrollbar {
    width: 4px;
}

.card-description p::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: var(--scrollbar);
}

.card-description p::-webkit-scrollbar-track {
    background: transparent;
}

/* Card Frame Controls */

.card-frame-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
}

.card-frame-button,
.card-language-button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
    font-size: 12px;
    cursor: pointer;
}

.card-frame-button:hover,
.card-language-button:hover {
    background: rgba(0, 0, 0, 0.4);
}

.card-frame-button:focus-visible,
.card-language-button:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}

/* Description Attribute Controls */

.description-attribute-controls {
    display: grid;
    grid-template-columns: 32px auto 32px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}

.description-attribute-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
    cursor: pointer;
}

.description-attribute-current {
    min-width: 90px;
    font-size: 8px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.description-attribute-button:hover { background: rgba(0, 0, 0, 0.4); }

/* Attribute Backgrounds */

.card-body.attribute-background-dextra {
    background: linear-gradient(
        to bottom right,
        var(--body-pyrus),
        var(--body-subterra),
        var(--body-haos),
        var(--body-ventus),
        var(--body-aquos),
        var(--body-darkus)
    );
}
.card-body.attribute-background-aquos { background: var(--body-aquos); }
.card-body.attribute-background-darkus { background: var(--body-darkus); }
.card-body.attribute-background-haos { background: var(--body-haos); }
.card-body.attribute-background-pyrus { background: var(--body-pyrus); }
.card-body.attribute-background-subterra { background: var(--body-subterra); }
.card-body.attribute-background-ventus { background: var(--body-ventus); }

.card-body[class*="dual-attribute-background-"] { background: var(--body-dextra); }

.card-body.triple-attribute-background-negative,
.card-body.triple-attribute-background-positive {
    background: var(--body-dextra);
}

/* Clickable Description Text */

.clickable-keyword,
.clickable-attribute,
.clickable-attribute-gate,
.clickable-character {
    cursor: pointer;
    text-decoration: none;
}

.clickable-keyword:hover,
.clickable-attribute:hover,
.clickable-attribute-gate:hover,
.clickable-character:hover {
    text-decoration: underline;
}

.clickable-keyword:focus-visible,
.clickable-attribute:focus-visible,
.clickable-attribute-gate:focus-visible,
.clickable-character:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}

.clickable-attribute-gate { color: inherit; }
.clickable-character { color: var(--clickable-character); }
.clickable-character-bold-only { color: inherit; }

.attribute-text-aquos { color: var(--attribute-aquos); }
.attribute-text-darkus { color: var(--attribute-darkus); }
.attribute-text-haos { color: var(--attribute-haos); }
.attribute-text-pyrus { color: var(--attribute-pyrus); }
.attribute-text-subterra { color: var(--attribute-subterra); }
.attribute-text-ventus { color: var(--attribute-ventus); }

/* Card Statistics */

.card-statistics {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 5px;
    background-color: var(--surface);
    background-image: var(--surface-gradient);
}

.card-stat-row {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) minmax(0, 2fr) minmax(max-content, 1fr);
    align-items: center;
    width: 100%;
    min-height: 38px;
    padding: 6px 9px;
    gap: 5px;
    font-size: 0.75rem;
}

.card-stat-left,
.card-stat-center {
    display: flex;
    align-items: center;
    min-width: 0;
}

.card-stat-left {
    justify-content: flex-start;
    text-align: left;
}

.card-stat-center {
    justify-content: center;
    text-align: center;
}

.card-hsp,
.card-catalogue,
.card-limit {
    display: block;
    width: auto;
    min-width: 0;
    overflow: visible;
    font-weight: 700;
    line-height: 1;
    text-overflow: clip;
    white-space: nowrap;
}

.card-hsp {
    justify-self: start;
    text-align: left;
}

.card-catalogue {
    justify-self: center;
    max-width: 100%;
    text-align: center;
}

.card-limit {
    justify-self: end;
    color: var(--limit);
    text-align: right;
}

.card-limit[data-number="1"] { color: var(--limit-1); }
.card-limit[data-number="2"] { color: var(--limit-2); }
.card-limit[data-number="3"] { color: var(--limit-3); }

.card-hsp[role="button"],
.card-limit[role="button"] {
    cursor: pointer;
}

.card-hsp[role="button"]:hover,
.card-limit[role="button"]:hover {
    text-decoration: underline;
}

/* Pagination */

.card-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding: 28px 0 6px;
}

.card-pagination[hidden] { display: none; }

.pagination-summary {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.pagination-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pagination-button {
    min-width: 38px;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--control-background);
    
    color: var(--text);
    cursor: pointer;
}

.pagination-button:hover:not(:disabled) {
    background: var(--control-hover);
}

.pagination-button.is-current {
    border-color: var(--border-strong);
    background: var(--surface-raised);
    font-weight: 700;
}

.pagination-button:disabled {
    opacity: 0.4;
    cursor: default;
}

.pagination-ellipsis {
    min-width: 24px;
    color: var(--text-muted);
    text-align: center;
}

/* Card Layout */

#cardViewButton.active,
#listViewButton.active {
    background: var(--surface-raised);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.cards-grid.list-view {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cards-grid.list-view .card {
    display: grid;
    grid-template-columns: 82px minmax(180px, 0.9fr) minmax(280px, 2fr) minmax(220px, 0.8fr);
    align-items: stretch;
    width: 100%;
    min-height: 116px;
    border-radius: 5px;
}

.cards-grid.list-view .card > .mask {
    grid-column: 1;
    grid-row: 1;
    width: 82px;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 5px;
}

.cards-grid.list-view .card > .card-title {
    grid-column: 2;
    grid-row: 1;
    min-height: 100%;
    aspect-ratio: auto;
    box-shadow: none;
}

.cards-grid.list-view .card > .card-body {
    grid-column: 3;
    grid-row: 1;
    min-height: 0;
}

.cards-grid.list-view .card > .card-statistics {
    grid-column: 4;
    grid-row: 1;
    display: flex;
    align-items: center;
    margin-top: 0;
    border-radius: 5px;
}

.cards-grid.list-view .card-stat-row {
    min-height: 100%;
}

.cards-grid.list-view .card-description {
    min-height: 0;
    padding: 8px;
}

.cards-grid.list-view .card-description > p {
    max-height: calc(1.2em * 5);
}

.card > .mask {
    order: 1;
    flex: 0 0 auto;
}

.card > .card-title {
    order: 2;
    flex: 0 0 auto;
}

.card > .card-body { order: 3; }
.card > .card-statistics { order: 4; }

.cards-grid {
    align-items: start;
}

.card {
    display: flex;
    flex-direction: column;
    height: auto;
    align-self: start;
}

.card-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.card-body[hidden] {
    display: none;
}

.card-description {
    flex: 1 1 auto;
}

.card-statistics {
    flex: 0 0 auto;
    margin-top: auto;
}

/* Multi-Attribute Colours */

.card.pyrus.aquos.haos > .card-title {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent),
        linear-gradient(135deg, var(--title-pyrus) 0%, var(--title-aquos) 50%, var(--title-haos) 100%);
}

.card.pyrus.aquos.haos > .card-body {
    background: linear-gradient(135deg, var(--body-pyrus) 0%, var(--body-aquos) 50%, var(--body-haos) 100%);
}

.card.darkus.ventus.subterra > .card-title {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent),
        linear-gradient(135deg, var(--title-darkus) 0%, var(--title-ventus) 50%, var(--title-subterra) 100%);
}

.card.darkus.ventus.subterra > .card-body {
    background: linear-gradient(135deg, var(--body-darkus) 0%, var(--body-ventus) 50%, var(--body-subterra) 100%);
}

.card.darkus.aquos > .card-title {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent),
        linear-gradient(to right, var(--title-aquos), var(--title-darkus));
}

.card.darkus.aquos > .card-body {
    background: linear-gradient(to right, var(--body-aquos), var(--body-darkus));
}

.card.aquos.ventus > .card-title {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent),
        linear-gradient(to bottom, var(--title-ventus), var(--title-aquos));
}

.card.aquos.ventus > .card-body {
    background: linear-gradient(to bottom, var(--body-ventus), var(--body-aquos));
}

.card.haos.darkus > .card-title {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent),
        linear-gradient(to right, var(--title-darkus), var(--title-haos));
}

.card.haos.darkus > .card-body {
    background: linear-gradient(to right, var(--body-darkus), var(--body-haos));
}

.card.pyrus.subterra > .card-title {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent),
        linear-gradient(to right, var(--title-pyrus), var(--title-subterra));
}

.card.pyrus.subterra > .card-body {
    background: linear-gradient(to right, var(--body-pyrus), var(--body-subterra));
}

.card.subterra.haos > .card-title {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent),
        linear-gradient(to bottom, var(--title-subterra), var(--title-haos));
}

.card.subterra.haos > .card-body {
    background: linear-gradient(to bottom, var(--body-subterra), var(--body-haos));
}

.card.ventus.pyrus > .card-title {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent),
        linear-gradient(to right, var(--title-ventus), var(--title-pyrus));
}

.card.ventus.pyrus > .card-body {
    background: linear-gradient(to right, var(--body-ventus), var(--body-pyrus));
}

.card.ventus.haos > .card-title {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent),
        linear-gradient(to bottom right, var(--title-ventus), var(--title-haos));
}

.card.ventus.haos > .card-body {
    background: linear-gradient(to bottom right, var(--body-ventus), var(--body-haos));
}

.card.pyrus.darkus > .card-title {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent),
        linear-gradient(to bottom, var(--title-pyrus), var(--title-darkus));
}

.card.pyrus.darkus > .card-body {
    background: linear-gradient(to bottom, var(--body-pyrus), var(--body-darkus));
}

.card.aquos.subterra > .card-title {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent),
        linear-gradient(to top right, var(--title-aquos), var(--title-subterra));
}

.card.aquos.subterra > .card-body {
    background: linear-gradient(to top right, var(--body-aquos), var(--body-subterra));
}

.card.aquos.subterra > .card-title .card-title-icon,
.card.aquos.ventus > .card-title .card-title-icon,
.card.darkus.aquos > .card-title .card-title-icon,
.card.haos.darkus > .card-title .card-title-icon,
.card.haos.ventus > .card-title .card-title-icon,
.card.pyrus.darkus > .card-title .card-title-icon,
.card.pyrus.subterra > .card-title .card-title-icon,
.card.subterra.haos > .card-title .card-title-icon,
.card.ventus.pyrus > .card-title .card-title-icon,
.card.pyrus.aquos.haos > .card-title .card-title-icon,
.card.darkus.ventus.subterra > .card-title .card-title-icon {
    background-image: url("/images/icon/dextra-symbol.png");
}

/* Page Flip */

:is(
    .card-index-header > *,
    .filter-container input,
    .custom-dropdown-label,
    .custom-dropdown-toggle > i,
    .filter-container button:not(.custom-dropdown-toggle),
    .card,
    .card-pagination > *
) {
    transform-origin: center;
    transition: transform 0.35s ease;
}

html.page-flipped :is(
    .card-index-header > *,
    .filter-container input,
    .custom-dropdown-label,
    .custom-dropdown-toggle > i,
    .filter-container button:not(.custom-dropdown-toggle),
    .card,
    .card-pagination > *
) {
    transform: rotate(180deg);
}

/* Responsive */

html,
body {
    max-width: 100%;
}

main {
    width: min(100%, 1760px);
    max-width: 100%;
    margin-inline: auto;
}

.cards-grid,
.filter-container {
    width: min(calc(100% - 32px), 1340px);
    max-width: 1340px;
    margin-inline: auto;
    box-sizing: border-box;
}

.search,
.filter,
.sort,
.custom-dropdown,
#viewOptions {
    min-width: 0;
}

.custom-dropdown {
    position: relative;
}

.custom-dropdown,
.custom-dropdown-toggle,
.custom-dropdown-menu,
.custom-option,
.type-group,
.type-group-toggle,
.type-group-options {
    box-sizing: border-box;
    min-width: 0;
}

.custom-dropdown-toggle,
.custom-dropdown-menu {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.custom-dropdown-label,
.custom-option,
.type-group-toggle,
.type-group-toggle > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-dropdown-toggle i,
.type-group-toggle i {
    flex: 0 0 auto;
}

.cards-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    justify-content: center;
    gap: 18px;
}

/* 1400px */

@media (max-width: 1400px) {
    .cards-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* 1250px */

@media (max-width: 1250px) {
    .filter-container {
        gap: 7px;
    }

    .filter {
        gap: 7px;
    }

    #page-size {
        width: 76px;
        min-width: 76px;
        flex-basis: 76px;
    }

    #sortDirectionButton,
    #resetFilterButton,
    #viewOptionsButton,
    #viewOptions button {
        width: 38px;
        min-width: 38px;
        flex-basis: 38px;
    }
}

/* 1150px */

@media (max-width: 1150px) {
    main {
        padding: 18px;
    }

    .filter-container {
        display: grid;
        grid-template-columns: minmax(200px, 0.8fr) minmax(300px, 1.2fr);
        gap: 8px;
    }

    .search,
    .filter,
    .sort {
        width: 100%;
        min-width: 0;
    }

    .search {
        display: block;
    }

    .filter {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .sort {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
    }

    #attribute-filter,
    #type-filter {
        width: 100%;
        min-width: 0;
    }

    #sort-filter {
        width: auto;
        min-width: 0;
        flex: 1 1 0;
    }

    #page-size {
        width: 84px;
        min-width: 84px;
        flex: 0 0 84px;
    }

    #sortDirectionButton,
    #resetFilterButton,
    #viewOptionsButton,
    #viewOptions button {
        width: 40px;
        min-width: 40px;
        flex: 0 0 40px;
    }

    #viewOptions {
        flex: 0 0 auto;
    }

    .cards-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }
}

/* 950px */

@media (max-width: 950px) {
    .filter-container {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .search,
    .filter,
    .sort {
        grid-column: 1;
        width: 100%;
        min-width: 0;
    }

    .search,
    #search-bar {
        width: 100%;
    }

    .filter {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    #attribute-filter,
    #type-filter {
        width: 100%;
        min-width: 0;
    }

    .sort {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 7px;
    }

    #sort-filter,
    #page-size,
    #sortDirectionButton,
    #resetFilterButton,
    #viewOptionsButton,
    #viewOptions button {
        flex: 1 1 calc((100% - 14px) / 3);
        width: auto;
        min-width: 0;
        max-width: none;
    }

    #viewOptions {
        display: contents;
    }

    #viewOptions[hidden] {
        display: none;
    }

    .cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 760px */

@media (max-width: 760px) {
    main {
        padding: 14px;
    }

    .cards-grid,
    .filter-container {
        width: min(calc(100% - 24px), 1340px);
    }

    .filter-container,
    .filter,
    .sort {
        gap: 7px;
    }

    .custom-dropdown-toggle {
        min-height: 40px;
        padding: 9px 8px;
        font-size: 0.75rem;
    }

    .custom-option,
    .type-group-toggle {
        min-height: 36px;
        padding: 8px;
        font-size: 13px;
    }

    .custom-dropdown-menu {
        top: calc(100% + 5px);
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        max-height: min(55vh, 340px);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .card-title-icon {
        width: 30px;
    }

    .card-description {
        padding: 10px 5px 10px 10px;
    }
}

/* 520px */

@media (max-width: 520px) {
    .filter-container {
        width: min(calc(100% - 20px), 1340px);
    }

    .custom-dropdown-menu {
        max-height: min(50vh, 300px);
    }

    .cards-grid {
        gap: 12px;
    }
}

/* 440px */

@media (max-width: 440px) {
    main {
        padding: 10px;
    }

    .cards-grid,
    .filter-container {
        width: 100%;
    }

    .filter,
    .sort {
        gap: 6px;
    }

    #sort-filter,
    #page-size,
    #sortDirectionButton,
    #resetFilterButton,
    #viewOptionsButton,
    #viewOptions button {
        flex-basis: calc((100% - 12px) / 3);
    }

    .custom-dropdown-toggle,
    .custom-option,
    .type-group-toggle {
        font-size: 12px;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .card {
        width: min(100%, 370px);
        margin-inline: auto;
    }
}

/* 380px */

@media (max-width: 380px) {
    .filter-container,
    .filter,
    .sort {
        gap: 5px;
    }

    #sort-filter,
    #page-size,
    #sortDirectionButton,
    #resetFilterButton,
    #viewOptionsButton,
    #viewOptions button {
        flex-basis: calc((100% - 10px) / 3);
    }

    .custom-dropdown-toggle,
    .custom-option,
    .type-group-toggle {
        font-size: 11px;
    }

    #page-size,
    #sortDirectionButton,
    #resetFilterButton,
    #viewOptionsButton,
    #viewOptions button {
        padding-inline: 4px;
    }
}

/* 340px */

@media (max-width: 340px) {
    main {
        padding: 8px;
    }

    .cards-grid,
    .filter-container {
        width: 100%;
    }

    .filter,
    .sort {
        gap: 4px;
    }

    #sort-filter,
    #page-size,
    #sortDirectionButton,
    #resetFilterButton,
    #viewOptionsButton,
    #viewOptions button {
        flex-basis: calc((100% - 8px) / 3);
    }

    .custom-dropdown-toggle,
    .custom-option,
    .type-group-toggle {
        font-size: 10px;
    }

    #page-size,
    #sortDirectionButton,
    #resetFilterButton,
    #viewOptionsButton,
    #viewOptions button {
        padding-inline: 2px;
    }

    .card {
        width: 100%;
    }
}