:root {
    --color-card-borders:        #777;    
}


/* =========================================================
   Bot Card
   ========================================================= */

.bot-card {
    width: 100%;
    max-width: 360px;
    padding: 10px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            #3a3a3a 0%,
            #202020 45%,
            #111111 100%
        );

    /* border: 2px solid #777; */
    border: 2px solid var(--color-card-borders);
    border-radius: 18px;

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px #444;

    color: #eeeeee;
}

.bot-card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

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

    min-height: 48px;
    padding: 4px 8px 8px;

    /* border-bottom: 1px solid #777; */
    border-bottom: 1px solid var(--color-card-borders);
}

.bot-card-name {
    min-width: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: "Orbitron", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;

    color: #f2f2f2;
}

.bot-card-id {
    flex-shrink: 0;

    margin-left: 10px;

    font-family: "Orbitron", sans-serif;
    font-size: 0.75rem;
    font-weight: 500;

    color: #aaa;
}


/* ---------------------------------------------------------
   Image
   --------------------------------------------------------- */

.bot-card-image {
    aspect-ratio: 4 / 3;

    display: flex;
    justify-content: center;
    align-items: center;

    margin: 10px 0;

    overflow: hidden;

    /* border: 1px solid #666; */
    border: 1px solid var(--color-card-borders);
    border-radius: 12px;

    /* background: grey; */
    /* background: url("/static/images/showhall.png") center / cover no-repeat; */
    /* background: url("/static/images/carbon.jpeg") center / cover no-repeat; */
    background: url("/static/images/bot_bg.png") center / cover no-repeat;
}

.bot-card-image img {
    display: block;

    width: 60%;
    height: auto;

    object-fit: contain;
}


/* ---------------------------------------------------------
   Information
   --------------------------------------------------------- */

.bot-card-info {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 6px;
}

.bot-card-info-item {
    min-width: 0;

    padding: 8px 10px;

    background: linear-gradient(
        145deg,
        #303030,
        #1d1d1d
    );

    /* border: 1px solid #555; */
    border: 1px solid var(--color-card-borders);
    border-radius: 9px;
}

.bot-card-label {
    margin-bottom: 2px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: "Orbitron", sans-serif;
    font-size: 0.65rem;
    font-weight: 500;

    color: #999;
    text-transform: uppercase;
}

.bot-card-value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 0.9rem;
    font-weight: 500;

    color: #eeeeee;
}