.tdx-watch-characters { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-width: 0; margin: 4px 0 2px; } .tdx-watch-characters__label { flex: 0 0 auto; padding-top: 11px; font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-dim, #aaa); opacity: 0.6; white-space: nowrap; } .tdx-watch-characters__list { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } .tdx-watch-character { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: #2f2f2f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025); text-decoration: none; transition: background 0.16s ease; } .tdx-watch-character:hover { background: #3a3a3a; } .tdx-watch-character__avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #3d3d3d; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; line-height: 1; } .tdx-watch-character__copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .tdx-watch-character__name { color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; } .tdx-watch-character__franchise { color: #aaa; font-size: 11px; line-height: 1.2; white-space: nowrap; } @media (max-width: 768px) { .tdx-watch-characters { flex-direction: column; gap: 6px; } .tdx-watch-characters__label { padding-top: 0; } .tdx-watch-character__avatar { width: 26px; height: 26px; font-size: 12px; } .tdx-watch-character__name { font-size: 12.5px; } }