/* --------------------------------------------------
   General
-------------------------------------------------- */

body {
    font-family: Arial, sans-serif;
    margin: 30px;
    background: #f5f5f5;
    color: #222;
}

h1 {
    margin-bottom: 25px;
}

button {
    padding: 8px 14px;
    border: 1px solid #999;
    border-radius: 6px;
    background: white;
    cursor: pointer;
}

button:hover:not(:disabled) {
    background: #eee;
}

button:disabled {
    opacity: 0.5;
    cursor: default;
}

input {
    padding: 6px 8px;
    border: 1px solid #aaa;
    border-radius: 5px;
}


/* --------------------------------------------------
   Visibility
-------------------------------------------------- */

.hidden {
    display: none !important;
}


/* --------------------------------------------------
   Initial setup
-------------------------------------------------- */

#initial-setup {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

#initial-setup label {
    display: flex;
    align-items: center;
    gap: 7px;
}


/* --------------------------------------------------
   Generation controls
-------------------------------------------------- */

#generation-controls {
    display: flex;
    align-items: center;
    gap: 20px;

    margin: 20px 0;
    padding: 15px;

    border: 1px solid #ccc;
    border-radius: 10px;

    background: white;
}

#generation-controls label {
    display: flex;
    align-items: center;
    gap: 7px;
}


/* --------------------------------------------------
   Draft status
-------------------------------------------------- */

#draft-status {
    margin: 20px 0;
    padding: 15px;

    border: 2px solid #333;
    border-radius: 10px;

    background: white;
}

#draft-status h2 {
    margin-top: 0;
}

#draft-status button {
    margin-right: 8px;
}


/* --------------------------------------------------
   Teams
-------------------------------------------------- */

#teams {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    margin: 30px 0;
}

.team {
    flex: 1;
    min-width: 250px;

    padding: 0;

    border: 2px solid var(--team-color);
    border-radius: 12px;

    background: white;

    overflow: visible;
}


/* Team header */

.team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 14px;

    border-radius: 9px 9px 0 0;

    color: white;
}

.team-title {
    display: flex;
    align-items: baseline;
    gap: 8px;

    font-size: 18px;
    font-weight: bold;
}

.team-name {
    font-size: 13px;
    font-weight: normal;
    opacity: 0.9;
}

.team-count {
    font-size: 14px;
    font-weight: bold;
}

.team-pokemon {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    padding: 15px;
}


/* --------------------------------------------------
   Pokémon cards
-------------------------------------------------- */

#pokemon-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.pokemon-card {
    position: relative;

    width: 180px;
    padding: 15px;

    text-align: center;

    border: 1px solid #ccc;
    border-radius: 12px;

    background: white;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.1);

    cursor: pointer;

    transition:
        transform 0.15s,
        border-color 0.15s,
        background-color 0.15s;
}

.pokemon-card:hover {
    transform: translateY(-3px);
}

.pokemon-card.selected {
    border: 3px solid #333;
    transform: translateY(-5px);
}


/* --------------------------------------------------
   Drafted Pokémon
-------------------------------------------------- */

#pokemon-container .pokemon-card.drafted {
    cursor: default;

    border: 3px solid var(--team-color);

    background:
        color-mix(
            in srgb,
            var(--team-color) 12%,
            white
        );
}


/* Grey only the Pokémon itself */

#pokemon-container .pokemon-card.drafted
.pokemon-image {
    filter: grayscale(100%);
    opacity: 0.45;
}

#pokemon-container .pokemon-card.drafted
.pokemon-name,
#pokemon-container .pokemon-card.drafted
.pokemon-types {
    opacity: 0.55;
}


/* --------------------------------------------------
   Banned Pokémon
-------------------------------------------------- */

/*
   Banned Pokémon are intentionally completely grey.
   The ONLY team/player indicator is the X.
*/

#pokemon-container .pokemon-card.banned {
    cursor: default;

    opacity: 0.35;
    filter: grayscale(100%);
}


/* Banned X */

.banned-x {
    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    font-size: 105px;
    font-weight: 300;

    line-height: 1;

    opacity: 0.7;

    pointer-events: none;

    user-select: none;

    z-index: 5;
}


/* --------------------------------------------------
   Pokémon image
-------------------------------------------------- */

.pokemon-image-container {
    width: 160px;
    height: 160px;

    margin: 0 auto;
}

.pokemon-image {
    width: 160px;
    height: 160px;

    object-fit: contain;

    transition:
        filter 0.15s,
        opacity 0.15s;
}


/* --------------------------------------------------
   Pokémon name
-------------------------------------------------- */

.pokemon-name {
    font-size: 20px;
    font-weight: bold;

    margin-top: 5px;
}


/* --------------------------------------------------
   Type badges
-------------------------------------------------- */

.pokemon-types {
    display: flex;
    justify-content: center;

    gap: 6px;

    margin-top: 8px;
}

.type-badge {
    display: inline-block;

    padding: 3px 9px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: bold;

    line-height: 1.4;

    color: white;

    text-transform: capitalize;
}

.type-normal {
    background: #A8A77A;
}

.type-fire {
    background: #EE8130;
}

.type-water {
    background: #6390F0;
}

.type-electric {
    background: #F7D02C;
    color: #333;
}

.type-grass {
    background: #7AC74C;
}

.type-ice {
    background: #96D9D6;
    color: #333;
}

.type-fighting {
    background: #C22E28;
}

.type-poison {
    background: #A33EA1;
}

.type-ground {
    background: #E2BF65;
    color: #333;
}

.type-flying {
    background: #A98FF3;
}

.type-psychic {
    background: #F95587;
}

.type-bug {
    background: #A6B91A;
}

.type-rock {
    background: #B6A136;
}

.type-ghost {
    background: #735797;
}

.type-dragon {
    background: #6F35FC;
}

.type-dark {
    background: #705746;
}

.type-steel {
    background: #B7B7CE;
    color: #333;
}

.type-fairy {
    background: #D685AD;
}


/* --------------------------------------------------
   Pokémon hover information
-------------------------------------------------- */

.pokemon-info {
    position: absolute;

    z-index: 100;

    left: 50%;
    bottom: calc(100% + 10px);

    transform:
        translateX(-50%);

    width: 190px;

    padding: 12px;

    border: 1px solid #bbb;
    border-radius: 10px;

    background: white;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.2);

    text-align: left;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.12s,
        visibility 0.12s;

    pointer-events: none;
}


/* Tooltip arrow */

.pokemon-info::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -7px;

    transform:
        translateX(-50%)
        rotate(45deg);

    width: 12px;
    height: 12px;

    background: white;

    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
}


/* Tooltip works for every card state */

.pokemon-card:hover .pokemon-info {
    opacity: 1;
    visibility: visible;
}


/* --------------------------------------------------
   Abilities
-------------------------------------------------- */

.pokemon-abilities {
    margin-bottom: 10px;

    font-size: 12px;
    font-weight: bold;

    text-align: center;

    white-space: nowrap;
}


/* --------------------------------------------------
   Stats
-------------------------------------------------- */

.pokemon-stats {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.stat-row {
    display: flex;
    justify-content: space-between;

    font-size: 12px;
}

.stat-row strong {
    font-weight: bold;
}


/* --------------------------------------------------
   Team Pokémon
-------------------------------------------------- */

.team .pokemon-card {
    width: 110px;
    padding: 8px;

    border: 2px solid var(--team-color);

    background:
        color-mix(
            in srgb,
            var(--team-color) 5%,
            white
        );

    cursor: default;
}

.team .pokemon-card:hover {
    transform: none;
}

.team .pokemon-card .pokemon-image {
    opacity: 1;
    filter: none;
}

.team .pokemon-card .pokemon-name,
.team .pokemon-card .pokemon-types {
    opacity: 1;
}

.team .pokemon-image-container {
    width: 90px;
    height: 90px;
}

.team .pokemon-image {
    width: 90px;
    height: 90px;
}

.team .pokemon-name {
    font-size: 15px;
}

.team .pokemon-types {
    font-size: 12px;
}

.team .pokemon-info {
    width: 180px;
}


/* --------------------------------------------------
   Responsive behavior
-------------------------------------------------- */

@media (max-width: 700px) {

    body {
        margin: 15px;
    }

    #initial-setup,
    #generation-controls {
        flex-direction: column;
        align-items: flex-start;
    }

    .pokemon-card {
        width: 150px;
    }

    .pokemon-image-container,
    .pokemon-image {
        width: 130px;
        height: 130px;
    }
}