index.css

@font-face {
    font-family: 'Washington';
    font-display: swap;
    src: url(font/WashingtonBoldDynamic.otf);
}

@font-face {
    font-family: 'Cinema';
    font-display: swap;
    src: url(font/TBCinemaRGothic-M.ttf);
}

@font-face {
    font-family: 'Dodam';
    font-display: swap;
    src: url(font/Typo_DodamM.ttf);
}

@font-face {
    font-family: 'DMFT';
    font-display: swap;
    src: url(font/DMFT-chsimp.ttf);
}

@font-face {
    font-family: 'Roboto';
    font-display: swap;
    src: url(font/RobotoCondensed-Regular.ttf);
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
}

html {
    position: relative;
    width: 100%;
    height: 100%;
}

body {
    position: relative;
    width: 100%;
    min-height: 100%;
    background-color: #0f1824;
    color: white;
    font-family: 'Roboto', 'Arial Narrow', sans-serif;
    font-size: medium;
    text-shadow: 1px 1px black;
    display: flex;
    flex-direction: column;
    margin: 0;
    -webkit-text-size-adjust: none; /* for ios */
}

.fill-row {
    grid-column: 1 / -1;
}

.hidden, input.hidden + label {
    display: none;
}

/* TEXT */

a {
    color: #ccb55a;
    text-decoration: inherit;
}
a:hover {
    text-decoration: underline;
}

.cinematic {
    font-family: 'Washington', 'Trebuchet MS', 'Arial Narrow', sans-serif;
    text-transform: uppercase;
}
html[lang='ja'] .cinematic {
    font-family: 'Washington', 'Cinema', 'Trebuchet MS', 'Arial Narrow', sans-serif;
}
html[lang='ko'] .cinematic {
    font-family: 'Washington', 'Dodam', 'Trebuchet MS', 'Arial Narrow', sans-serif;
}
html[lang='zh-cn'] .cinematic {
    font-family: 'Washington', 'DMFT', 'Trebuchet MS', 'Arial Narrow', sans-serif;
}

.tagged {
    text-align: center;
}

.tagged:before {
    content: '\00a0 ';
    background-size: contain;
    background-repeat: no-repeat;
    display: inline;
    padding-left: 1em;
}

/* TODO: check if opera line is necessary */
/* thanks to Divya Manian for help with this (http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html) */
.bronze-gradient,
.silver-gradient,
.gold-gradient,
.diamond-gradient,
.dependent-gradient {
    background-image: -o-linear-gradient(transparent, transparent); /* for opera */
    background-clip: text;
    -webkit-background-clip: text;
    font-size: larger;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    /* filter: drop-shadow(1px 1px black); */
    /* excessive drop-shadow causes major visual glitches in ios */
    padding: 0.5em 0.25em;
    margin-top: -0.3em;
    margin-bottom: -0.7em;
    display: inline-block;
}
.bronze-gradient,
.bronze .dependent-gradient {
    background-image: -webkit-linear-gradient(white 10%, #843 70%);
    color: #b76;
}
.silver-gradient,
.silver .dependent-gradient {
    background-image: -webkit-linear-gradient(white 10%, #889 70%);
    color: #aab;
}
.gold-gradient,
.gold .dependent-gradient {
    background-image: -webkit-linear-gradient(white 10%, #da2 70%);
    color: #fd8;
}
.diamond-gradient,
.diamond .dependent-gradient {
    background-image: -webkit-linear-gradient(white 10%, #d9d 70%);
    color: #fcf;
}

.tagged .bronze-gradient,
.tagged .silver-gradient,
.tagged .gold-gradient,
.tagged .diamond-gradient,
.tagged .dependent-gradient {
    font-size: inherit;
}

/* HEADER AND FOOTER */

.scroller {
    width: max-content;
    max-width: 100%;
    margin: auto;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

.scroller > div {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-gap: 4px;
    padding: 4px 0;
}

.scroller.half {
    min-width: 45%;
    vertical-align: top;
    display: inline-block;
}
.scroller.half.hidden {
    display: none;
}

.scroller.half > div {
    display: inline-grid;
}

input[type='radio'],
input[type='checkbox'] {
    display: none;
}

label {
    min-width: 28px;
    min-height: 28px;
    background-color: #0f1824;
    text-align: center;
    text-transform: uppercase;
    line-height: 28px;
    border: 1px solid #263b5a;
    border-radius: 5px;
    display: block;
    padding: 4px;
    cursor: pointer;
}
input:checked + label {
    background-image: linear-gradient(#1b2a41, #314c73);
    border-color: #314c73;
}

.button {
    max-width: 42px;
    max-height: 42px;
    border-radius: 50%;
    cursor: pointer;
}

.icon {
    max-width: 28px;
    max-height: 28px;
    font-size: 0;
    display: block;
    margin: auto;
}

.half-subicon {
    max-width: 50%;
    max-height: 100%;
}
.half-subicon:last-child {
    transform: scaleX(-1);
}

.pressed,
.loading input,
.loading label,
.loading .button,
.loading .icon {
    opacity: 0.5;
    pointer-events: none;
}

.glowing {
    filter: drop-shadow(0 0 6px white);
    /* use sparingly; excessive drop-shadow causes major visual glitches in ios */
}

.underlined {
    border-radius: 0 0 4px 4px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid #314c73;
}

.wrong {
    color: #f88;
    opacity: 0.5;
    pointer-events: none;
}

/* HEADER */

#header {
    background-image: linear-gradient(#0f1824, #1b2a41);
    text-align: center;
    border-bottom: 1px solid #ccb55a;
    padding: 6px 0;
}

#skullgirls-mobile:before {content: 'Skullgirls Mobile';}

html[lang='en'] .fighter-gallery:before {content: 'Fighter Gallery';}
html[lang='ja'] .fighter-gallery:before {content: '\30ad \30e3 \30e9 \30af \30bf \30fc \30ae \30e3 \30e9 \30ea \30fc ';}
html[lang='fr'] .fighter-gallery:before {content: 'Galerie de Personnages';}
html[lang='de'] .fighter-gallery:before {content: 'K\00e4 mpfergalerie';}
html[lang='es'] .fighter-gallery:before {content: 'Galer\00ed a de Personajes';}
html[lang='ko'] .fighter-gallery:before {content: '\ce90 \b9ad \d130  \ac24 \b7ec \b9ac ';}
html[lang='zh-cn'] .fighter-gallery:before {content: '\6597 \58eb \753b \5eca ';}
html[lang='ru'] .fighter-gallery:before {content: '\0413 \0430 \043b \0435 \0440 \0435 \044f  \041f \0435 \0440 \0441 \043e \043d \0430 \0436 \0435 \0439 ';}
html[lang='pt-br'] .fighter-gallery:before {content: 'Galeria de Personagens';}

html[lang='en'] .move-gallery:before {content: 'Move Gallery';}
html[lang='ja'] .move-gallery:before {content: '\5fc5 \6bba \6280 \30ae \30e3 \30e9 \30ea \30fc ';}
html[lang='fr'] .move-gallery:before {content: 'Galerie des Coups';}
html[lang='de'] .move-gallery:before {content: 'Angriffsgalerie';}
html[lang='es'] .move-gallery:before {content: 'Galer\00ed a de Movimientos';}
html[lang='ko'] .move-gallery:before {content: '\ae30 \c220  \ac24 \b7ec \b9ac ';}
html[lang='zh-cn'] .move-gallery:before {content: '\62db \5f0f \753b \5eca ';}
html[lang='ru'] .move-gallery:before {content: '\0413 \0430 \043b \0435 \0440 \0435 \044f  \041f \0440 \0438 \0435 \043c \043e \0432 ';}
html[lang='pt-br'] .move-gallery:before {content: 'Galeria de Golpes';}

html[lang='en'] .catalyst-gallery:before {content: 'Catalyst Gallery';}
html[lang='ja'] .catalyst-gallery:before {content: '\30ad \30e3 \30bf \30ea \30b9 \30c8 \30ae \30e3 \30e9 \30ea \30fc ';}
html[lang='fr'] .catalyst-gallery:before {content: 'Galerie des Catalyseurs';}
html[lang='de'] .catalyst-gallery:before {content: 'Katalysator-Galerie';}
html[lang='es'] .catalyst-gallery:before {content: 'Galer\00ed a de Catalizadores';}
html[lang='ko'] .catalyst-gallery:before {content: '\cd09 \b9e4  \ac24 \b7ec \b9ac ';}
html[lang='zh-cn'] .catalyst-gallery:before {content: '\8f6c \5316 \7269 \753b \5eca ';}
html[lang='ru'] .catalyst-gallery:before {content: '\0413 \0430 \043b \0435 \0440 \0435 \044f  \041a \0430 \0442 \0430 \043b \0438 \0437 \0430 \0442 \043e \0440 \044b ';}
html[lang='pt-br'] .catalyst-gallery:before {content: 'Galeria de Catalisadores';}

html[lang='en'] .gallery-ratings:before {content: 'Gallery Ratings';}
html[lang='ja'] .gallery-ratings:before {content: '\30ae \30e3 \30e9 \30ea \30fc \306e \8a55 \4fa1 ';}
html[lang='fr'] .gallery-ratings:before {content: '\00c9 valuations de la Galerie';}
html[lang='de'] .gallery-ratings:before {content: 'Galerie-Bewertungen';}
html[lang='es'] .gallery-ratings:before {content: 'Clasificaciones de la Galer\00ed a';}
html[lang='ko'] .gallery-ratings:before {content: '\ac24 \b7ec \b9ac  \b4f1 \ae09 ';}
html[lang='zh-cn'] .gallery-ratings:before {content: '\753b \5eca \8bc4 \7ea7 ';}
html[lang='ru'] .gallery-ratings:before {content: '\0420 \0435 \0439 \0442 \0438 \043d \0433 \0438  \0413 \0430 \043b \0435 \0440 \0435 \0438 ';}
html[lang='pt-br'] .gallery-ratings:before {content: 'Classifica\00e7 \00f5 es da Galeria';}

html[lang='en'] .fighters:before {content: 'FIGHTERS';}
html[lang='ja'] .fighters:before {content: '\30ad \30e3 \30e9 \30af \30bf \30fc ';}
html[lang='fr'] .fighters:before {content: 'PERSONNAGES';}
html[lang='de'] .fighters:before {content: 'K\00c4 MPFER';}
html[lang='es'] .fighters:before {content: 'PERSONAJES';}
html[lang='ko'] .fighters:before {content: '\ce90 \b9ad \d130 ';}
html[lang='zh-cn'] .fighters:before {content: '\6597 \58eb ';}
html[lang='ru'] .fighters:before {content: '\041f \0415 \0420 \0421 \041e \041d \0410 \0416 \0418 ';}
html[lang='pt-br'] .fighters:before {content: 'PERSONAGENS';}

html[lang='en'] .moves:before {content: 'MOVES';}
html[lang='ja'] .moves:before {content: '\5fc5 \6bba \6280 ';}
html[lang='fr'] .moves:before {content: 'COUPS SP\00c9 CIAUX';}
html[lang='de'] .moves:before {content: 'ANGRIFFE';}
html[lang='es'] .moves:before {content: 'MOVIMIENTOS';}
html[lang='ko'] .moves:before {content: '\ae30 \c220 ';}
html[lang='zh-cn'] .moves:before {content: '\62db \5f0f ';}
html[lang='ru'] .moves:before {content: '\041f \0420 \0418 \0415 \041c \042b ';}
html[lang='pt-br'] .moves:before {content: 'GOLPES';}

html[lang='en'] .catalysts:before {content: 'CATALYSTS';}
html[lang='ja'] .catalysts:before {content: '\30ad \30e3 \30bf \30ea \30b9 \30c8 ';}
html[lang='fr'] .catalysts:before {content: 'CATALYSEURS';}
html[lang='de'] .catalysts:before {content: 'KATALYSATOREN';}
html[lang='es'] .catalysts:before {content: 'CATALIZADORES';}
html[lang='ko'] .catalysts:before {content: '\cd09 \b9e4 ';}
html[lang='zh-cn'] .catalysts:before {content: '\8f6c \5316 \7269 ';}
html[lang='ru'] .catalysts:before {content: '\041a \0410 \0422 \0410 \041b \0418 \0417 \0410 \0422 \041e \0420 \042b ';}
html[lang='pt-br'] .catalysts:before {content: 'CATALISADORES';}

html[lang='en'] .ratings:before {content: 'RATINGS';}
html[lang='ja'] .ratings:before {content: '\8a55 \4fa1 ';}
html[lang='fr'] .ratings:before {content: '\00c9 VALUATIONS';}
html[lang='de'] .ratings:before {content: 'BEWERTUNGEN';}
html[lang='es'] .ratings:before {content: 'CALIFICACIONES';}
html[lang='ko'] .ratings:before {content: '\b4f1 \ae09 ';}
html[lang='zh-cn'] .ratings:before {content: '\8bc4 \7ea7 ';}
html[lang='ru'] .ratings:before {content: '\0420 \0415 \0419 \0422 \0418 \041d \0413 \0418 ';}
html[lang='pt-br'] .ratings:before {content: 'CLASSIFICA\00c7 \00d5 ES';}

#sgmnow img {
    height: 1.2em;
    display: block;
    margin: -0.1em auto;
}

.cinematic.banner {
    font-size: xx-large;
}

.ribbon {
    background-color: #263b5a;
    margin: 6px auto;
    text-transform: uppercase;
}

#version:before {
    background-image: url(image/official/IconInfo.png);
    padding-left: 1.25em;
    margin-right: 0.25em;
}
html[lang='en'] #version:before {content: 'VERSION:';}
html[lang='ja'] #version:before {content: '\30d0 \30fc \30b8 \30e7 \30f3 :';}
html[lang='fr'] #version:before {content: 'VERSION:';}
html[lang='de'] #version:before {content: 'VERSION:';}
html[lang='es'] #version:before {content: 'VERSI\00d3 N:';}
html[lang='ko'] #version:before {content: '\bc84 \c804 :';}
html[lang='zh-cn'] #version:before {content: '\7248 \672c \ff1a ';}
html[lang='ru'] #version:before {content: '\0412 \0415 \0420 \0421 \0418 \042f :';}
html[lang='pt-br'] #version:before {content: 'VERS\00c3 O:';}

.outdated:after {
    color: #f88;
}

html[lang='en'] .outdated:after {content: ' (UPDATE REQUIRED)';}
html[lang='ja'] .outdated:after {content: ' (\30a2 \30c3 \30d7 \30b0 \30ec \30fc \30c9 \304c \5fc5 \8981 \3067 \3059 )';}
html[lang='fr'] .outdated:after {content: ' (MISE A JOUR N\00c9 CESSAIRE)';}
html[lang='de'] .outdated:after {content: ' (UPDATE ERFORDERLICH)';}
html[lang='es'] .outdated:after {content: ' (ACTUALIZACI\00d3 N NECESARIA)';}
html[lang='ko'] .outdated:after {content: ' (\c5c5 \b370 \c774 \d2b8  \d544 \c218 )';}
html[lang='zh-cn'] .outdated:after {content: ' (\9700 \8981 \5347 \7ea7 )';}
html[lang='ru'] .outdated:after {content: ' (\0422 \0420 \0415 \0411 \0423 \0415 \0422 \0421 \042f  \041e \0411 \041d \041e \0412 \041b \0415 \041d \0418 \0415 )';}
html[lang='pt-br'] .outdated:after {content: ' (ATUALIZA\00c7 \00c3 O NECESS\00c1 RIA)';}

#language-menu label:before {
    padding-left: 1.75em;
}
#en + label.tagged:before {content: 'English'; background-image: url(image/official/flag_en.png);}
#ja + label.tagged:before {content: '\65e5 \672c \8a9e '; background-image: url(image/official/flag_jp.png);}
#fr + label.tagged:before {content: 'Fran\00e7 ais'; background-image: url(image/official/flag_fr.png);}
#de + label.tagged:before {content: 'Deutsch'; background-image: url(image/official/flag_de.png);}
#es + label.tagged:before {content: 'Espa\00f1 ol'; background-image: url(image/official/flag_es.png);}
#ko + label.tagged:before {content: '\d55c \ad6d \c5b4 '; background-image: url(image/official/flag_ko.png);}
#zh-cn + label.tagged:before {content: '\7b80 \4f53 \4e2d \6587 '; background-image: url(image/official/flag_ch.png);}
#ru + label.tagged:before {content: '\0050 \0443 \0441 \0441 \043a \0438 \0439 '; background-image: url(image/official/flag_ru.png);}
#pt-br + label.tagged:before {content: 'Portugu\00ea s'; background-image: url(image/official/flag_pt.png);}

/* FOOTER */

#footer {
    position: -webkit-sticky;
    position: sticky;
    bottom: -1px;
    z-index: 1;
}

#dock {
    background-image: linear-gradient(#263b5a, #0f1824);
    box-shadow: 0 -3px 3px black;
    border-top: 1px solid #ccb55a;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 3px 6px;
}

#dock-left {
    margin: auto 0;
}

#fighter-options {
    margin: auto;
}

#dock-right {
    margin: auto 0 auto auto;
}

#filter-sort, #ratings, #settings {
    display: inline;
    cursor: pointer;
}

#menu {
    background-image: linear-gradient(#1b2a41, #0f1824);
    text-align: center;
    box-shadow: 0 -3px 3px black;
    border-top: 1px solid #ccb55a;
    padding: 10px 0;
}

.subset {
    display: grid;
    grid-gap: 4px;
}

.label-flexbox {
    display: flex;
    flex-direction: column;
}

#options-label + div,
#filter-cancel + label {
    margin: auto;
}

.divider {
    width: 1px;
    background-color: #263b5a;
    margin: 8px 4px;
}

/* FIGHTER OPTIONS */

#options-menu.scroller {
    min-width: 90%;
}

#options-menu.scroller > div {
    grid-template-columns: max-content repeat(6, auto minmax(max-content, 1fr));
}

#options-label:before {
    background-image: url(image/official/GearIcon.png);
    padding-left: 1.1em;
}
html[lang='en'] #options-label:before {content: 'OPTIONS';}
html[lang='ja'] #options-label:before {content: '\30aa \30d7 \30b7 \30e7 \30f3 ';}
html[lang='fr'] #options-label:before {content: 'OPTIONS';}
html[lang='de'] #options-label:before {content: 'EINSTELLUNGEN';}
html[lang='es'] #options-label:before {content: 'OPCIONES';}
html[lang='ko'] #options-label:before {content: '\c124 \c815 ';}
html[lang='zh-cn'] #options-label:before {content: '\9009 \9879 ';}
html[lang='ru'] #options-label:before {content: '\041d \0410 \0421 \0422 \0420 \041e \0419 \041a \0418 ';}
html[lang='pt-br'] #options-label:before {content: 'OP\00c7 \00d5 ES';}

#options-menu .subset {
    grid-template-columns: repeat(4, 1fr);
}

html[lang='en'] #evolve-label:before {content: 'EVOLVE';}
html[lang='ja'] #evolve-label:before {content: '\9032 \5316 ';}
html[lang='fr'] #evolve-label:before {content: 'EVOLUTION';}
html[lang='de'] #evolve-label:before {content: 'ENTWICKLUNG';}
html[lang='es'] #evolve-label:before {content: 'EVOLUCIONAR';}
html[lang='ko'] #evolve-label:before {content: '\c9c4 \d654 \d558 \ae30 ';}
html[lang='zh-cn'] #evolve-label:before {content: '\8fdb \5316 ';}
html[lang='ru'] #evolve-label:before {content: '\0420 \0410 \0417 \0412 \0418 \0422 \0418 \0415 ';}
html[lang='pt-br'] #evolve-label:before {content: 'EVOLUIR';}

#evolve-bronze,
#evolve-silver,
#evolve-gold,
#evolve-diamond {
    cursor: pointer;
}

html[lang='en'] #level-label:before {content: 'Level';}
html[lang='ja'] #level-label:before {content: '\30ec \30d9 \30eb ';}
html[lang='fr'] #level-label:before {content: 'Niveau';}
html[lang='de'] #level-label:before {content: 'Stufe';}
html[lang='es'] #level-label:before {content: 'Level';}
html[lang='ko'] #level-label:before {content: '\b808 \bca8 ';}
html[lang='zh-cn'] #level-label:before {content: '\7b49 \7ea7 ';}
html[lang='ru'] #level-label:before {content: '\0423 \0440 \043e \0432 \0435 \043d \044c ';}
html[lang='pt-br'] #level-label:before {content: 'N\00ed vel';}

#footer input[type='text'] {
    position: relative;
    width: 28px;
    height: 28px;
    background-color: transparent;
    color: white;
    font-size: inherit;
    text-align: center;
    text-shadow: 1px 1px black;
    border: none;
    border-radius: 50%;
    margin: auto auto -28px auto;
    display: block;
    padding: 0;
    z-index: 1;
}

#footer input[type='text'].hidden {
    display: none;
}

#footer input[type='text']:focus {
    outline: none;
}
#footer input[type='text']:focus + img {
    border-radius: 50%;
    box-shadow: 0 0 6px 1px white;
}

#footer input[type='text'].maxed {
    color: skyblue;
}

#level-diamond + img {
    filter: sepia(1) hue-rotate(270deg);
}

#tree-none + label {
    grid-column: 1 / -1;
}

html[lang='en'] .none-label:before {content: 'NONE';}
html[lang='ja'] .none-label:before {content: '\306a \3057 ';}
html[lang='fr'] .none-label:before {content: 'VIDE';}
html[lang='de'] .none-label:before {content: 'KEINER';}
html[lang='es'] .none-label:before {content: 'NADA';}
html[lang='ko'] .none-label:before {content: '\c5c6 \c74c ';}
html[lang='zh-cn'] .none-label:before {content: '\65e0 ';}
html[lang='ru'] .none-label:before {content: '\041e \0422 \0421 \0423 \0422 \0421 \0422 \0412 \0423 \0415 \0422 ';}
html[lang='pt-br'] .none-label:before {content: 'NENHUM';}

#tree-all + label {
    grid-column: 1 / -1;
}

html[lang='en'] .all-label:before {content: 'ALL';}
html[lang='ja'] .all-label:before {content: '\3059 \3079 \3066 ';}
html[lang='fr'] .all-label:before {content: 'TOUT';}
html[lang='de'] .all-label:before {content: 'ALLE';}
html[lang='es'] .all-label:before {content: 'TODOS';}
html[lang='ko'] .all-label:before {content: '\c804 \ccb4 ';}
html[lang='zh-cn'] .all-label:before {content: '\5168 \90e8 ';}
html[lang='ru'] .all-label:before {content: '\0412 \0421 \0415 ';}
html[lang='pt-br'] .all-label:before {content: 'TODOS';}

/* MOVE LEVEL */

#level-menu .subset {
    grid-template-columns: repeat(3, 1fr);
}

/* FILTER */

#filter-label:before {
    background-image: url(image/official/icon_filter.png);
    padding-left: 1.2em;
}
html[lang='en'] #filter-label:before {content: 'FILTER';}
html[lang='ja'] #filter-label:before {content: '\30d5 \30a3 \30eb \30bf \30fc ';}
html[lang='fr'] #filter-label:before {content: 'FILTRER';}
html[lang='de'] #filter-label:before {content: 'FILTER';}
html[lang='es'] #filter-label:before {content: 'FILTRAR';}
html[lang='ko'] #filter-label:before {content: '\d544 \d130 ';}
html[lang='zh-cn'] #filter-label:before {content: '\7b5b \9009 ';}
html[lang='ru'] #filter-label:before {content: '\0424 \0418 \041b \042c \0422 \0420 ';}
html[lang='pt-br'] #filter-label:before {content: 'FILTRAR';}

#filter-bb + label .icon {
    margin: 5% auto -5% auto;
}

#medals {
    grid-template-columns: repeat(2, 1fr);
}

#elements {
    grid-template-columns: repeat(3, 1fr);
}

#mastery {
    grid-template-columns: repeat(9, 1fr);
}
.mastery-extra#mastery {
    grid-template-columns: repeat(10, 1fr);
}

/* SORT */

#sort-label:before {
    background-image: url(image/official/icon_sort.png);
    padding-left: 1.6em;
}
html[lang='en'] #sort-label:before {content: 'SORT';}
html[lang='ja'] #sort-label:before {content: '\4e26 \3073 \66ff \3048 ';}
html[lang='fr'] #sort-label:before {content: 'TRIER';}
html[lang='de'] #sort-label:before {content: 'SORTIEREN';}
html[lang='es'] #sort-label:before {content: 'ORDENAR';}
html[lang='ko'] #sort-label:before {content: '\c815 \b82c ';}
html[lang='zh-cn'] #sort-label:before {content: '\6392 \5e8f ';}
html[lang='ru'] #sort-label:before {content: '\0423 \041f \041e \0420 \042f \0414 .';}
html[lang='pt-br'] #sort-label:before {content: 'ORGANIZAR';}

#sort-menu .subset div {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 4px;
}

html[lang='en'] #sort-abc + label:before {content: 'Alphabetical';}
html[lang='ja'] #sort-abc + label:before {content: '\30a2 \30eb \30d5 \30a1 \30d9 \30c3 \30c8 \9806 ';}
html[lang='fr'] #sort-abc + label:before {content: 'Alphab\00e9 tique';}
html[lang='de'] #sort-abc + label:before {content: 'Alphabetisch';}
html[lang='es'] #sort-abc + label:before {content: 'Orden alfab\00e9 tico';}
html[lang='ko'] #sort-abc + label:before {content: '\c54c \d30c \bcb3 \c21c ';}
html[lang='zh-cn'] #sort-abc + label:before {content: '\6309 \5b57 \6bcd \987a \5e8f ';}
html[lang='ru'] #sort-abc + label:before {content: '\041f \043e  \0430 \043b \0444 \0430 \0432 \0438 \0442 \0443 ';}
html[lang='pt-br'] #sort-abc + label:before {content: 'Ordem alfab\00e9 tica';}

html[lang='en'] #sort-fs + label:before {content: 'FIGHTER SCORE';}
html[lang='ja'] #sort-fs + label:before {content: '\30d5 \30a1 \30a4 \30bf \30fc \30fb \30b9 \30b3 \30a2 ';}
html[lang='fr'] #sort-fs + label:before {content: 'SCORE';}
html[lang='de'] #sort-fs + label:before {content: 'KAMPFPUNKTE';}
html[lang='es'] #sort-fs + label:before {content: 'PUNTUACI\00d3 N ';}
html[lang='ko'] #sort-fs + label:before {content: '\c804 \d22c \b825 ';}
html[lang='zh-cn'] #sort-fs + label:before {content: '\6597 \58eb \79ef \5206 ';}
html[lang='ru'] #sort-fs + label:before {content: '\0411 \041e \0415 \0412 \041e \0419  \0421 \0427 \0415 \0422 ';}
html[lang='pt-br'] #sort-fs + label:before {content: 'PONTUA\00c7 \00c3 O';}

html[lang='en'] #sort-atk + label:before {content: 'ATTACK DAMAGE';}
html[lang='ja'] #sort-atk + label:before {content: '\653b \6483 \30c0 \30e1 \30fc \30b8 ';}
html[lang='fr'] #sort-atk + label:before {content: 'D\00c9 G\00c2 TS D\'ATT AQUE';}
html[lang='de'] #sort-atk + label:before {content: 'SCHADENSBOOST';}
html[lang='es'] #sort-atk + label:before {content: 'DA\00d1 O POR ATAQUE';}
html[lang='ko'] #sort-atk + label:before {content: '\acf5 \aca9  \d53c \d574 ';}
html[lang='zh-cn'] #sort-atk + label:before {content: '\653b \51fb \4f24 \5bb3 ';}
html[lang='ru'] #sort-atk + label:before {content: '\0423 \0420 \041e \041d  \043e \0442  \0410 \0422 \0410 \041a \0418 ';}
html[lang='pt-br'] #sort-atk + label:before {content: 'DANO DOS GOLPES';}

html[lang='en'] #sort-hp + label:before {content: 'HEALTH';}
html[lang='ja'] #sort-hp + label:before {content: '\4f53 \529b ';}
html[lang='fr'] #sort-hp + label:before {content: 'SANT\00c9 ';}
html[lang='de'] #sort-hp + label:before {content: 'GESUNDHEIT';}
html[lang='es'] #sort-hp + label:before {content: 'SALUD';}
html[lang='ko'] #sort-hp + label:before {content: '\ccb4 \b825 ';}
html[lang='zh-cn'] #sort-hp + label:before {content: '\8840 \91cf ';}
html[lang='ru'] #sort-hp + label:before {content: '\0417 \0414 \041e \0420 \041e \0412 \042c \0415 ';}
html[lang='pt-br'] #sort-hp + label:before {content: 'VIDA';}

html[lang='en'] #sort-element + label:before {content: 'Element';}
html[lang='ja'] #sort-element + label:before {content: '\5c5e \6027 ';}
html[lang='fr'] #sort-element + label:before {content: '\00c9 l\00e9 ment';}
html[lang='de'] #sort-element + label:before {content: 'Element';}
html[lang='es'] #sort-element + label:before {content: 'Elemento';}
html[lang='ko'] #sort-element + label:before {content: '\c18d \c131 ';}
html[lang='zh-cn'] #sort-element + label:before {content: '\5143 \7d20 ';}
html[lang='ru'] #sort-element + label:before {content: '\0421 \0442 \0438 \0445 \0438 \044f ';}
html[lang='pt-br'] #sort-element + label:before {content: 'Elemento';}

html[lang='en'] #sort-tier + label:before {content: 'TIER';}
html[lang='ja'] #sort-tier + label:before {content: '\30e9 \30f3 \30af ';}
html[lang='fr'] #sort-tier + label:before {content: 'RANG';}
html[lang='de'] #sort-tier + label:before {content: 'KLASSE';}
html[lang='es'] #sort-tier + label:before {content: 'GRADO';}
html[lang='ko'] #sort-tier + label:before {content: '\b4f1 \ae09 ';}
html[lang='zh-cn'] #sort-tier + label:before {content: '\9636 \7ea7 ';}
html[lang='ru'] #sort-tier + label:before {content: '\0420 \0410 \041d \0413 ';}
html[lang='pt-br'] #sort-tier + label:before {content: 'CATEGORIA';}

html[lang='en'] #sort-type + label:before {content: 'TYPE';}
html[lang='ja'] #sort-type + label:before {content: '\30bf \30a4 \30d7 ';}
html[lang='fr'] #sort-type + label:before {content: 'TYPE';}
html[lang='de'] #sort-type + label:before {content: 'TYP';}
html[lang='es'] #sort-type + label:before {content: 'TIPO';}
html[lang='ko'] #sort-type + label:before {content: '\d0c0 \c785 ';}
html[lang='zh-cn'] #sort-type + label:before {content: '\7c7b \578b ';}
html[lang='ru'] #sort-type + label:before {content: '\0422 \0418 \041f ';}
html[lang='pt-br'] #sort-type + label:before {content: 'TIPO';}

/* COLLECTION */

#collection {
    background-color: black;
    display: grid;
    flex: 1;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    grid-auto-rows: min-content;
    grid-gap: 6px;
    padding: 6px;
}

@media (max-width: 4050px) {.zoomed-in #collection {grid-template-columns: repeat(8, minmax(0, 1fr));}}
@media (max-width: 3600px) {.zoomed-in #collection {grid-template-columns: repeat(7, minmax(0, 1fr));}}
@media (max-width: 3150px) {.zoomed-in #collection {grid-template-columns: repeat(6, minmax(0, 1fr));}}
@media (max-width: 2700px) {.zoomed-in #collection {grid-template-columns: repeat(5, minmax(0, 1fr));}}
@media (max-width: 2250px) {.zoomed-in #collection {grid-template-columns: repeat(4, minmax(0, 1fr));}}
@media (max-width: 1800px) {.zoomed-in #collection {grid-template-columns: repeat(3, minmax(0, 1fr));}}
@media (max-width: 1350px) {.zoomed-in #collection {grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 900px) {.zoomed-in #collection {grid-template-columns: repeat(1, minmax(0, 1fr));}}

@media (max-width: 3150px) {#collection {grid-template-columns: repeat(8, minmax(0, 1fr));}}
@media (max-width: 2800px) {#collection {grid-template-columns: repeat(7, minmax(0, 1fr));}}
@media (max-width: 2450px) {#collection {grid-template-columns: repeat(6, minmax(0, 1fr));}}
@media (max-width: 2100px) {#collection {grid-template-columns: repeat(5, minmax(0, 1fr));}}
@media (max-width: 1750px) {#collection {grid-template-columns: repeat(4, minmax(0, 1fr));}}
@media (max-width: 1400px) {#collection {grid-template-columns: repeat(3, minmax(0, 1fr));}}
@media (max-width: 1050px) {#collection {grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 700px) {#collection {grid-template-columns: repeat(1, minmax(0, 1fr));}}

@media (max-width: 2250px) {.zoomed-out #collection {grid-template-columns: repeat(8, minmax(0, 1fr));}}
@media (max-width: 2000px) {.zoomed-out #collection {grid-template-columns: repeat(7, minmax(0, 1fr));}}
@media (max-width: 1750px) {.zoomed-out #collection {grid-template-columns: repeat(6, minmax(0, 1fr));}}
@media (max-width: 1500px) {.zoomed-out #collection {grid-template-columns: repeat(5, minmax(0, 1fr));}}
@media (max-width: 1250px) {.zoomed-out #collection {grid-template-columns: repeat(4, minmax(0, 1fr));}}
@media (max-width: 1000px) {.zoomed-out #collection {grid-template-columns: repeat(3, minmax(0, 1fr));}}
@media (max-width: 750px) {.zoomed-out #collection {grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 500px) {.zoomed-out #collection {grid-template-columns: repeat(1, minmax(0, 1fr));}}

/* TIER LIST */

#ratings-table {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
.loading #ratings-table {
    display: none;
}
#ratings-table td {
    max-width: 235px;
    overflow: hidden;
}

#ratings-table td.tagged:before {
    background-image: url(image/official/star01.png);
}

#ratings-table tr:nth-child(2n) td:nth-child(2n) {
    background-color: #333;
}
#ratings-table tr:nth-child(2n) td:nth-child(2n + 3),
#ratings-table tr:nth-child(2n + 3) td:nth-child(2n) {
    background-color: #666;
}
#ratings-table tr:nth-child(2n + 3) td:nth-child(2n + 3) {
    background-color: #999;
}

#ratings-table .avatar {
    position: relative;
    width: auto;
    vertical-align: bottom;
    display: inline-block;
    margin: 2px;
}

#ratings-table .frame {
    width: 48px;
    height: 48px;
    padding: 3px;
    margin: auto;
}

#offense-ratings,
#defense-ratings {
    cursor: pointer;
}

.loading #offense-ratings,
.loading #defense-ratings {
    opacity: 0.5;
    pointer-events: none;
}

/* SEARCH */

#search-menu {
    z-index: 1;
}

#search-menu .scroller > div {
    grid-auto-columns: 1fr;
}

#searchbox {
    width: 100%;
    font-size: x-large;
    text-align: center;
    line-height: 1.3em;
    border: none;
    border-radius: 5px;
    box-shadow: inset 0 0 10px 1px black;
    box-sizing: border-box;
    padding-top: 0.2em;
}
#searchbox:focus {
    outline: none;
    box-shadow: none;
}

#search-menu label, #options-menu label {
    min-height: 0;
    line-height: normal;
}

html[lang='en'] #search-vn + label:before {content: 'Variant Name';}
html[lang='ja'] #search-vn + label:before {content: '\30d0 \30ea \30a2 \30f3 \30c8 \540d ';}
html[lang='fr'] #search-vn + label:before {content: 'Nom de Variante';}
html[lang='de'] #search-vn + label:before {content: 'Variantenname';}
html[lang='es'] #search-vn + label:before {content: 'Nombre de la Variante';}
html[lang='ko'] #search-vn + label:before {content: '\bcc0 \d615  \c774 \b984 ';}
html[lang='zh-cn'] #search-vn + label:before {content: '\53d8 \4f53 \540d \79f0 ';}
html[lang='ru'] #search-vn + label:before {content: '\041d \0430 \0437 \0432 \0430 \043d \0438 \0435  \0432 \0430 \0440 \0438 \0430 \043d \0442 \0430 ';}
html[lang='pt-br'] #search-vn + label:before {content: 'Nome da Variante';}

html[lang='en'] #search-mn + label:before {content: 'Move Name';}
html[lang='ja'] #search-mn + label:before {content: '\5fc5 \6bba \6280 \540d ';}
html[lang='fr'] #search-mn + label:before {content: 'Nom de Coup';}
html[lang='de'] #search-mn + label:before {content: 'Angriffsname';}
html[lang='es'] #search-mn + label:before {content: 'Nombre del Movimiento';}
html[lang='ko'] #search-mn + label:before {content: '\ae30 \c220  \c774 \b984 ';}
html[lang='zh-cn'] #search-mn + label:before {content: '\62db \5f0f \540d \79f0 ';}
html[lang='ru'] #search-mn + label:before {content: '\041d \0430 \0437 \0432 \0430 \043d \0438 \0435  \041f \0440 \0438 \0435 \043c \0430 ';}
html[lang='pt-br'] #search-mn + label:before {content: 'Nome do Golpe';}

html[lang='en'] #search-cn + label:before {content: 'Catalyst Name';}
html[lang='ja'] #search-cn + label:before {content: '\30ad \30e3 \30bf \30ea \30b9 \30c8 \540d ';}
html[lang='fr'] #search-cn + label:before {content: 'Nom du Catalyseur';}
html[lang='de'] #search-cn + label:before {content: 'Katalysatorname';}
html[lang='es'] #search-cn + label:before {content: 'Nombre del Catalizador';}
html[lang='ko'] #search-cn + label:before {content: '\cd09 \b9e4  \c774 \b984 ';}
html[lang='zh-cn'] #search-cn + label:before {content: '\8f6c \5316 \7269 \540d \79f0 ';}
html[lang='ru'] #search-cn + label:before {content: '\041d \0430 \0437 \0432 \0430 \043d \0438 \0435  \041a \0430 \0442 \0430 \043b \0438 \0437 \0430 \0442 \043e \0440 \0430 ';}
html[lang='pt-br'] #search-cn + label:before {content: 'Nome do Catalisador';}

html[lang='en'] #search-d + label:before {content: 'Description';}
html[lang='ja'] #search-d + label:before {content: '\8aac \660e ';}
html[lang='fr'] #search-d + label:before {content: 'Description';}
html[lang='de'] #search-d + label:before {content: 'Beschreibung';}
html[lang='es'] #search-d + label:before {content: 'Descripci\00f3 n';}
html[lang='ko'] #search-d + label:before {content: '\c124 \ba85 ';}
html[lang='zh-cn'] #search-d + label:before {content: '\63cf \8ff0 ';}
html[lang='ru'] #search-d + label:before {content: '\041e \043f \0438 \0441 \0430 \043d \0438 \0435 ';}
html[lang='pt-br'] #search-d + label:before {content: 'Descri\00e7 \00e3 o';}

/* LOADING */

#loading {
    text-align: center;
    display: none;
}

.loading #loading {
    display: block;
}

#loading img {
    max-width: 90vw;
    max-height: 33vh;
}

#loading:after {
    font-size: xx-large;
    display: block;
    animation: fader 0.7s infinite;
}
html[lang='en'] #loading:after {content: 'LOADING...';}
html[lang='ja'] #loading:after {content: '\30ed \30fc \30c9 \4e2d ...';}
html[lang='fr'] #loading:after {content: 'CHARGEMENT...';}
html[lang='de'] #loading:after {content: 'LADE ...';}
html[lang='es'] #loading:after {content: 'CARGANDO...';}
html[lang='ko'] #loading:after {content: '\b85c \b529  \c911 \2026 ';}
html[lang='zh-cn'] #loading:after {content: '\6b63 \5728 \52a0 \8f7d \2026 ';}
html[lang='ru'] #loading:after {content: '\0417 \0410 \0413 \0420 \0423 \0417 \041a \0410 ...';}
html[lang='pt-br'] #loading:after {content: 'CARREGANDO...';}

@keyframes fader {
    0% {
        opacity: 0;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.error #loading:after {
    animation: none;
}
html[lang='en'] .error #loading:after {content: 'ERROR';}
html[lang='ja'] .error #loading:after {content: '\30a8 \30e9 \30fc ';}
html[lang='fr'] .error #loading:after {content: 'ERREUR';}
html[lang='de'] .error #loading:after {content: 'FEHLER';}
html[lang='es'] .error #loading:after {content: 'ERROR';}
html[lang='ko'] .error #loading:after {content: '\c624 \b958 ';}
html[lang='zh-cn'] .error #loading:after {content: '\9519 \8bef ';}
html[lang='ru'] .error #loading:after {content: '\041e \0428 \0418 \0411 \041a \0410 ';}
html[lang='pt-br'] .error #loading:after {content: 'ERRO';}

/* CARD */

.card {
    position: relative;
    background-color: #1b2a41;
    border: 3px double #ccb55a;
    display: grid;
    grid-template-columns: 1fr repeat(2, minmax(0, 1fr));
    grid-gap: 10px;
    padding: 10px;
}
.fighter.card {
    grid-template-areas:
        'img qt qt'
        'img atk hp'
        'img fs fs'
        'ca ca ca'
        'sa sa sa'
        'ma ma ma'
        'pa pa pa';
    grid-template-rows: repeat(7, min-content);
}
.move.card {
    grid-template-areas:
        'img mn mn'
        'img tb tb'
        'des des des';
    grid-auto-rows: min-content;
}
.catalyst.card {
    grid-template-areas:
        'mn mn mn'
        'des des des';
}
.card.hidden {
    display: none;
}
.card.locked {
    background-color: black;
    display: grid;
}

.loading .card {
    display: none;
}

.zoomed-out .card {
    font-size: x-small;
}

/* TODO: upon css-grid-2 release, change to `minmax(50%, 1fr) repeat(2, minmax(0, 1fr, min-wins))` */
.zoomed-in .card {
    font-size: x-large;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* AVATAR */

.avatar {
    width: 100%;
    grid-area: img;
    border-radius: 50%;
    margin: 10px auto 0 auto;
}

.frame {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    box-shadow: 0 0 2px 1px black;
    padding: 6px;
    margin: 0 auto -15px auto;
}
.zoomed-out .frame {
    width: 70px;
    height: 70px;
    padding: 5px;
    margin: 0 auto -13px auto;
}
.zoomed-in .frame {
    width: 100px;
    height: 100px;
    padding: 7px;
    margin: 0 auto -18px auto;
}
.bronze .frame {
    background-image: linear-gradient(#621 10%, #b76 20%, #843 40%, #b76 60%, #621 90%);
}
.silver .frame {
    background-image: linear-gradient(#889 10%, #eef 20%, #aab 40%, #eef 60%, #889 90%);
}
.gold .frame {
    background-image: linear-gradient(#da2 10%, #feb 20%, #fd8 40%, #feb 60%, #da2 90%);
}
.diamond.neutral .frame,
.diamond .neutral .frame {
    background-image: linear-gradient(#d9d 10%, #fff 20%, #fcf 40%, #fef 60%, #d9d 90%);
}
.diamond.fire .frame,
.diamond .fire .frame {
    background-image: linear-gradient(#d33 10%, #fff 20%, #f99 40%, #fee 60%, #d33 90%);
}
.diamond.water .frame,
.diamond .water .frame {
    background-image: linear-gradient(#6be 10%, #fff 20%, #ace 40%, #eff 60%, #6be 90%);
}
.diamond.wind .frame,
.diamond .wind .frame {
    background-image: linear-gradient(#8b3 10%, #fff 20%, #de9 40%, #efe 60%, #8b3 90%);
}
.diamond.dark .frame,
.diamond .dark .frame {
    background-image: linear-gradient(#95f 10%, #fff 20%, #caf 40%, #fef 60%, #95f 90%);
}
.diamond.light .frame,
.diamond .light .frame {
    background-image: linear-gradient(#dd6 10%, #fff 20%, #ffb 40%, #ffe 60%, #dd6 90%);
}

.backdrop {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: inset 0 0 2px 1px black;
}
.neutral .backdrop {background-image: radial-gradient(#ccc, #888);}
.fire .backdrop {background-image: radial-gradient(#fb7, #d00);}
.water .backdrop {background-image: radial-gradient(#5ff, #06c);}
.wind .backdrop {background-image: radial-gradient(#9f8, #082);}
.dark .backdrop {background-image: radial-gradient(#eae, #525);}
.light .backdrop {background-image: radial-gradient(#fff, #ec5);}
.neutral .unloaded .backdrop,
.neutral.unloaded .backdrop {background: url(image/RandomBackgroundTransparent.png) 0 0 / contain, radial-gradient(#ccc, #888);}
.fire .unloaded .backdrop,
.fire.unloaded .backdrop {background: url(image/RandomBackgroundTransparent.png) 0 0 / contain, radial-gradient(#fb7, #d00);}
.water .unloaded .backdrop,
.water.unloaded .backdrop {background: url(image/RandomBackgroundTransparent.png) 0 0 / contain, radial-gradient(#5ff, #06c);}
.wind .unloaded .backdrop,
.wind.unloaded .backdrop {background: url(image/RandomBackgroundTransparent.png) 0 0 / contain, radial-gradient(#9f8, #082);}
.dark .unloaded .backdrop,
.dark.unloaded .backdrop {background: url(image/RandomBackgroundTransparent.png) 0 0 / contain, radial-gradient(#eae, #525);}
.light .unloaded .backdrop,
.light.unloaded .backdrop {background: url(image/RandomBackgroundTransparent.png) 0 0 / contain, radial-gradient(#fff, #ec5);}

.backdrop.hallow1:after {
    background-image: url(image/official/Blood1.png);
}
.backdrop.hallow2:after {
    background-image: url(image/official/Blood2.png);
}
.backdrop.hallow3:after {
    background-image: url(image/official/Blood3.png);
}
.backdrop.hallow1:after, .backdrop.hallow2:after, .backdrop.hallow3:after {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
}

.birthday .backdrop:before {
    content: '\00a0*';
    position: absolute;
    left: 30%;
    top: -20%;
    width: 50%;
    height: 50%;
    background: linear-gradient(155deg,
        hotpink 9%,
        beige 11% 19%,
        skyblue 21% 29%,
        beige 31% 39%,
        hotpink 41% 49%,
        beige 51% 59%,
        skyblue 61% 69%,
        beige 71%
    );
    font-size: 50px;
    line-height: 15px;
    letter-spacing: -20px;
    border: 1px outset black;
    border-bottom-right-radius: 100%;
    transform: rotate(45deg) skew(15deg, 15deg);
    display: block;
}

.portrait {
    width: 151%;
    margin: -110% 0 0 -26%;
    pointer-events: none;
}
#rBlight .portrait {
    animation: rainbow 7s linear infinite;
}
#heat .backdrop:after {
    content: '';
    position: absolute;
    width: 151%;
    height: 500px;
    top: 0;
    margin: -110% 0 0 -26%;
    pointer-events: none;
    display: block;
    background-image: url(image/portrait/an/hSync.png);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-out;
}
#heat:hover .backdrop:after {
    opacity: 1;
    transition: opacity 8s 2s ease-in;
}
#wishfulEater:after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    left: -50px;
    display: block;
    pointer-events: none;
    animation:
        skullheart .3s steps(1) infinite,
        sine 1s ease-in-out alternate infinite;
}
#ratings-table #wishfulEater:after {
    transform: scale(0.4) translate(-40%);
}

@keyframes rainbow {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}
@keyframes skullheart {
    0%,
    100% {background: url(image/official/skullheart_idle01.png) 18px 19px / 117px no-repeat;}
    17% {background: url(image/official/skullheart_idle02.png) 0px 0px / 151px no-repeat;}
    33% {background: url(image/official/skullheart_idle03.png) 18px 3px / 130px no-repeat;}
    50% {background: url(image/official/skullheart_idle04.png) 18px 9px / 130px no-repeat;}
    67% {background: url(image/official/skullheart_idle05.png) 18px 19px / 127px no-repeat;}
    83% {background: url(image/official/skullheart_idle06.png) 0px 10px / 126px no-repeat;}
}
@keyframes sine {
    0% {
        top: -100px;
    }
    100% {
        top: -80px;
    }
}

.nameplate {
    position: relative;
    min-width: min-content;
    width: max-content;
    max-width: calc(100% - 10px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #3e2c29;
    text-align: center;
    border: 3px double #8f6151;
    box-shadow: 0 1px 1px 1px black;
    padding: 2px;
}

.zoomed-in .nameplate {
    font-size: medium;
}

.fighter-name {
    font-size: smaller;
}

/* BADGE */

.badge {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    grid-area: img;
}
.zoomed-out .badge {
    width: 80px;
    height: 80px;
}
.zoomed-in .badge {
    width: 140px;
    height: 140px;
}
.catalyst .badge {
    position: absolute;
    left: 0;
    top: 0;
    transform: none;
    width: 33%;
    height: 100%;
    overflow: hidden;
}

.sms .badge:before,
.sms .badge:after {
    content: '';
    background-size: contain;
    background-position: 6%;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
}
.sms .badge:after {
    top: 0;
    transform: scaleX(-1);
}
.sms.bronze .badge:before, .sms.bronze .badge:after {background-image: url(image/official/SpecialFrameBronze.png);}
.sms.silver .badge:before, .sms.silver .badge:after {background-image: url(image/official/SpecialFrameSilver.png);}
.sms.gold .badge:before, .sms.gold .badge:after {background-image: url(image/official/SpecialFrameGold.png);}

.bbs .badge:before {
    content: '';
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display: block;
}
.bbs.bronze .badge:before {
    filter: brightness(0.4) sepia(1) saturate(2) hue-rotate(325deg);
}
.bbs.gold .badge:before {
    filter: sepia(1) saturate(2);
}
.bb1 .badge:before {background-image: url(image/official/BB-Frame1.png);}
.bb2 .badge:before {background-image: url(image/official/BB-Frame2.png);}
.bb3 .badge:before {background-image: url(image/official/BB-Frame3.png);}

.symbol {
    position: absolute;
    width: 100%;
    display: block;
    z-index: 1;
    pointer-events: none;
}
.sms .symbol {
    left: 10%;
    top: -2%;
}
.bbs .symbol {
    left: 16%;
    top: -16%;
}
.move.bronze .symbol {
    filter: sepia(1) hue-rotate(325deg);
}
.move.gold .symbol {
    filter: sepia(1);
}
.catalyst .symbol {
    left: -15%;
    top: -15%;
    opacity: 0.1;
}

.title {
    grid-area: mn;
    margin: auto;
    z-index: 1;
}
.title.tagged:before {
    content: '';
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 0.2em;
    width: 1.3em;
    height: 1.3em;
    vertical-align: bottom;
    display: inline-block;
}
.an .title.tagged:before {background-image: url(image/official/Annie_MasteryIcon.png);}
.be .title.tagged:before {background-image: url(image/official/Beowulf_MasteryIcon.png);}
.bb .title.tagged:before {background-image: url(image/official/BigBand_MasteryIcon.png);}
.bd .title.tagged:before {background-image: url(image/official/BlackDahlia_MasteryIcon.png);}
.ce .title.tagged:before {background-image: url(image/official/Cerebella_MasteryIcon.png);}
.do .title.tagged:before {background-image: url(image/official/Double_MasteryIcon.png);}
.el .title.tagged:before {background-image: url(image/official/Eliza_MasteryIcon.png);}
.fi .title.tagged:before {background-image: url(image/official/Filia_MasteryIcon.png);}
.fu .title.tagged:before {background-image: url(image/official/Fukua_MasteryIcon.png);}
.ma .title.tagged:before {background-image: url(image/official/Marie_MasteryIcon.png);}
.mf .title.tagged:before {background-image: url(image/official/MsFortune_MasteryIcon.png);}
.pw .title.tagged:before {background-image: url(image/official/Painwheel_MasteryIcon.png);}
.pa .title.tagged:before {background-image: url(image/official/Parasoul_MasteryIcon.png);}
.pe .title.tagged:before {background-image: url(image/official/Peacock_MasteryIcon.png);}
.rf .title.tagged:before {background-image: url(image/official/Robofortune_MasteryIcon.png);}
.sq .title.tagged:before {background-image: url(image/official/Squigly_MasteryIcon.png);}
.um .title.tagged:before {background-image: url(image/official/Umbrella_MasteryIcon.png);}
.va .title.tagged:before {background-image: url(image/official/Valentine_MasteryIcon.png);}
.xx .title.tagged:before {background-image: url(image/official/Random_MasteryIcon.png);}
.neutral .title.tagged:before {background-image: url(image/official/ElementalIconNeutral.png);}
.fire .title.tagged:before {background-image: url(image/official/ElementalIconFire.png);}
.water .title.tagged:before {background-image: url(image/official/ElementalIconWater.png);}
.wind .title.tagged:before {background-image: url(image/official/ElementalIconWind.png);}
.light .title.tagged:before {background-image: url(image/official/ElementalIconLight.png);}
.dark .title.tagged:before {background-image: url(image/official/ElementalIconDark.png);}

/* QUOTE */

.quote {
    text-align: center;
    grid-area: qt;
    margin-top: auto;
}

/* RATING */

.rating {
    font-size: x-small;
    text-align: center;
    text-transform: uppercase;
    display: flex;
}
.zoomed-out .rating {
    font-size: xx-small;
}
.zoomed-in .rating {
    font-size: small;
}

.rating.hidden {
    display: none;
}

div.offense, div.defense {
    margin: auto;
    flex: 1;
}

div.offense:before, div.defense:before {
    font-size: initial;
    display: block;
}

html[lang='en'] .offense:before, html[lang='en'] #sort-offense + label:before {content: 'OFFENSE';}
html[lang='ja'] .offense:before, html[lang='ja'] #sort-offense + label:before {content: '\653b \6483 ';}
html[lang='fr'] .offense:before, html[lang='fr'] #sort-offense + label:before {content: 'ATTAQUE';}
html[lang='de'] .offense:before, html[lang='de'] #sort-offense + label:before {content: 'OFFENSIVE';}
html[lang='es'] .offense:before, html[lang='es'] #sort-offense + label:before {content: 'ATAQUE';}
html[lang='ko'] .offense:before, html[lang='ko'] #sort-offense + label:before {content: '\acf5 \aca9 ';}
html[lang='zh-cn'] .offense:before, html[lang='zh-cn'] #sort-offense + label:before {content: '\8fdb \653b ';}
html[lang='ru'] .offense:before, html[lang='ru'] #sort-offense + label:before {content: '\041d \0410 \0421 \0422 \0423 \041f \041b \0415 \041d \0418 \0415 ';}
html[lang='pt-br'] .offense:before, html[lang='pt-br'] #sort-offense + label:before {content: 'ATAQUE';}

html[lang='en'] .defense:before, html[lang='en'] #sort-defense + label:before {content: 'DEFENSE';}
html[lang='ja'] .defense:before, html[lang='ja'] #sort-defense + label:before {content: '\9632 \885b ';}
html[lang='fr'] .defense:before, html[lang='fr'] #sort-defense + label:before {content: 'D\00c9 FENSE';}
html[lang='de'] .defense:before, html[lang='de'] #sort-defense + label:before {content: 'DEFENSIVE';}
html[lang='es'] .defense:before, html[lang='es'] #sort-defense + label:before {content: 'DEFENSA';}
html[lang='ko'] .defense:before, html[lang='ko'] #sort-defense + label:before {content: '\bc29 \c5b4 ';}
html[lang='zh-cn'] .defense:before, html[lang='zh-cn'] #sort-defense + label:before {content: '\9632 \5fa1 ';}
html[lang='ru'] .defense:before, html[lang='ru'] #sort-defense + label:before {content: '\041e \0411 \041e \0420 \041e \041d \0410 ';}
html[lang='pt-br'] .defense:before, html[lang='pt-br'] #sort-defense + label:before {content: 'DEFESA';}

.offense:after,
.defense:after {
    color: gray;
    display: block;
}

html[lang='en'] div.offense:after, html[lang='en'] div.defense:after {content: attr(data-count) ' votes';}
html[lang='ja'] div.offense:after, html[lang='ja'] div.defense:after {content: attr(data-count) ' \6295 \7968 ';}
html[lang='fr'] div.offense:after, html[lang='fr'] div.defense:after {content: attr(data-count) ' votes';}
html[lang='de'] div.offense:after, html[lang='de'] div.defense:after {content: attr(data-count) ' stimmen';}
html[lang='es'] div.offense:after, html[lang='es'] div.defense:after {content: attr(data-count) ' votos';}
html[lang='ko'] div.offense:after, html[lang='ko'] div.defense:after {content: attr(data-count) ' \d22c \d45c \d558 \b2e4 ';}
html[lang='zh-cn'] div.offense:after, html[lang='zh-cn'] div.defense:after {content: attr(data-count) ' \7968 ';}
html[lang='ru'] div.offense:after, html[lang='ru'] div.defense:after {content: attr(data-count) ' \0433 \043e \043b \043e \0441 \043e \0432 ';}
html[lang='pt-br'] div.offense:after, html[lang='pt-br'] div.defense:after {content: attr(data-count) ' votos';}

.star {
    position: relative;
    width: 24px;
    height: 24px;
    color: skyblue;
    vertical-align: middle;
    display: inline-block;
    margin: 0.5em 0 1em 0;
    cursor: pointer;
}
.zoomed-out .star {
    width: 20px;
    height: 20px;
}
.zoomed-in .star {
    width: 28px;
    height: 28px;
}

.star.voting img:first-child {
    filter: saturate(2) hue-rotate(150deg);
}

.star.voting img:last-child {
    opacity: 0;
}

.star.not-voting img:last-child {
    opacity: 0.3;
}

.star.voted:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 45%;
    transform: translateX(-50%);
    border-left: 0.4em solid transparent;
    border-right: 0.4em solid transparent;
    border-bottom: 0.5em solid skyblue;
    z-index: 1;
    pointer-events: none;
}
.star.voted.animated:before {
    border-bottom-color: transparent;
    animation: vote-success-tail 0.5s 1s ease-out forwards;
}

@keyframes vote-success-tail {
    100% {
        border-bottom-color: skyblue;
    }
}

.star.voted:after {
    position: absolute;
    left: 45%;
    bottom: -1em;
    min-width: 2em;
    transform: translateX(-50%);
    background-color: skyblue;
    color: #1b2a41;
    text-shadow: none;
    line-height: 0.9em;
    white-space: pre;
    padding: 0.1em;
    border-radius: 2px;
    z-index: 1;
    pointer-events: none;
}
.star.voted.animated:after {
    bottom: 0em;
    background-image: url(image/official/Checkmark.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent;
    line-height: 2em;
    animation: vote-success-body 0.5s 1s ease-out forwards;
}

@keyframes vote-success-body {
    100% {
        bottom: -1em;
        background-color: skyblue;
        color: #1b2a41;
        line-height: 0.9em;
    }
}

html[lang='en'] .star.voted:after {content: 'You';}
html[lang='ja'] .star.voted:after {content: '\541b \306f ';}
html[lang='fr'] .star.voted:after {content: 'Vous';}
html[lang='de'] .star.voted:after {content: 'Sie';}
html[lang='es'] .star.voted:after {content: 'T\00fa ';}
html[lang='ko'] .star.voted:after {content: '\b2f9 \c2e0 ';}
html[lang='zh-cn'] .star.voted:after {content: '\60a8 ';}
html[lang='ru'] .star.voted:after {content: '\0412 \044b ';}
html[lang='pt-br'] .star.voted:after {content: 'Voc\00ea ';}

.star img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
}
.star img:first-child {
    filter: brightness(0);
}

/* STATS */

.atk:before,
.hp:before,
.fs:before {
    padding-left: 1.4em;
}

.atk {
    grid-area: atk;
    margin: auto;
}
.atk:before {
    background-image: url(image/official/PowerIcon.png);
}
html[lang='en'] .atk:before {content: 'ATK';}
html[lang='ja'] .atk:before {content: '\653b \6483 ';}
html[lang='fr'] .atk:before {content: 'ATQ';}
html[lang='de'] .atk:before {content: 'ATK';}
html[lang='es'] .atk:before {content: 'ATQ';}
html[lang='ko'] .atk:before {content: '\acf5 \aca9 \b825 ';}
html[lang='zh-cn'] .atk:before {content: '\653b \51fb ';}
html[lang='ru'] .atk:before {content: '\0410 \0422 ';}
html[lang='pt-br'] .atk:before {content: 'ATQ';}

.hp {
    grid-area: hp;
    margin: auto;
}
.hp:before {
    background-image: url(image/official/HealthIcon.png);
}
html[lang='en'] .hp:before {content: 'HP';}
html[lang='ja'] .hp:before {content: '\4f53 \529b ';}
html[lang='fr'] .hp:before {content: 'PV';}
html[lang='de'] .hp:before {content: 'GES';}
html[lang='es'] .hp:before {content: 'PV';}
html[lang='ko'] .hp:before {content: '\ccb4 \b825 ';}
html[lang='zh-cn'] .hp:before {content: '\8840 \91cf ';}
html[lang='ru'] .hp:before {content: '\0417 \0414 ';}
html[lang='pt-br'] .hp:before {content: 'PV';}

.fs {
    grid-area: fs;
    margin: 0 auto;
}
.neutral .fs:before {background-image: url(image/official/ElementalIconNeutral.png);}
.fire .fs:before {background-image: url(image/official/ElementalIconFire.png);}
.water .fs:before {background-image: url(image/official/ElementalIconWater.png);}
.wind .fs:before {background-image: url(image/official/ElementalIconWind.png);}
.light .fs:before {background-image: url(image/official/ElementalIconLight.png);}
.dark .fs:before {background-image: url(image/official/ElementalIconDark.png);}
html[lang='en'] .fs:before {content: 'FIGHTER SCORE';}
html[lang='ja'] .fs:before {content: '\30d5 \30a1 \30a4 \30bf \30fc \30fb \30b9 \30b3 \30a2 ';}
html[lang='fr'] .fs:before {content: 'SCORE';}
html[lang='de'] .fs:before {content: 'KAMPFPUNKTE';}
html[lang='es'] .fs:before {content: 'PUNTUACI\00d3 N ';}
html[lang='ko'] .fs:before {content: '\c804 \d22c \b825 ';}
html[lang='zh-cn'] .fs:before {content: '\6597 \58eb \79ef \5206 ';}
html[lang='ru'] .fs:before {content: '\0411 \041e \0415 \0412 \041e \0419  \0421 \0427 \0415 \0422 ';}
html[lang='pt-br'] .fs:before {content: 'PONTUA\00c7 \00c3 O';}

/* TABLE */

.table {
    box-shadow: 0 0 1px black;
    grid-area: tb;
}
.table tr:nth-child(2n) {
    background-color: #314c73;
}
.table tr:nth-child(2n + 1) {
    background-color: #263b5a;
}
.table td {
    padding: 2px 4px;
}

html[lang='en'] .unblockable:before {content: 'UNBLOCKABLE';}
html[lang='ja'] .unblockable:before {content: '\30ac \30fc \30c9 \4e0d \53ef ';}
html[lang='fr'] .unblockable:before {content: 'INBLOCABLE';}
html[lang='de'] .unblockable:before {content: 'UNAUFHALTSAM';}
html[lang='es'] .unblockable:before {content: 'IMBLOQUEABLE';}
html[lang='ko'] .unblockable:before {content: '\bc29 \c5b4  \bd88 \ac00 ';}
html[lang='zh-cn'] .unblockable:before {content: '\4e0d \53ef \683c \6321 ';}
html[lang='ru'] .unblockable:before {content: '\041d \0415 \0411 \041b \041e \041a \0418 \0420 \0423 \0415 \041c \042b \0419 ';}
html[lang='pt-br'] .unblockable:before {content: 'INDEFENSAVEL';}

.plus {
    width: 12px;
    margin: 0 2px;
}

html[lang='en'] .damage:before {content: 'DAMAGE';}
html[lang='ja'] .damage:before {content: '\30c0 \30e1 \30fc \30b8 :';}
html[lang='fr'] .damage:before {content: 'D\00c9 G\00c2 TS';}
html[lang='de'] .damage:before {content: 'SCHADEN';}
html[lang='es'] .damage:before {content: 'DA\00d1 O';}
html[lang='ko'] .damage:before {content: '\d53c \d574 \b7c9 ';}
html[lang='zh-cn'] .damage:before {content: '\4f24 \5bb3 ';}
html[lang='ru'] .damage:before {content: '\0423 \0420 \041e \041d ';}
html[lang='pt-br'] .damage:before {content: 'DANO';}

html[lang='en'] .none:before {content: 'NONE';}
html[lang='ja'] .none:before {content: '\306a \3057 ';}
html[lang='fr'] .none:before {content: 'VIDE';}
html[lang='de'] .none:before {content: 'KEINER';}
html[lang='es'] .none:before {content: 'NADA';}
html[lang='ko'] .none:before {content: '\c5c6 \c74c ';}
html[lang='zh-cn'] .none:before {content: '\65e0 ';}
html[lang='ru'] .none:before {content: '\041e \0422 \0421 \0423 \0422 \0421 \0422 \0412 \0423 \0415 \0422 ';}
html[lang='pt-br'] .none:before {content: 'NENHUM';}

html[lang='en'] .very-low:before {content: 'VERY LOW';}
html[lang='ja'] .very-low:before {content: '\3068 \3066 \3082 \4f4e \3044 ';}
html[lang='fr'] .very-low:before {content: 'TR\00c8 S FAIBLE';}
html[lang='de'] .very-low:before {content: 'MINIMAL';}
html[lang='es'] .very-low:before {content: 'MUY BAJO';}
html[lang='ko'] .very-low:before {content: '\c544 \c8fc  \b0ae \c74c ';}
html[lang='zh-cn'] .very-low:before {content: '\975e \5e38 \4f4e ';}
html[lang='ru'] .very-low:before {content: '\041e \0427 \0415 \041d \042c  \041d \0418 \0417 \041a \041e \0415 ';}
html[lang='pt-br'] .very-low:before {content: 'MUITO FRACO';}

html[lang='en'] .low:before {content: 'LOW';}
html[lang='ja'] .low:before {content: '\4f4e \3044 ';}
html[lang='fr'] .low:before {content: 'FAIBLE';}
html[lang='de'] .low:before {content: 'GERING';}
html[lang='es'] .low:before {content: 'BAJO';}
html[lang='ko'] .low:before {content: '\c57d \d568 ';}
html[lang='zh-cn'] .low:before {content: '\4f4e ';}
html[lang='ru'] .low:before {content: '\041d \0418 \0417 \041a \041e \0415 ';}
html[lang='pt-br'] .low:before {content: 'FRACO';}

html[lang='en'] .medium:before {content: 'MED';}
html[lang='ja'] .medium:before {content: '\4e2d \7a0b \5ea6 ';}
html[lang='fr'] .medium:before {content: 'MOYEN';}
html[lang='de'] .medium:before {content: 'MITTEL';}
html[lang='es'] .medium:before {content: 'MEDIO';}
html[lang='ko'] .medium:before {content: '\bcf4 \d1b5 ';}
html[lang='zh-cn'] .medium:before {content: '\4e2d \7b49 ';}
html[lang='ru'] .medium:before {content: '\0421 \0420 \0415 \0414 \041d \0415 \0415 ';}
html[lang='pt-br'] .medium:before {content: 'M\00c9 DIO';}

html[lang='en'] .high:before {content: 'HIGH';}
html[lang='ja'] .high:before {content: '\9ad8 \3044 ';}
html[lang='fr'] .high:before {content: 'HAUT';}
html[lang='de'] .high:before {content: 'HOCH';}
html[lang='es'] .high:before {content: 'ALTO';}
html[lang='ko'] .high:before {content: '\ac15 \d568 ';}
html[lang='zh-cn'] .high:before {content: '\9ad8 ';}
html[lang='ru'] .high:before {content: '\0412 \042b \0421 \041e \041a \041e \0415 ';}
html[lang='pt-br'] .high:before {content: 'FORTE';}

html[lang='en'] .very-high:before {content: 'VERY HIGH';}
html[lang='ja'] .very-high:before {content: '\3068 \3066 \3082 \9ad8 \3044 ';}
html[lang='fr'] .very-high:before {content: 'TR\00c8 S HAUT';}
html[lang='de'] .very-high:before {content: 'EXTREM';}
html[lang='es'] .very-high:before {content: 'MUY ALTO';}
html[lang='ko'] .very-high:before {content: '\b9e4 \c6b0  \ac15 \d568 ';}
html[lang='zh-cn'] .very-high:before {content: '\975e \5e38 \9ad8 ';}
html[lang='ru'] .very-high:before {content: '\041e \0427 \0415 \041d \042c  \0412 \042b \0421 \041e \041a \041e \0415 ';}
html[lang='pt-br'] .very-high:before {content: 'MUITO FORTE';}

html[lang='en'] .ultra:before {content: 'ULTRA';}
html[lang='ja'] .ultra:before {content: '\6700 \9ad8 ';}
html[lang='fr'] .ultra:before {content: 'ULTRA';}
html[lang='de'] .ultra:before {content: 'ULTRA';}
html[lang='es'] .ultra:before {content: 'ULTRA';}
html[lang='ko'] .ultra:before {content: '\cd08 \ac15 \b825 ';}
html[lang='zh-cn'] .ultra:before {content: '\8d85 \9ad8 ';}
html[lang='ru'] .ultra:before {content: '\0423 \041b \042c \0422 \0420 \0410 ';}
html[lang='pt-br'] .ultra:before {content: 'ULTRA';}

html[lang='en'] .cooldown:before {content: 'COOLDOWN';}
html[lang='ja'] .cooldown:before {content: '\30af \30fc \30eb \30c0 \30a6 \30f3 :';}
html[lang='fr'] .cooldown:before {content: 'REFROIDISSEMENT';}
html[lang='de'] .cooldown:before {content: 'ABKLINGZEIT';}
html[lang='es'] .cooldown:before {content: 'RECARGA';}
html[lang='ko'] .cooldown:before {content: '\c7ac \c0ac \c6a9  \b300 \ae30  \c2dc \ac04 ';}
html[lang='zh-cn'] .cooldown:before {content: '\51b7 \5374 \65f6 \95f4 ';}
html[lang='ru'] .cooldown:before {content: '\041f \0415 \0420 \0415 \0417 \0410 \0420 \042f \0414 \041a \0410 ';}
html[lang='pt-br'] .cooldown:before {content: 'REATIVA\00c7 \00c3 O';}

html[lang='en'] .seconds:before {content: 'seconds';}
html[lang='ja'] .seconds:before {content: '\79d2 ';}
html[lang='fr'] .seconds:before {content: 'secondes';}
html[lang='de'] .seconds:before {content: 'sekunden';}
html[lang='es'] .seconds:before {content: 'segundos';}
html[lang='ko'] .seconds:before {content: '\cd08 ';}
html[lang='zh-cn'] .seconds:before {content: '\79d2 ';}
html[lang='ru'] .seconds:before {content: '\0441 \0435 \043a \0443 \043d \0434 ';}
html[lang='pt-br'] .seconds:before {content: 'segundos';}

/*
html[lang='en'] .upgrade-price:before {content: 'UPGRADE';}
html[lang='ja'] .upgrade-price:before {content: '\30a2 \30c3 \30d7 \30b0 \30ec \30fc \30c9 ';}
html[lang='fr'] .upgrade-price:before {content: 'AM\00c9 LIORER';}
html[lang='de'] .upgrade-price:before {content: 'VERBESSERN';}
html[lang='es'] .upgrade-price:before {content: 'MEJORAR';}
html[lang='ko'] .upgrade-price:before {content: '\c5c5 \adf8 \b808 \c774 \b4dc ';}
html[lang='zh-cn'] .upgrade-price:before {content: '\5347 \7ea7 ';}
html[lang='ru'] .upgrade-price:before {content: '\0423 \041b \0423 \0427 \0428 \0415 \041d \0418 \0415 ';}
html[lang='pt-br'] .upgrade-price:before {content: 'MELHORAR';}

html[lang='en'] .sell-price:before {content: 'SELL';}
html[lang='ja'] .sell-price:before {content: '\58f2 \308b ';}
html[lang='fr'] .sell-price:before {content: 'VENDRE';}
html[lang='de'] .sell-price:before {content: 'VERKAUFEN';}
html[lang='es'] .sell-price:before {content: 'VENDER';}
html[lang='ko'] .sell-price:before {content: '\d314 \ae30 ';}
html[lang='zh-cn'] .sell-price:before {content: '\51fa \552e ';}
html[lang='ru'] .sell-price:before {content: '\041f \0420 \041e \0414 \0410 \0422 \042c ';}
html[lang='pt-br'] .sell-price:before {content: 'VENDER';}
*/

/* ABILITIES */

.ability {
    background-color: #263b5a;
    box-shadow: 0 0 1px black;
    display: grid;
    grid-gap: 6px;
    padding: 6px;
}
.ability.collapsed {
    background-color: #0f1824;
}

.ability.ca {
    grid-area: ca;
}

html[lang='en'] .fighter.card .ca .ability-type:before, html[lang='en'] .ca .ability-type:before {content: 'CHARACTER ABILITY';}
html[lang='ja'] .fighter.card .ca .ability-type:before, html[lang='ja'] .ca .ability-type:before {content: '\30ad \30e3 \30e9 \30af \30bf \30fc \306e \30a2 \30d3 \30ea \30c6 \30a3 ';}
html[lang='fr'] .fighter.card .ca .ability-type:before, html[lang='fr'] .ca .ability-type:before {content: 'CAPACIT\00c9  DU PERSONNAGE';}
html[lang='de'] .fighter.card .ca .ability-type:before, html[lang='de'] .ca .ability-type:before {content: 'CHARAKTER-FERTIGKEIT';}
html[lang='es'] .fighter.card .ca .ability-type:before, html[lang='es'] .ca .ability-type:before {content: 'HABILIDAD DE PERSONAJE';}
html[lang='ko'] .fighter.card .ca .ability-type:before, html[lang='ko'] .ca .ability-type:before {content: '\ce90 \b9ad \d130  \b2a5 \b825 ';}
html[lang='zh-cn'] .fighter.card .ca .ability-type:before, html[lang='zh-cn'] .ca .ability-type:before {content: '\89d2 \8272 \6280 ';}
html[lang='ru'] .fighter.card .ca .ability-type:before, html[lang='ru'] .ca .ability-type:before {content: '\0423 \041c \0415 \041d \0418 \0415  \041f \0415 \0420 \0421 \041e \041d \0410 \0416 \0410 ';}
html[lang='pt-br'] .fighter.card .ca .ability-type:before, html[lang='pt-br'] .ca .ability-type:before {content: 'HABILIDADE DO PERSONAGEM';}

.ability.sa {
    grid-area: sa;
}

html[lang='en'] .fighter.card .sa .ability-type:before, html[lang='en'] .sa .ability-type:before {content: 'Signature Ability';}
html[lang='ja'] .fighter.card .sa .ability-type:before, html[lang='ja'] .sa .ability-type:before {content: '\56fa \6709 \80fd \529b ';}
html[lang='fr'] .fighter.card .sa .ability-type:before, html[lang='fr'] .sa .ability-type:before {content: 'Aptitude Signature';}
html[lang='de'] .fighter.card .sa .ability-type:before, html[lang='de'] .sa .ability-type:before {content: 'Markenzeichen';}
html[lang='es'] .fighter.card .sa .ability-type:before, html[lang='es'] .sa .ability-type:before {content: 'Habilidad caracter\00ed stica';}
html[lang='ko'] .fighter.card .sa .ability-type:before, html[lang='ko'] .sa .ability-type:before {content: '\ace0 \c720  \b2a5 \b825 ';}
html[lang='zh-cn'] .fighter.card .sa .ability-type:before, html[lang='zh-cn'] .sa .ability-type:before {content: '\62db \724c \6280 ';}
html[lang='ru'] .fighter.card .sa .ability-type:before, html[lang='ru'] .sa .ability-type:before {content: '\041a \043b \044e \0447 \0435 \0432 \043e \0435  \0443 \043c \0435 \043d \0438 \0435 ';}
html[lang='pt-br'] .fighter.card .sa .ability-type:before, html[lang='pt-br'] .sa .ability-type:before {content: 'Habilidade Caracter\00ed stica';}

.ability.ma {
    grid-area: ma;
}

html[lang='en'] .fighter.card .ma .ability-type:before, html[lang='en'] .ma .ability-type:before {content: 'MARQUEE ABILITY';}
html[lang='ja'] .fighter.card .ma .ability-type:before, html[lang='ja'] .ma .ability-type:before {content: '\30b9 \30bf \30fc \30fb \30d1 \30ef \30fc ';}
html[lang='fr'] .fighter.card .ma .ability-type:before, html[lang='fr'] .ma .ability-type:before {content: 'APTITUDE R\00c9 PUTATION';}
html[lang='de'] .fighter.card .ma .ability-type:before, html[lang='de'] .ma .ability-type:before {content: 'PRUNKFERTIGKEIT';}
html[lang='es'] .fighter.card .ma .ability-type:before, html[lang='es'] .ma .ability-type:before {content: 'CAPACIDAD DE CARTEL';}
html[lang='ko'] .fighter.card .ma .ability-type:before, html[lang='ko'] .ma .ability-type:before {content: '\ad81 \adf9  \b2a5 \b825 ';}
html[lang='zh-cn'] .fighter.card .ma .ability-type:before, html[lang='zh-cn'] .ma .ability-type:before {content: '\5929 \5143 \6280 ';}
html[lang='ru'] .fighter.card .ma .ability-type:before, html[lang='ru'] .ma .ability-type:before {content: '\0423 \041d \0418 \041a . \0421 \041f \041e \0421 \041e \0411 \041d .';}
html[lang='pt-br'] .fighter.card .ma .ability-type:before, html[lang='pt-br'] .ma .ability-type:before {content: 'HABILIDADE SUPERIOR';}

.ability.pa {
    grid-area: pa;
}

html[lang='en'] .fighter.card .pa .ability-type:before, html[lang='en'] .pa .ability-type:before {content: 'PRESTIGE ABILITY';}
html[lang='ja'] .fighter.card .pa .ability-type:before, html[lang='ja'] .pa .ability-type:before {content: 'PRESTIGE ABILITY';}
html[lang='fr'] .fighter.card .pa .ability-type:before, html[lang='fr'] .pa .ability-type:before {content: 'PRESTIGE ABILITY';}
html[lang='de'] .fighter.card .pa .ability-type:before, html[lang='de'] .pa .ability-type:before {content: 'PRESTIGE ABILITY';}
html[lang='es'] .fighter.card .pa .ability-type:before, html[lang='es'] .pa .ability-type:before {content: 'PRESTIGE ABILITY';}
html[lang='ko'] .fighter.card .pa .ability-type:before, html[lang='ko'] .pa .ability-type:before {content: 'PRESTIGE ABILITY';}
html[lang='zh-cn'] .fighter.card .pa .ability-type:before, html[lang='zh-cn'] .pa .ability-type:before {content: 'PRESTIGE ABILITY';}
html[lang='ru'] .fighter.card .pa .ability-type:before, html[lang='ru'] .pa .ability-type:before {content: 'PRESTIGE ABILITY';}
html[lang='pt-br'] .fighter.card .pa .ability-type:before, html[lang='pt-br'] .pa .ability-type:before {content: 'PRESTIGE ABILITY';}

.ability-title {
    cursor: pointer;
}
.ability.collapsed .ability-title {
    opacity: 0.5;
}

.description {
    background-color: #314c73;
    font-size: smaller;
    white-space: pre-line;
    box-shadow: 0 0 1px black;
    padding: 6px;
    z-index: 1;
}
.ability.collapsed .description {
    display: none;
}
.move .description,
.catalyst .description {
    grid-area: des;
}

.description span {
    font-weight: bold;
}
.number {
    color: lime;
}
.overstuffed {
    color: #00d7f9;
}
.ravenous {
    color: #ff1a1a;
}
.revive {
    color: #40eff4;
}
.incinerate {
    color: #ff9d01;
}

/* WIKIA */

.wikia {
    position: absolute;
    right: 0;
    opacity: 0.5;
    margin: 6px;
}

.wikia:after {
    content: '';
    width: 14px;
    height: 14px;
    background-image: url(image/official/icon_externalsite.png);
    background-size: contain;
    display: block;
}

/* GEAR */

.gear {
    position: absolute;
    width: 40px;
    height: 40px;
    background-image: url(image/official/GearIcon.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 40px;
    margin: 6px;
}
.zoomed-out .gear{
    width: 32px;
    height: 32px;
    line-height: 32px;
}
.zoomed-in .gear{
    width: 48px;
    height: 48px;
    line-height: 48px;
}

.gear:after {
    content: attr(data-value);
    text-shadow: 0 0 3px black;
}

/* LOCK */

.lock {
    position: absolute;
    width: 20px;
    opacity: 0.5;
    padding: 6px;
    cursor: pointer;
}
.move .lock,
.catalyst .lock {
    right: 0;
}
.zoomed-out .lock {
    width: 16px;
    padding: 4px;
}
.zoomed-in .lock {
    width: 24px;
    padding: 8px;
}
.locked .lock {
    opacity: 1;
}

/* Scribble Cat */

.cat-dolly {
    position: fixed;
    left: 50%;
    bottom: 0;
    height: 64px;
    width: 25%;
    min-width: 200px;
    pointer-events: none;
    z-index: 1;
    animation:
        intrare 400ms ease-out,
        exire 5s 3000ms linear forwards;
}

.cat {
    position: absolute;
    height: 64px;
    width: 66px;
    right: 0;
    background-image: url(image/cat.png);
    background-size: cover;
    animation:
        gyroscope 400ms ease-out,
        befuddle 800ms 800ms steps(1) 2 forwards,
        scurry 100ms 3000ms steps(2) infinite;
}

@keyframes intrare {
    0% {
        opacity: 0;
        transform: rotate(-180deg);
    }
    25% {
        opacity: 1;
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes gyroscope {
    0% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes befuddle {
    0% {
        transform: scaleX(1);
    }
    50%, 100% {
        transform: scaleX(-1);
    }
}

@keyframes scurry {
    0% {
        background-position: 0px;
    }
    100% {
        background-position: 132px;
    }
}

@keyframes exire {
    0% {
        left: 50%;
        transform: translate(0%);
    }
    100% {
        left: -1%; /* just to make sure it's offscreen */
        transform: translate(-100%);
    }
}