/*
 * 2025 02 BASE
 */
:root {
    --font-1: sans-serif-regular, AvenirNext-Regular, "Roboto", sans-serif;
    --font-2: sans-serif-condensed, AvenirNextCondensed-Medium, "Condensed", sans-serif;
    --auto-zero: auto;
    --zero-auto: 0;
    --none-flex: none;
    --none-block: none;
    --block-none: block;
    --note-vide: brightness(.25) contrast(0.25);
    --c-fff: hsl(0 0% 0%);
    --c-dark: hsl(0 0% 85%);
    --c-light: hsl(0 0% 30%);
    --c-agi: #48b4f9;
    --c-pui: #fb4b5a;
    --c-end: #f6e241;
    --c-int: #f986f9;
    --c-tec: #99f53d;
    --c-orange: #fb894b;
    --glo-font-size: clamp(75%, 5vw, 100%);
    --glo-max-width: calc(33.333% - var(--glo-space-x));
    --glo-menu-height: calc(2em + (1em * 150) / 100);
    --glo-space-menu-x: 1em;
    --glo-space-x: 1em;
    --glo-space-y: 2em;
    --glo-space-200: calc((var(--glo-space-y) * 100) / 200);
    --glo-space-175: calc((var(--glo-space-y) * 100) / 175);
    --glo-space-150: calc((var(--glo-space-y) * 100) / 150);
    --glo-space-125: calc((var(--glo-space-y) * 100) / 125);
    --col-3: min(calc(33% - (var(--glo-space-x) * 2)), 100%);
    --col-4: min(calc(25% - (var(--glo-space-x) * 2)), 100%);
    --col-2: min(calc(50% - (var(--glo-space-x) * 2)), 100%);
    --col-1: min(calc(100% - (var(--glo-space-x) * 2)), 100%);
    --col: min(calc(100% - (var(--glo-space-x) * 2)), 100%);
    --c-hue: 200;
    --c-sat: 10%;
    --c-0: hsl(0 0% 0% / 0);
    --c-000: hsl(var(--c-hue) var(--c-sat) 0%);
    --c-010: hsl(var(--c-hue) var(--c-sat) 10%);
    --c-015: hsl(var(--c-hue) var(--c-sat) 15%);
    --c-020: hsl(var(--c-hue) var(--c-sat) 20%);
    --c-025: hsl(var(--c-hue) var(--c-sat) 25%);
    --c-030: hsl(var(--c-hue) var(--c-sat) 30%);
    --c-040: hsl(var(--c-hue) var(--c-sat) 40%);
    --c-050: hsl(var(--c-hue) var(--c-sat) 50%);
    --c-060: hsl(var(--c-hue) var(--c-sat) 60%);
    --c-070: hsl(var(--c-hue) var(--c-sat) 70%);
    --c-080: hsl(var(--c-hue) var(--c-sat) 80%);
    --c-090: hsl(var(--c-hue) var(--c-sat) 90%);
    --c-100: hsl(var(--c-hue) var(--c-sat) 100%);
    --c-glo-shadow: hsl(var(--c-hue) var(--c-sat) 15%);
    --link10-01: drop-shadow(0 0 0.1625em hsl(60 100% 30% / 1));
    --link10-02: 0 0 0.125em hsl(60 100% 10% / 1);
    --c-glo: var(--c-090);
    --c-glo-alt: var(--c-025);
    --c-glo-max: var(--c-100);
    --c-glo-max-alt: var(--c-010);
    --c-glo-select: var(--c-025);
    --c-glo-bg-select: var(--c-100);
    --c-glo-bg: var(--c-030);
    --c-glo-bg-alt: var(--c-090);
    --c-glo-bg-10: var(--c-025);
    --c-glo-bg-10-alt: var(--c-080);
    --c-glo-mute: var(--c-070);
    --c-glo-mute-alt: var(--c-040);
    --c-glo-bg-mute: var(--c-070);
    --c-glo-bg-mute-alt: var(--c-060);
    --c-glo-bg-08: hsl(var(--c-hue) var(--c-sat) 30% / .8);
    --c-glo-bg-08-alt: hsl(var(--c-hue) var(--c-sat) 90% / .8);

    --f-l: 1.25rem;
    --f-m: 1rem;
    --f-s: .9rem;
    --f-xs: .7rem;
}

.light {
    --link10-01: drop-shadow(0 0 0.01em orange);
    --link10-02: .025em 0.025em .05em yellow;
    --c-glo: var(--c-025);
    --c-glo-alt: var(--c-090);
    --c-glo-max: var(--c-010);
    --c-glo-max-alt: var(--c-100);
    --c-glo-select: var(--c-025);
    --c-glo-bg-select: var(--c-100);
    --c-glo-bg: var(--c-090);
    --c-glo-bg-alt: var(--c-030);
    --c-glo-bg-10: var(--c-080);
    --c-glo-bg-10-alt: var(--c-025);
    --c-glo-mute: var(--c-040);
    --c-glo-mute-alt: var(--c-070);
    --c-glo-bg-mute: var(--c-050);
    --c-glo-bg-mute-alt: var(--c-070);
    --c-glo-bg-08: hsl(var(--c-hue) var(--c-sat) 90% / .8);
    --c-glo-bg-08-alt: hsl(var(--c-hue) var(--c-sat) 25% / .8);
}

@media (prefers-color-scheme: dark) {
    .m-path {
        transition-property: transform, d;
        transition-duration: calc(500ms * .6);
        transition-timing-function: cubic-bezier(0, 0, .5, 1)
    }

    .circle,
    .path {
        transform-origin: center;
        transition: transform calc(500ms * .65) cubic-bezier(0, 0, 0, 1.25) calc(500ms * .35)
    }

    .light .circle {
        transform: scale(1.4);
        transition-delay: 50ms
    }

    .light .path {
        transform: scale(.75);
        transition-delay: 0s
    }

    .light .m-path {
        d: path("M-9 3h25a1 1 0 0017 13v30H0Z");
        transition-delay: calc(500ms * .4);
        transition-timing-function: cubic-bezier(0, 0, 0, 1.25)
    }
}

@property --plan-rotation {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

:root,
body,
footer::before,
footer::after {
    background-color: var(--c-glo-bg);
}

footer,
footer > button {
    background-color: var(--c-glo-bg-alt);
}

*,
::after,
::before {
    box-sizing: border-box;
    border: 0;
    margin: 0;
    padding: 0
}

::selection {
    background-color: var(--c-glo-max-alt);
    color: var(--c-glo-max);
    text-shadow: none
}

html {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 100%;
    line-height: normal;
    overflow-y: scroll
}

body {
    color: var(--c-glo);
    font-family: var(--font-1);
    font-size: var(--glo-font-size);
    font-weight: 400;
    padding-top: var(--glo-menu-height);
    text-align: center;
    width: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none
}

body > * {
    padding: var(--glo-space-y) var(--glo-space-x);
    width: 100%;
    z-index: 0
}

.cardSearch,
.select,
.popup,
.team,
.tooltip,
.linkCardBanner > .item,
.slider,
.slideThree,
.card,
fieldset,
body > * {
    position: relative
}

::before,
::after,
.clear,
.close-menu,
.cardSearch > svg,
.infobulle,
.line,
.menu,
.search-field,
.search-submit,
.slideThree label,
.seo,
footer > svg,
footer > button {
    position: absolute
}

::before,
::after,
img,
svg,
:disabled,
.disabled,
.default + .default + .default ~ #etcat ~ label,
.infobulle,
.popup:not(.active) ~ #inverse ~ label,
.toDisabled + .select,
.toDisabled + .select + .select,
.active > form > .search-field,
.search-field + .search-submit:not(:focus) {
    pointer-events: none
}

.sheet--page .hero > a:not(.active),
.disabled,
.toDisabled + .select,
.toDisabled + .select + .select,
.default + .default + .default ~ #etcat ~ label,
.popup:not(.active) ~ #inverse ~ label,
:disabled {
    filter: opacity(.5)
}

.seo {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    padding: 0;
    width: 1px;
    word-wrap: normal
}

.select > label,
.seo,
header a,
input[type=text],
select {
    white-space: nowrap
}

article,
aside,
div,
fieldset,
figcaption,
footer,
header,
iframe,
img,
ins,
main,
nav,
section,
svg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: 100%
}

#cards.active .labelCompare,
.cardBanner .link1,
.cardBanner.l10 .link10,
.search-field:focus + label > .close-menu,
.search-field:not(:focus) + label > svg,
a.active::after,
.defi > ol i,
button,
h1 > i,
h2 > i,
h1 > b,
input,
label,
select {
    display: block
}

.d-none,
.hero > a:only-child::after,
#cardSearch:placeholder-shown ~ span,
#cardSearch:not(:placeholder-shown) ~ svg,
.cardBanner .link10,
.cardBanner.l10 .link1,
.navSheet > button,
.search-field:focus + label > svg,
.search-field:not(:focus) + label > .close-menu,
.slideThree > [type=checkbox],
.iconCheckbox,
.eventCheckbox,
div[style=''] + #showIcon,
div[style=''] ~ #showEvent,
div[style='']:not(.active) ~ .reset,
div[style='']:not(.active) ~ .resetEvent,
div[style*="display: none"]:not(.active) ~ .liste-note,
div[style*="display: none"]:not(.active) ~ .reset,
div[style*="display: none"]:not(.active) ~ .resetEvent,
div.popup[style*="display: none"] ~ .close,
div.popup:not(.active)[style*="display: none"] ~ #inverse + .btn,
#inverse,
.cards--page .default + .default,
.team-build--page .default + .default,
.default + .default + .default ~ #etcat ~ label,
.select:not(.default) + .default + .default ~ #etcat ~ label,
.select:not(.default,
.navSheet > .select)::after,
.select.default > .clear,
.compare > input,
.compare > div:empty,
.compare > div:empty + .on,
.popup:not(.active) ~ .btn > .on,
.popup:not(.active) ~ .reset,
.popup:not(.active) ~ .resetEvent,
.popup.active ~ .btn > .off,
div[style*="display: none"].popup.active + .liste-note,
.checkboxCompare,
#cards .labelCompare,
input#compareCheck:checked ~ .btn > .off,
input#compareCheck:not(:checked) ~ .on,
input#compareCheck:not(:checked) ~ .btn > .on,
#cards:empty + #loadMore,
.load:empty + .btn.anchor,
[hidden] {
    display: none
}

body > script ~ *:not(.fc-consent-root , .sf-dump),
ins[data-ad-status="unfilled"] {
    display: none !important
}

ins.adsbygoogle {
    padding: 0
}

ins[data-ad-status=filled] {
    margin: 48px auto
}

footer ~ ins[data-ad-status=filled] {
    margin-bottom: 128px
}

a {
    color: inherit;
    display: inline-block;
    text-decoration: none
}

a > *,
.slider label {
    transition: all .5s cubic-bezier(.1, .9, .45, 1)
}

a > img {
    filter: brightness(1) drop-shadow(1px 2px 0 var(--c-glo-shadow)) saturate(1)
}

a.art-item,
a:focus > img,
a:focus > svg {
    transform: scale(1);
    transition: all .3s cubic-bezier(.1, .9, .45, 1.1);
    text-shadow: none
}

a,
button,
img,
label,
select,
svg {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

button,
input,
label,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

.defi,
.descr,
.info,
.infobulle,
.linkCardBanner,
.slider,
.team-item > p,
.tooltip,
button,
input,
label,
legend,
select,
h3,
h4,
h5,
h6 {
    font-family: var(--font-2)
}

audio,
canvas,
iframe,
img,
svg,
video {
    height: auto;
    vertical-align: middle
}

img,
svg,
video {
    color: var(--c-0);
    font-size: 0
}

header > a,
b,
h1,
h2,
h3,
h4,
h5,
h6,
strong {
    font-weight: 700
}

.seo,
iframe,
svg:not(:root) {
    color: inherit;
    font-size: 100%
}

.home,
.seo,
h1,
iframe,
svg:not(:root) {
    overflow: hidden
}

h1 {
    margin-top: var(--glo-space-200);
    padding: 0 .5em var(--glo-space-200);
    text-shadow: 0 1px 0 hsl(0deg 0% 60%), 0 2px 0 hsl(0deg 0% 30%)
}

h2 {
    margin-bottom: var(--glo-space-150)
}

h2,
h3,
h4 {
    flex-basis: 100%
}

header > a,
h1,
h2 {
    font-size: 150%
}

h3,
h4,
h5,
h6 {
    font-size: 125%;
    margin-bottom: var(--glo-space-125)
}

.article,
p {
    max-width: 50em
}

p {
    letter-spacing: .00625em;
    line-height: 1.375;
    margin: 0 auto;
    text-align: left;
    word-spacing: 0.0125em
}

iframe,
input,
label,
p,
select {
    font-size: 100%
}

.info,
.infobulle > p,
.infobulle ~ p,
.team-item > p,
.tooltip {
    font-size: 87.5%;
    line-height: normal
}

button,
h1 > i,
h2 > i,
small {
    font-size: 75%
}

/* M E N U */
header {
    background-image: linear-gradient(0deg, var(--c-glo-bg-08) 0, var(--c-glo-bg) 66.666%);
    line-height: 1;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1em var(--glo-space-menu-x);
    min-height: var(--glo-menu-height);
    width: inherit;
    align-items: center;
    backdrop-filter: blur(5px);
}

header > nav {
    align-items: start;
    display: var(--none-flex)
}

header,
.active > nav,
footer {
    display: flex
}

header,
header > nav {
    font-weight: 600;
    letter-spacing: 0.0125em;
    flex-direction: column;
    justify-content: center
}

header.active > a {
    margin: 0 0 1.5em;
    text-align: left;
}

header > a > b::after {
    font-size: 10px;
    position: relative
}

header > nav > a {
    box-shadow: 0 0 0 .2em var(--c-0);
    letter-spacing: 0;
    padding: 0.75em;
    margin: 0.25em 0 0.25em -0.5em


}

/* M E N U > M O B I L E */
.menu {
    display: var(--block-none);
    height: var(--glo-menu-height);
    width: 2em;
    top: 0;
    right: var(--glo-space-x);
    z-index: -1
}

.line {
    background-color: currentcolor;
    border-radius: .375em;
    height: .25em;
    top: calc(2em - .3125em);
    right: 0;
    left: 0;
    transition: all .25s
}

.menu > .line:nth-child(1) {
    transform: translatey(calc(-.625em))
}

.menu > .line:nth-child(3) {
    transform: translatey(calc(.625em))
}

.active > .menu > .line:nth-child(1),
.active > .menu > .line:nth-child(3),
.menu > .line:nth-child(2),
.menu > .line:nth-child(4) {
    transform: translatey(0)
}

.active > .menu > .line:nth-child(1),
.active > .menu > .line:nth-child(3),
.menu > .line:nth-child(4),
.infobulle,
.search-field {
    filter: opacity(0)
}

/* S E A R C H */
.close-menu {
    height: var(--glo-menu-height);
    width: 1em;
    top: -1em;
    left: var(--glo-space-menu-x)
}

.icon-search {
    top: .25em;
    right: 0.75em;
    fill: currentColor;
    width: 1.5em;
    height: 1.5em;
}

.search-field {
    font-size: 125%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2.5em;
    max-height: var(--glo-menu-height);
    opacity: 0;
}

.search-submit {
    top: 1em;
    right: var(--glo-space-x);
    left: 0;
    width: 3.5em;
    height: 1.5em;
}

[type=text] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
    width: 100%;
}

::placeholder {
    color: inherit;
    opacity: 1
}

[type=search],
[type=search]::-webkit-search-decoration,
[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none
}

/*
 * F O O T E R
 */
footer {
    padding: 3em .5em;
    margin: 10vh auto 0;
    align-items: center;
    justify-content: center
}

footer::before,
footer::after {
    content: '';
    width: 100%
}

footer::before {
    clip-path: ellipse(60% 100% at 50% -.1em);
    height: 1em;
    top: -.1em
}

footer::after {
    clip-path: ellipse(60% 100% at 50% calc(1.6em));
    height: 1.6em;
    bottom: -.1em
}

footer > svg {
    top: -1.8em;
    height: 5em
}

footer > a {
    margin: 2em 2vw;
    width: 5em;
    height: auto;
    border-radius: 1em
}

footer > a:hover {
    background-color: var(--c-glo-max);
}

footer > button {
    color: var(--c-glo-bg);
    border-radius: 3em;
    border: 0.2em solid var(--c-glo-bg);
    width: 3em;
    height: 3em;
    margin: 0;
    bottom: 0;
    z-index: 3;
    line-height: 2.5em;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 600
}

footer > button::after {
    content: '';
    transform: translate(1.325em, 0.75em) rotate(-135deg);
    transform-origin: 0 0;
    z-index: 1;
    left: 0;
    right: 0;
    border-style: solid;
    border-color: currentcolor;
    border-top: var(--c-0);
    border-left: var(--c-0);
    border-width: .25em;
    height: .75em;
    width: .75em
}

footer + p {
    margin: 0 auto 2em;
    text-align: center
}

footer + p > .theme {
    color: var(--c-glo-bg-alt);
    margin: 0 auto 2em;
    height: 2em;
    width: 2em
}

/* B A N N E R S + CONTAINER */
.banner,
.hero,
.navSheet,
    /* .sort, */
.articles,
.cardBanner,
.icons,
.events,
.team,
#cards,
#teams {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.navSheet[id],
.banner[id],
#filters {
    scroll-margin-block-start: var(--glo-menu-height);
}

.banner:not(:first-of-type) {
    justify-content: space-evenly
}

.banner:first-of-type {
    min-height: clamp(136px, 50vw, 300px);
    align-items: center;
    flex-direction: column;
    padding: 0
}

.banner::before,
.banner::after,
.home > div::before {
    content: '';
    inset: 0;
    z-index: -2;
}

.banner:not(.white) {
    color: var(--c-100);
}

.banner:not(.home, .white)::after {
    background-image: linear-gradient(180deg, rgb(0 0 0 / 50%) 0, var(--c-0) 100%),
    linear-gradient(110deg, rgb(255 255 255 / 20%), rgb(0 0 0 / 20%)),
    linear-gradient(110deg,
            rgb(0 0 0 / 00%) 00%, rgb(0 0 0 / 00%) 10%,
            rgb(0 0 0 / 04%) 10%, rgb(0 0 0 / 04%) 20%,
            rgb(0 0 0 / 08%) 20%, rgb(0 0 0 / 08%) 30%,
            rgb(0 0 0 / 12%) 30%, rgb(0 0 0 / 12%) 40%,
            rgb(0 0 0 / 16%) 40%, rgb(0 0 0 / 16%) 50%,
            rgb(0 0 0 / 20%) 50%, rgb(0 0 0 / 20%) 60%,
            rgb(0 0 0 / 24%) 60%, rgb(0 0 0 / 24%) 70%,
            rgb(0 0 0 / 28%) 70%, rgb(0 0 0 / 28%) 80%,
            rgb(0 0 0 / 32%) 80%, rgb(0 0 0 / 32%) 90%,
            rgb(0 0 0 / 36%) 90%, rgb(0 0 0 / 36%) 100%);
    background-size: clamp(960px, 100vw, 100%), 100%
}

.AGI.banner {
    background-color: var(--c-agi)
}

.PUI.banner {
    background-color: var(--c-pui)
}

.END.banner {
    background-color: var(--c-end)
}

.INT.banner {
    background-color: var(--c-int)
}

.TEC.banner {
    background-color: var(--c-tec)
}

.black {
    background-color: #909090
}

/* B A N N E R S > C O L O R S */
.AGI.banner > h1,
h1 > .AGI {
    text-shadow: 0 1px 0 var(--c-agi), 0 2px 0 hsl(203 75% 30%)
}

.PUI.banner > h1,
h1 > .PUI {
    text-shadow: 0 1px 0 var(--c-pui), 0 2px 0 hsl(355 75% 30%)
}

.END.banner > h1,
h1 > .END {
    text-shadow: 0 1px 0 var(--c-end), 0 2px 0 hsl(53 75% 30%)
}

.INT.banner > h1,
h1 > .INT {
    text-shadow: 0 1px 0 var(--c-int), 0 2px 0 hsl(290 75% 30%)
}

.TEC.banner > h1,
h1 > .TEC {
    text-shadow: 0 1px 0 var(--c-tec), 0 2px 0 hsl(84 75% 30%)
}

.banner.compare {
    background-image: linear-gradient(110deg,
    var(--card-1, var(--c-agi)),
    var(--card-2, var(--c-pui))
    )
}

.banner.team {
    background-image: linear-gradient(110deg,
    var(--card-1, var(--c-agi)),
    var(--card-4, var(--c-int)),
    var(--card-7, var(--c-pui))
    )
}

.cards--page .rainbow,
.article-menu--page .rainbow {
    background-image: linear-gradient(110deg,
    var(--c-agi),
    var(--c-pui),
    var(--c-end))
}

.tierlist--page .rainbow {
    background-image: linear-gradient(110deg,
    var(--c-pui),
    var(--c-end),
    var(--c-int))
}

.team--page .rainbow {
    background-image: linear-gradient(110deg,
    var(--c-end),
    var(--c-int),
    var(--c-tec))
}

.team-build--page .rainbow {
    background-image: linear-gradient(110deg,
    var(--c-int),
    var(--c-tec),
    var(--c-agi))
}

.release-timeline--page .rainbow {
    background-image: linear-gradient(110deg,
    var(--c-tec),
    var(--c-agi),
    var(--c-pui))
}

/* CONTAINER > ITEM */
.hero > a,
#cards > div.thumb,
.cardBanner > .item,
.team > .team-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
}

/* BANNER CARDS */
.card {
    --w: 132px;
    --h: 116px;
    aspect-ratio: 264/232;
    background-image: radial-gradient(circle at 50%, var(--c-glo-bg-10) 32%, transparent 33%);

    & > img {
        width: var(--w);
    }
}

.card-100 .card {
    --w: 100px;
}

.hero {
    align-items: flex-start;
    /*padding: 0 0 calc(var(--glo-space-y) + 20px);*/
    padding: 0 0 calc(var(--glo-space-y));

    &.team > a.card:not(:first-of-type):not(:last-of-type) {
        --w: 132px;
        --h: 116px;
    }
}

.hero > a {
    --w: 164px;
    --h: 144px;
    margin-bottom: 1em
}

/*.hero > a,*/
.card {
    width: min(calc(100%), var(--w));
    height: min(calc(100%), var(--h))
}

.hero > a:nth-last-child(n+2),
.hero > a:nth-last-child(n+2) ~ a {
    width: min(calc(50%), var(--w));
    height: min(calc(50%), var(--h))
}

.hero > a:nth-last-child(n+3),
.hero > a:nth-last-child(n+3) ~ a {
    width: min(calc(33%), var(--w));
    height: min(calc(33%), var(--h))
}

.hero > a:nth-last-child(n+5),
.hero > a:nth-last-child(n+5) ~ a {
    width: min(calc(20%), var(--w));
    height: min(calc(20%), var(--h))
}

.hero > a:nth-last-child(n+4),
.hero > a:nth-last-child(n+4) ~ a,
.hero > a:nth-last-child(n+6),
.hero > a:nth-last-child(n+6) ~ a {
    width: min(calc(25%), var(--w));
    height: min(calc(25%), var(--h));
}

/*
	SHEET +
	CARDS +
	TEAM BUILD > ICONES
*/
.tooltip {
    --marge: .35em;
    display: inline-block;
    margin: 0 var(--marge) 1em;
    width: max(calc(50% - (var(--marge) * 3)), min(calc(100px + (var(--marge) * 3)), 50%));
    max-width: 172px;
    min-width: 86px
}

.tooltip > .event-figure,
.tooltip > .icon-figure,
.tooltip > img {
    filter: saturate(.25) drop-shadow(1px 1px 1px #000)
}

/* NAVSHEET SELECT / SORT LINK */
.navSheet,
.sort {
    align-content: center;
    align-items: center;
    flex-direction: column;
}

.navSheet,
.navSheet > *,
.sort,
.sort > * {
    margin: 0 auto 1em;
    padding-bottom: 0
}

.navSheet > .select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(calc(272px + (var(--glo-space-x) * 2)), 100%)
}

.sort > .select,
.sort > form > .select,
.slider {
    width: min(calc(25% - (var(--glo-space-x) * 2)), 100%);
    min-width: calc(272px - (var(--glo-space-x) * 2))
}

.select::after {
    content: '';
    top: 1em;
    /* bottom: auto; */
    right: 0.8em;
    border: 0.5em solid var(--c-0);
    border-top-color: var(--c-glo-bg-mute)
}

.navSheet > .select::after {
    /*top: auto;*/
    border-top-color: var(--c-050)
}

input[type=text],
select {
    background-color: var(--c-glo-bg);
    border-radius: .375em;
    color: var(--c-glo);
    line-height: 1.15;
    padding: .625em 1.5em .5em 1em;
    width: 100%;
    text-overflow: ellipsis;
    outline: 0 none
}

select:not(fieldset select) {
    background-color: var(--c-100);
    box-shadow: 0 0.1em 0.1em var(--c-010);
    color: var(--c-030)
}

.btn,
.labelCompare {
    background-color: var(--c-030);
    border: .2em solid #ccc;
    border-top-color: #f5f5f5;
    border-bottom-color: var(--c-060);
    border-radius: 0.375em;
    box-shadow: 1px 2px 0 var(--c-glo-shadow);
    color: #fff;
    display: inline-block;
    font-family: var(--font-2);
    font-size: 75%;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 0;
    margin: 1em .5em;
    padding: 1em .5em;
    width: auto
}

/*
 * SHEET + COMMENT LIRE UNE FICHE
 */
.video {
    aspect-ratio: 4/3;
    background-color: #000;
    border-radius: 0.375em;
    max-height: calc(540px - 1em);
    max-width: calc(960px - 1em);
    min-height: calc(152px - 1em);
    min-width: calc(272px - 1em);
}

/*
 * COMMENT LIRE UNE FICHE
 */
.zero-x {
    padding: 2em 0 1em
}

p.explain {
    display: inline-block;
    max-width: calc(30em - var(--glo-space-x));
    vertical-align: top;
    width: 50em;
    padding: 0 0 .5em 0;
    font-weight: 600;
    text-align: inherit;
    text-shadow: 1px 1px #000
}

/*
 * CARDS + TIER + TEAM + SHEET + COMPARE
 */
fieldset {
    background-color: var(--c-glo-bg);
    border: 2px dotted var(--c-glo-bg-mute);
    /* moz dotted laid si border-radius: .5em */
    border-radius: 9px;
    margin-bottom: 1em;
    padding-bottom: .25em
}

legend,
option:checked,
select[value=''],
select[value='-1'] {
    color: var(--c-glo-mute)
}

legend {
    line-height: 1;
    /* margin (moz ne centre pas) */
    margin: 0 auto;
    padding: 0 .25em
}

/*
 * not on howto
 */
/* a.z::before, */
/* button.z::before, */
/* label.z::before  */
.super-z::before,
.z::before {
    background-image: url(/img/eveil/z.svg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    content: '';
    inset: 0;
    z-index: 1
}

.super-z::before {
    background-image: url(/img/eveil/super-z.svg)
}

/* SHEET + COMPARE ONLY
 * * * * * * * * * * * * */
.sheet {
    background-color: var(--c-050);
    max-width: 1440px
}

.scroll {
    padding: 0 calc(var(--glo-space-x)) calc(var(--glo-space-x))
}

.scroll > img {
    border-radius: .375em;
    font-size: 100%;
}

.avis {
    font-size: 112.5%;
    line-height: 1.5;
    padding-bottom: 1em;
    word-break: break-word;
    overflow-wrap: anywhere
}

/* COMPARE ONLY
 * * * * * * * * * * * * */
.compare--page h1 > b {
    margin: 0 auto;
    filter: drop-shadow(0px 0px 0.075em orange);
    text-shadow: 0 -1px 0 hsl(50 100% 50%),
    0 -1px 0 hsl(25 100% 60%),
    0 2px 0 hsl(0 100% 60%),
    0 2px 0 hsl(0 50% 30%)
}

.compare--page label + select {
    margin-inline-start: 1rem;
}

.compare--page .select::after {
    top: auto;
    margin-top: calc(.45em);
}

.avis-compare {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    flex-direction: column
}

.avis-compare > div {
    flex: 1;
    max-width: unset;
    width: unset
}

.avis-compare .thumb {
    width: 4rem;
    margin-block: 1rem
}

/* TIERLISTS + SHEET
 * * * * * * * * * * * * */
.note-4 > i:nth-child(n+5),
.note-3 > i:nth-child(n+4),
.note-2 > i:nth-child(n+3),
.note-1 > i:nth-child(n+2) {
    filter: var(--note-vide)
}

/* TEAM + TIERLISTS
 * * * * * * * * * * * * */
div.load {
    min-height: 33.333vh;
    padding-top: 0
}

form:not(header > form) {
    display: inherit;
    width: inherit
}

.item.mute {
    filter: contrast(.6);
}

.white.banner.z-2,
.zero-pl {
    padding-left: 0;
}


.white.banner.z-2 > :not(.cardBanner),
.white.banner.z-2 > form > :not(.cardBanner),
.white.banner.z-2 > .cardBanner > .item {
    padding-left: 1em
}

div#linkBuddies {
    /* justify-content: start; */
}

/* spot
span {
	cursor: help;
	color: var(--c-090);
	background-color: var(--c-030);
	outline: 2px solid var(--c-060);
	top: .25em;
	left: .25em;
	font-family: var(--font-2);
	font-weight: 600;
	border-radius: 2em;
	height: 1.5em;
	padding: .5em;
	display: flex;
	align-content: center;
	justify-content: center;
	flex-wrap: wrap;
	z-index: 10;
	position: absolute;
	outline-offset: -1px;
	box-shadow: 2px 3px 0 var(--c-glo-shadow);
}
*/
/*
	TIERLIST lead infobulle-hover = lead infobulleBtn
*/
.cardBanner > .item {
    margin: .5em 0;
    position: relative;
    width: max(0%, min(calc(132px + 1em), 33.333%))
}

.lead .item > span,
.infobulleBtn > span {
    box-shadow: 2px 3px 0 var(--c-glo-shadow)
}

.infobulle-hover .infobulle {
    min-width: calc(100% + 2em)
}

.infobulle-hover .infobulle > p > b {
    display: initial
}

.item span,
.infobulleBtn > span {
    top: .25em;
    left: .25em;
}

.lead .item > span:hover,
.infobulleBtn:hover > span {
    box-shadow: 0 0 0 0 rgb(0 0 0);
    color: #fff
}

.lead .item span,
.infobulleBtn span {
    cursor: help;
    color: var(--c-090);
    background-color: var(--c-030);
    outline: 2px solid var(--c-060);
    /*! font-size: 87.5%; */
}

.item > button.infobulleBtn {
    /*! all: unset; */
    font-size: 100%;
    width: min(calc(100%), var(--w));
    height: min(calc(100%), var(--h));
    --w: 132px;
    --h: 116px;
    position: relative;
}

.lead .item span:before,
.infobulleBtn span:before {
    /* protege lien */
    content: '';
    /* background-color: #00000050; *//*pour repere */
    height: 175%;
    width: 200%;
    top: -33.333%;
    left: -12.5%;
    z-index: 99;
    pointer-events: unset;
}

.item span:not(:hover) b {
    display: none
}

.item span:hover b {
    display: inline
}

.lead .item span,
.rotations span,
.infobulleBtn span {
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 2em;
    font-family: var(--font-2);
    font-weight: 600;
    height: 1.5em;
    padding: .5em;
    position: absolute;
    z-index: 10;
    outline-offset: -1px;
}

.icon-figure,
.event-figure {
    position: relative;
    display: block;
}

.event-figure::before {
    content: '';
    background-size: cover;
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 2;
}

.event-figure[data-empty-img]::after {
    content: attr(title);
    inset: 65% 0 0 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80%;
    --c: black;
    text-shadow: 2px 2px 1px var(--c), 2px -2px 1px var(--c),
    -2px 2px 1px var(--c),
    -2px -2px 1px var(--c),
    2px 2px 1px var(--c),
    2px -2px 1px var(--c),
    -2px 2px 1px var(--c),
    -2px -2px 1px var(--c);

    margin: 0 1em .75em 1em;
}

.icon-figure[data-empty-img]::after {
    content: attr(title);
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 85%;
    color: #ffff42;
    font-weight: 900;
    margin: 0.25em .7em .25em .7em;
    text-transform: uppercase;
    letter-spacing: 0.05ch;
    font-style: italic;
}

/* EVENTS */
.defi > h2 {
    font-family: var(--font-1);
    padding-left: var(--glo-space-x);
}

.defi > ol {
    width: calc(100% - var(--glo-space-x));
    margin: 0 0 0.25em 1em;
    max-width: 480px;
}

.defi > ol > li {
    display: inline-block;
    margin: 0 .25em 0.5em;
}

.defi > ol i,
[class^="note-"] i {
    filter: drop-shadow(0 0 1px var(--c-glo-bg-10-alt));
    font-style: normal;
    /* padding: .125em; */
    letter-spacing: -.125em;
}

.defi > ol ~ ol i {
    font-size: 300%;
    line-height: .5em;
}

.defi ol,
.defi p {
    font-size: 82.5%;
}

.events {
    justify-content: start;
    font-size: 87.5%;
}

.eventsItem {
    margin: 0 0 var(--glo-space-x) var(--glo-space-x);
    max-width: var(--glo-max-width);
}

.eventsItem > h3 {
    margin: 0 auto;
    position: relative
}

.eventsItem > p {
    text-align: center
}

.eventsItem > img {
    aspect-ratio: 55/16;
    padding: .25em 1em;
}

.combat_plan {

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: max-content;
    margin: 0;
    flex-grow: 1;

    position: relative;

    max-width: calc(33vw - (var(--gap) / 2));
    min-width: min(100%, 535px);

    margin-block-end: 1rem;
    isolation: isolate;

    anchor-name: --turn;
    gap: 1em;
    background-color: var(--c-025);
    padding: 1rem;
    padding-block-end: 2rem;
    border-radius: 1rem;


    .card {

        --w: 120px;

        @media ( width <= 600px) {
            --w: 80px;
        }
    }


    &:has([data-position='1'][data-color="AGI"]) {
        --card-1: var(--c-agi);
    }

    &:has([data-position='1'][data-color="INT"]) {
        --card-1: var(--c-int);
    }

    &:has([data-position='1'][data-color="PUI"]) {
        --card-1: var(--c-pui);
    }

    &:has([data-position='1'][data-color="TEC"]) {
        --card-1: var(--c-tec);
    }

    &:has([data-position='1'][data-color="END"]) {
        --card-1: var(--c-end);
    }

    &:has([data-position='3'][data-color="AGI"]) {
        --card-2: var(--c-agi);
    }

    &:has([data-position='3'][data-color="INT"]) {
        --card-2: var(--c-int);
    }

    &:has([data-position='3'][data-color="PUI"]) {
        --card-2: var(--c-pui);
    }

    &:has([data-position='3'][data-color="TEC"]) {
        --card-2: var(--c-tec);
    }

    &:has([data-position='3'][data-color="END"]) {
        --card-2: var(--c-end);
    }

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 1rem;

        padding: 2px;
        --m: conic-gradient(#000);
        mask: var(--m) content-box exclude, var(--m);

        background: conic-gradient(from var(--plan-rotation),
        #fff0 30deg,
        var(--card-2, #fff8) 70deg,
        #fff0 120deg,
        #fff0 210deg,
        var(--card-1, #fff8) 250deg,
        #fff0 290deg);
        transition: --plan-rotation .5s linear;

        z-index: 0;

        opacity: .6;
    }

    &:hover::before {
        --plan-rotation: 45deg;
    }

    h3 {
        grid-column: 1 / -1;
        margin-block-end: 1em;
    }

    .commons-link {
        position: absolute;
        text-align: center;
        background-repeat: no-repeat;
        background-size: contain;
        padding: 1rem;
        z-index: -1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-block-end: 1rem;

        > span {
            font-size: 75%;
            background-color: var(--c-025);
            color: var(--c-end);
            min-width: 8ch;
            border-radius: 2em;
            padding: .15em .25rem;
            border: 1px solid var(--c-end);
        }

    }

    .commons-link[data-position="1"] {
        top: calc(anchor(--pos-1 center) - 1.5rem);
        left: anchor(--pos-1 center);
        right: anchor(--pos-2 center);
    }

    .commons-link[data-position="2"] {
        top: calc(anchor(--pos-2 center) - 1.5rem);
        left: anchor(--pos-2 center);
        right: anchor(--pos-3 center);

    }


}

.combat_plans {
    --gap: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

[lang=fr] .event-figure[data-difficulty='INTERMEDIATE']::before {
    background-image: url(/img/defis/defi-1.png);
}

[lang=en] .event-figure[data-difficulty='INTERMEDIATE']::before {
    background-image: url(/img/defis/challenge-1.png);
}

[lang=fr] .event-figure[data-difficulty='DIFFICULT']::before {
    background-image: url(/img/defis/defi-2.png);
}

[lang=en] .event-figure[data-difficulty='DIFFICULT']::before {
    background-image: url(/img/defis/challenge-2.png);
}

[lang=fr] .event-figure[data-difficulty='CONFIRMED']::before {
    background-image: url(/img/defis/defi-3.png);
}

[lang=en] .event-figure[data-difficulty='CONFIRMED']::before {
    background-image: url(/img/defis/challenge-3.png);
}

[lang=fr] .event-figure[data-difficulty='VETERAN']::before {
    background-image: url(/img/defis/defi-4.png);
}

[lang=en] .event-figure[data-difficulty='VETERAN']::before {
    background-image: url(/img/defis/challenge-4.png);
}

[lang=fr] .event-figure[data-difficulty='ENDGAME']::before {
    background-image: url(/img/defis/defi-5.png);
}

[lang=en] .event-figure[data-difficulty='ENDGAME']::before {
    background-image: url(/img/defis/challenge-5.png);
}