:root {
    --steam-bg-darkest: #171a21;
    --steam-bg-darker: #1b2838;
    --steam-bg-dark: #2a475e;
    --steam-text-normal: #c7d5e0;
    --steam-text-muted: #8f98a0;
    --steam-text-bright: #ffffff;
    --steam-accent: #66c0f4;
}

.dbq-steam-placeholder {
    padding: 2rem;
    text-align: center;
    background-color: var(--steam-bg-darker);
    border: none;
    border-radius: 5px;
    color: var(--steam-text-muted);
}

/* --- Base Card & Refactored Style --- */
.dbq-steam-card {
    background: var(--steam-bg-darkest);
    border-radius: 5px;
    overflow: hidden;
    font-family: "Motiva Sans", "Twemoji", "Noto Sans", Helvetica, sans-serif;
}

.dbq-steam-card .steam-card-header {
    background-color: rgba(23, 26, 33, 0.9);
    background-image: linear-gradient(to right, rgba(23, 26, 33, 0.9) 50%, rgba(23, 26, 33, 0.6) 70%, rgba(23, 26, 33, 0.4) 100%),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjkzLjQyNnB4IiBoZWlnaHQ9Ijg4LjQ2cHgiIHZpZXdCb3g9IjAgMCAyOTMuNDI2IDg4LjQ2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyOTMuNDI2IDg4LjQ2Ig0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiNDNUMzQzAiIGQ9Ik00NC4yMzgsMC42MDFDMjEsMC42MDEsMS45NjMsMTguNTE5LDAuMTU0LDQxLjI5bDIzLjcxLDkuODAzYzIuMDA5LTEuMzc0LDQuNDM2LTIuMTc5LDcuMDQ3LTIuMTc5DQoJCWMwLjIzNCwwLDAuNDY3LDAuMDA4LDAuNjk4LDAuMDIxbDEwLjU0NC0xNS4yODNjMC0wLjA3My0wLjAwMS0wLjE0NC0wLjAwMS0wLjIxNmMwLTkuMTk5LDcuNDgzLTE2LjY4MywxNi42ODMtMTYuNjgzDQoJCWM5LjE5OSwwLDE2LjY4Miw3LjQ4NCwxNi42ODIsMTYuNjgzYzAsOS4xOTktNy40ODMsMTYuNjg0LTE2LjY4MiwxNi42ODRjLTAuMTI3LDAtMC4yNTMtMC4wMDMtMC4zNzktMC4wMDZsLTE1LjAzOCwxMC43Mw0KCQljMC4wMDgsMC4xOTUsMC4wMTUsMC4zOTQsMC4wMTUsMC41OTJjMCw2LjkwNi01LjYxNywxMi41MjItMTIuNTIyLDEyLjUyMmMtNi4wNjEsMC0xMS4xMjktNC4zMjYtMTIuMjc3LTEwLjA1NUwxLjY3OCw1Ni44OTMNCgkJYzUuMjUsMTguNTY4LDIyLjMwOSwzMi4xODEsNDIuNTYsMzIuMTgxYzI0LjQzMiwwLDQ0LjIzNy0xOS44MDYsNDQuMjM3LTQ0LjIzNUM4OC40NzUsMjAuNDA2LDY4LjY2OSwwLjYwMSw0NC4yMzgsMC42MDEiLz4NCgk8cGF0aCBmaWxsPSIjQzVDM0MwIiBkPSJNMjcuODc1LDY3LjcyM2wtNS40MzQtMi4yNDVjMC45NjMsMi4wMDUsMi42MjksMy42ODQsNC44NDEsNC42MDZjNC43ODIsMS45OTIsMTAuMjk1LTAuMjc3LDEyLjI4OC01LjA2Mw0KCQljMC45NjUtMi4zMTQsMC45NzEtNC44NjksMC4wMTQtNy4xODljLTAuOTU1LTIuMzIxLTIuNzU3LTQuMTMxLTUuMDc0LTUuMDk3Yy0yLjI5OS0wLjk1Ny00Ljc2Mi0wLjkyMi02LjkyNi0wLjEwNWw1LjYxMywyLjMyMQ0KCQljMy41MjcsMS40Nyw1LjE5NSw1LjUyLDMuNzI1LDkuMDQ3QzM1LjQ1NSw2Ny41MjYsMzEuNDAyLDY5LjE5NCwyNy44NzUsNjcuNzIzIi8+DQoJPHBhdGggZmlsbD0iI0M1QzNDMCIgZD0iTTY5Ljk1LDMzLjQzNmMwLTYuMTI5LTQuOTg2LTExLjExNi0xMS4xMTYtMTEuMTE2Yy02LjEyOSwwLTExLjExNiw0Ljk4Ny0xMS4xMTYsMTEuMTE2DQoJCWMwLDYuMTMsNC45ODcsMTEuMTE1LDExLjExNiwxMS4xMTVDNjQuOTY0LDQ0LjU1LDY5Ljk1LDM5LjU2NSw2OS45NSwzMy40MzYgTTUwLjUwMiwzMy40MTdjMC00LjYxMiwzLjczOS04LjM1LDguMzUxLTguMzUNCgkJYzQuNjEyLDAsOC4zNTEsMy43MzgsOC4zNTEsOC4zNXMtMy43MzksOC4zNS04LjM1MSw4LjM1QzU0LjI0MSw0MS43NjcsNTAuNTAyLDM4LjAyOCw1MC41MDIsMzMuNDE3Ii8+DQoJPHBhdGggZmlsbD0iI0M1QzNDMCIgZD0iTTEzNS43MTgsMzAuODY4bC0yLjk2NCw1LjIxYy0yLjI4My0xLjU5NS01LjM3Ny0yLjU1NS04LjA3OC0yLjU1NWMtMy4wODcsMC00Ljk5NywxLjI3OC00Ljk5NywzLjU2Nw0KCQljMCwyLjc4MSwzLjM5MywzLjQyOCw4LjQzNiw1LjIzOGM1LjQyMSwxLjkxNyw4LjUzNyw0LjE3LDguNTM3LDkuMTM1YzAsNi43OTMtNS4zNDIsMTAuNjA4LTEzLjAyLDEwLjYwOA0KCQljLTMuNzQyLDAtOC4yNTYtMC45NjYtMTEuNzI2LTMuMDc3bDIuMTYyLTUuNzc2YzIuODE5LDEuNDg5LDYuMTkxLDIuMzcyLDkuMTk3LDIuMzcyYzQuMDUyLDAsNS45NzgtMS40OTUsNS45NzgtMy43MDUNCgkJYzAtMi41MjktMi45MzctMy4yODktNy42NzgtNC44NTljLTUuNDAzLTEuODA0LTkuMTQ3LTQuMTcxLTkuMTQ3LTkuNjY2YzAtNi4xOTcsNC45NjMtOS43NTYsMTIuMTA0LTkuNzU2DQoJCUMxMjkuNDk5LDI3LjYwNCwxMzMuNDk5LDI5LjE4MSwxMzUuNzE4LDMwLjg2OCIvPg0KCTxwb2x5Z29uIGZpbGw9IiNDNUMzQzAiIHBvaW50cz0iMTU4Ljg4OCwzNC4xNjEgMTU4Ljg4OCw2MS41IDE1MS45MDksNjEuNSAxNTEuOTA5LDM0LjE2MSAxNDEuNzc5LDM0LjE2MSAxNDEuNzc5LDI4LjE3NSANCgkJMTY4Ljk4OCwyOC4xNzUgMTY4Ljk4OCwzNC4xNjEgCSIvPg0KCTxwb2x5Z29uIGZpbGw9IiNDNUMzQzAiIHBvaW50cz0iMTgzLjcsMzQuMTQzIDE4My43LDQxLjY1MiAxOTcuMDU2LDQxLjY1MiAxOTcuMDU2LDQ3LjYzOCAxODMuNyw0Ny42MzggMTgzLjcsNTUuNDU5IA0KCQkxOTkuMTk2LDU1LjQ1OSAxOTkuMTk2LDYxLjUgMTc2LjcyMyw2MS41IDE3Ni43MjMsMjguMTc1IDE5OS4xOTYsMjguMTc1IDE5OS4xOTYsMzQuMTQzIAkiLz4NCgk8cGF0aCBmaWxsPSIjQzVDM0MwIiBkPSJNMjE0Ljc3Myw1NS4wM2wtMi4yMDYsNi40NzFoLTcuMzE2bDEyLjQ5NS0zMy4zMjVoNy4wMjVMMjM3LjYxOSw2MS41aC03LjU2M2wtMi4yNTQtNi40NzFIMjE0Ljc3M3oNCgkJIE0yMjEuMjE5LDM2LjEyNWwtNC41NTEsMTMuMzQzaDkuMTk2TDIyMS4yMTksMzYuMTI1eiIvPg0KCTxwb2x5Z29uIGZpbGw9IiNDNUMzQzAiIHBvaW50cz0iMjczLjQzNiw0MS4wNTYgMjY0LjMxNiw2MC41MjkgMjYwLjM3OCw2MC41MjkgMjUxLjQwNiw0MS4yMyAyNTEuNDA2LDYxLjUgMjQ0LjcyMyw2MS41IA0KCQkyNDQuNzIzLDI4LjE3NSAyNTEuMzkxLDI4LjE3NSAyNjIuNTkxLDUyLjIzMSAyNzMuMzkzLDI4LjE3NSAyODAuMTE5LDI4LjE3NSAyODAuMTE5LDYxLjUgMjczLjQzNyw2MS41IAkiLz4NCgk8cGF0aCBmaWxsPSIjQzVDM0MwIiBkPSJNMjkzLjYxMSwzMi4zNzljMCwyLjg2NC0yLjE0Niw0LjY0OS00LjYwOSw0LjY0OWMtMi40NzIsMC00LjYyMy0xLjc4NS00LjYyMy00LjY0OQ0KCQljMC0yLjg2MywyLjE1MS00LjYzNiw0LjYyMy00LjYzNkMyOTEuNDY2LDI3Ljc0MywyOTMuNjExLDI5LjUxNiwyOTMuNjExLDMyLjM3OSBNMjg1LjE1NCwzMi4zNzljMCwyLjM5NiwxLjcyNiwzLjkwMSwzLjg0OCwzLjkwMQ0KCQljMi4xMTQsMCwzLjgzMy0xLjUwNSwzLjgzMy0zLjkwMWMwLTIuNDAzLTEuNzE5LTMuODg1LTMuODMzLTMuODg1QzI4Ni44ODYsMjguNDk0LDI4NS4xNTQsMjkuOTk0LDI4NS4xNTQsMzIuMzc5IE0yODkuMDY2LDMwLjAxDQoJCWMxLjE5NSwwLDEuNTk3LDAuNjMyLDEuNTk3LDEuMzE1YzAsMC42MjYtMC4zNzEsMS4wNDYtMC44MjMsMS4yNmwxLjA3MSwyLjAwN2gtMC44NzdsLTAuOTAzLTEuNzc5SDI4OC4ydjEuNzc5aC0wLjczVjMwLjAxDQoJCUgyODkuMDY2eiBNMjg4LjIwNywzMi4xNDJoMC44MTRjMC41MjcsMCwwLjgzOC0wLjMzMSwwLjgzOC0wLjc0N2MwLTAuNDItMC4yMjMtMC42OS0wLjg0LTAuNjloLTAuODEzVjMyLjE0MnoiLz4NCjwvZz4NCjwvc3ZnPg0K);
    background-repeat: no-repeat;
    background-size: auto 2.5rem;
    background-position: 90% center;
}

.dbq-steam-card .steam-avatar img {
    width: 40px;
    height: 40px;
    border: 2px solid var(--steam-bg-dark);
    object-fit: cover;
    border-radius: 0 !important;
    max-height: unset;
}

.dbq-steam-card .steam-nickname {
    font-size: 1rem;
    font-weight: 500;
    color: var(--steam-text-bright);
}

.dbq-steam-card .game-count {
    font-size: 0.75rem;
    color: var(--steam-text-muted);
}

.dbq-steam-card .steam-game-entry {
    position: relative;
    height: 72px;
    background-image: 
        linear-gradient(to right, rgba(27, 40, 56, 1) 40%, rgba(27, 40, 56, 0.7) 65%, transparent 85%),
        var(--game-bg-url);
    background-size: cover,60%;
    background-position: right;
}

@media (min-width: 1200px) {
    .dbq-steam-card .steam-game-entry {
        background-size: cover,60%;
    }
}

@media (min-width: 992px) {
    .dbq-steam-card .steam-game-entry {
        background-size: cover,70%;
    }
}

.dbq-steam-card .steam-game-details {
    position: relative;
    z-index: 1;
    height: 100%;
    max-width: 70%;
    transition: transform 0.2s ease-out;
}

.dbq-steam-card .steam-game-entry:hover .steam-game-details {
    transform: scale(1.03); 
}


.dbq-steam-card .steam-game-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--steam-text-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.dbq-steam-card .steam-game-playtime {
    gap: 12px;
}
.dbq-steam-card .playtime-column {
    line-height: 1.3;
}
.dbq-steam-card .playtime-label {
    font-size: 0.65rem;
    color: var(--steam-text-muted);
}
.dbq-steam-card .playtime-value {
    font-size: 0.75rem;
    color: var(--steam-text-normal);
}