/* KaM Fight Calculator Styles */
:root {
    --dark1: #191A1B;
    --dark2: #1F2021;

    --white1: #FFF;
    --white2: #BBB;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    min-height: 100vh;
    background: var(--dark1);
    color: var(--white1);
}

.hint {
    cursor: help;
}

small {
    color: var(--white2);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--white1);
    margin: 0.5em 0 0 0;
}

#app {
    width: 100%;
    max-width: 800px;
    background: var(--dark2);
    padding: 24px;
}

header {
    margin: 1rem;

    h1 {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-family: serif;
        margin: 0.1em;
    }
    span {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 0.8rem;
        font-family: sans-serif;
        color: var(--white2);
    }
    a {
        color: var(--white2);
    }
}

main {
    #selection {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        max-width: 420px;
        margin: 0 auto 24px auto;

        .select {
            flex: 0 0 calc(33.333% - 4px);
            box-sizing: border-box;
            cursor: pointer;
        }
        .border {
            padding: 8px;
            margin: 0;
            border: 2px solid transparent;
            &.is-unit1 {
                border-color: #FF0000;
            }
            &.is-unit2 {
                border-color: #0000FF;
            }
            &.is-both {
                border-color: #FF00FF;
            }
            &.is-not-selected {
                border-color: transparent;
            }
        }
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    table.unit-stats {
        th, td {
            padding: 3px 3px;
        }
        th:not(:first-child), td:not(:first-child) {
            text-align: right;
        }
        th:first-child, td:first-child {
            text-align: left;
        }
    }

    table.calculation-table {
        tbody {
            tr {
                text-align: center;
            }
        }
    }
}

.unit-card {
    display: flex;
    justify-content: center;
    
    .unit-card-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    img {
        width: 50px;
    }
}