/**
 * Drawn logos for the card-game sport chips.
 *
 * These games have no emoji, so each mark is an inline SVG data URI -- no
 * network request, so a pill can never render blank on a cold cache.
 *
 * Shared because the three chip rows each use their own attribute convention
 * (auctions `data-sport`, marketplace `data-v`, vault `data-f="sport:X"`), and
 * keeping one copy per page is exactly how Pokemon ended up being the only
 * game with a logo while MTG, Yu-Gi-Oh!, One Piece and Lorcana rendered empty.
 *
 * Sized to 31px to match what the emoji icons render at from `font-size:30px`.
 */

.sportpill:is([data-sport="POKEMON"], [data-v="POKEMON"], [data-f="sport:POKEMON"]) .ico {
    width: 31px;
    height: 31px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='%23fff'/%3E%3Cpath d='M4 50a46 46 0 0 1 92 0z' fill='%23ee1c25'/%3E%3Cpath d='M4 50h92' stroke='%23111' stroke-width='10'/%3E%3Ccircle cx='50' cy='50' r='46' fill='none' stroke='%23111' stroke-width='8'/%3E%3Ccircle cx='50' cy='50' r='14' fill='%23fff' stroke='%23111' stroke-width='9'/%3E%3C/svg%3E") center/contain no-repeat;
}

.sportpill:is([data-sport="MAGIC"], [data-v="MAGIC"], [data-f="sport:MAGIC"]) .ico {
    width: 31px;
    height: 31px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='%23f7e7c6' stroke='%23111' stroke-width='7'/%3E%3Cpath d='M50 20c6 16 14 24 30 30-16 6-24 14-30 30-6-16-14-24-30-30 16-6 24-14 30-30z' fill='%232b2118'/%3E%3C/svg%3E") center/contain no-repeat;
}

.sportpill:is([data-sport="YUGIOH"], [data-v="YUGIOH"], [data-f="sport:YUGIOH"]) .ico {
    width: 31px;
    height: 31px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 94 88H6z' fill='%23e9b949' stroke='%23111' stroke-width='7' stroke-linejoin='round'/%3E%3Cellipse cx='50' cy='62' rx='20' ry='12' fill='%23fff' stroke='%23111' stroke-width='5'/%3E%3Ccircle cx='50' cy='62' r='6' fill='%23111'/%3E%3C/svg%3E") center/contain no-repeat;
}

.sportpill:is([data-sport="ONEPIECE"], [data-v="ONEPIECE"], [data-f="sport:ONEPIECE"]) .ico {
    width: 31px;
    height: 31px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='70' rx='46' ry='16' fill='%23f2d08a' stroke='%23111' stroke-width='6'/%3E%3Cpath d='M22 68c0-22 12-36 28-36s28 14 28 36z' fill='%23f7dfa8' stroke='%23111' stroke-width='6'/%3E%3Cpath d='M21 62h58v9H21z' fill='%23d4322c' stroke='%23111' stroke-width='4'/%3E%3C/svg%3E") center/contain no-repeat;
}

.sportpill:is([data-sport="LORCANA"], [data-v="LORCANA"], [data-f="sport:LORCANA"]) .ico {
    width: 31px;
    height: 31px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 74 30 50 94 26 30z' fill='%23d9b25a' stroke='%23111' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M26 30h48' stroke='%23111' stroke-width='5'/%3E%3Cpath d='M50 6v88' stroke='%23111' stroke-width='4' opacity='.55'/%3E%3C/svg%3E") center/contain no-repeat;
}

.sportpill:is([data-sport="MARVEL"], [data-v="MARVEL"], [data-f="sport:MARVEL"]) .ico {
    width: 31px;
    height: 31px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='6' y='26' width='88' height='48' rx='6' fill='%23ec1d24' stroke='%23111' stroke-width='6'/%3E%3Cpath d='M20 64V38l10 16 10-16v26M52 64V38h18M52 52h14M52 64h18' stroke='%23fff' stroke-width='6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.sportpill:is([data-sport="DRAGONBALL"], [data-v="DRAGONBALL"], [data-f="sport:DRAGONBALL"]) .ico {
    width: 31px;
    height: 31px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='44' fill='%23f5a623' stroke='%23111' stroke-width='7'/%3E%3Cpath d='M50 30 58 46l17 2-12 12 3 17-16-9-16 9 3-17-12-12 17-2z' fill='%23d0021b'/%3E%3C/svg%3E") center/contain no-repeat;
}