:root {
    --iv-best-color: #3C8AFF;
    --iv-worst-color: #76ADFF;
}

/*Form*/
.calculator-pkmn__form {
    grid-template-areas: "base" "appraisal" "evaluate";
}

/*Pkmn*/
.calculator-pkmn__base {
    grid-area: base;
}

/*Appraisal*/
.calculator-pkmn__appraisal {
    grid-area: appraisal;
}

button.calculator-button__team {
    width: 100%;
    height: 60px;
    padding: 0;
    margin-right: 10px;
    margin-bottom: 0;
}

button.calculator-button__team:last-child {
    margin-right: 0;
}

.calculator-button__team-icon {
    width: 40px;
    height: 40px;
    background: url("../images/pkmn_go/team_logos.png") 0/120px no-repeat;
}

.calculator-button__team-icon--mystic {
    background-position-x: 0;
}

.calculator-button__team-icon--instinct {
    background-position-x: -40px;
}

.calculator-button__team-icon--valor {
    background-position-x: -80px;
}

/*Evaluate*/
.calculator-pkmn__evaluate {
    grid-area: evaluate;
}

/*Response*/
.response {
    grid-template-columns: 1fr;
    grid-template-areas: "art" "power" "advice" "share" "iv" "cp" "cost" "battle";
}

/*Art*/
.art {
    grid-area: art;
}

span.art-icon__pkmn {
    width: 50px;
    height: 50px;
}

/*Power*/
.power {
    width: 100%;
    grid-area: power;
}

.power__background-c {
    height: 70px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.power__background {
    width: 100%;
    height: 25px;
    background-color: #ecf4ff;
    border-radius: 10px;
    position: relative;
}

.power__bar {
    width: 0;
    height: 25px;
    border-radius: 10px;
    position: absolute;
    transition: 1.2s ease-in-out;
}

.power__bar--best {
    background-color: var(--iv-best-color);
}

.power__bar--worst {
    background-color: var(--iv-worst-color);
}

.power__bar-percent {
    width: 100%;
    text-align: right;
    font-weight: 700;
    line-height: 0;
    display: none;
    position: absolute;
}

.power__bar-percent--best {
    color: var(--iv-best-color);
    font-size: 2.4em;
    top: -15px;
}

.power__bar-percent--worst {
    color: var(--iv-worst-color);
    font-size: 1.8em;
    bottom: -10px;
}

.power-button__same-pkmn {
    width: 25px;
    height: 25px;
    background: center/contain no-repeat;
    margin-left: 5px;
}

/*Advice*/
.advice {
    grid-area: advice;
}

/*Share*/
.share {
    grid-area: share;
}

.result__share__text__container,
.result__share__link__container {
    margin-bottom: 10px;
}

.result__share__link__field {
    color: var(--jn-color-gray-3);
    font-size: 1em;
    font-weight: 400;
}

/*IV*/
.iv {
    grid-area: iv;
}

span.iv-icon__stat {
    background: url("../images/pkmn_go/stat_icons.png") 0/53px no-repeat;
}

span.iv-icon__stat--stamina {
    background-position-x: 0;
}

span.iv-icon__stat--attack {
    background-position-x: -18px;
}

span.iv-icon__stat--defense {
    background-position-x: -36px;
}

td.iv-power__worst {
    color: var(--iv-worst-color);
}

td.iv-power__best {
    color: var(--iv-best-color);
}

/*CP*/
.cp {
    grid-area: cp;
}

th.cp-percent__worst {
    color: var(--iv-worst-color);
}

th.cp-percent__best {
    color: var(--iv-best-color);
}

.cp-pkmn {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cp-pkmn__art {
    width: 35px;
    height: 35px;
    background: center/contain no-repeat;
    margin-bottom: 5px;
}

.cp-pkmn__name {
    color: #959CA3;
    font-size: .6em;
    font-weight: 500;
}

/*Cost*/
.cost {
    grid-area: cost;
}

span.cost-icon__stardust {
    height: 22px;
    background-image: url("../images/pkmn_go/stardust_vector.png");
}

.cost-cp__worst {
    color: var(--iv-worst-color);

    font-weight: 500;
}

.cost-cp__best {
    color: var(--iv-best-color);
    font-weight: 500;
}

/*Battle*/
.battle {
    grid-area: battle;
}

/*Tablet*/
@media only screen and (min-width: 768px) {
    /*Form*/
    .calculator-pkmn__form {
        grid-template-columns: repeat(2, minmax(30%, 500px));
        grid-template-areas: "base appraisal" "evaluate evaluate";
    }

    /*Evaluate*/
    .calculator-pkmn__evaluate {
        display: flex;
        justify-content: center;
    }

    /*Response*/
    .response {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: "art art art art" "power power power power" "advice advice advice share" "iv iv iv iv" "cost cost cost cp" "battle battle battle cp";
    }
}

/*HD*/
@media only screen and (min-width: 1024px) {
    /*Response*/
    .response {
        grid-template-columns: repeat(5, 1fr);
        grid-template-areas: "art art art art art" "power power power power power" "advice advice advice share share" "cp cp iv iv iv" "cost cost cost battle battle";
    }
}